//Variables
var paper;
var timer;
var x = 0;
var bgY = 87;	
var bgStart = 87;

//Methods
function initPaperRollover(){
	$(document.body); //This is for IE
	createPaper();		
	buttonSetup();
}

function buttonSetup(){
	var items = $$('#work_page .showcase .thumbnail_holder');
	
	items.each(function(item){
		item.observe('mouseover', function(e){
			var targetAnchor = 	item.firstDescendant();
			paper.show();
			positionPaper(item);
			timer=setInterval(function(){tweenBg(item, bgStart, 0, 3)}, 30);
		})
		item.observe('mouseout', function(e){										  
			paper.hide();
			resetPaperBg()
			paper.setStyle({backgroundPosition: '0 ' + bgY + 'px'});				
		})		
	});
}
	
function createPaper(){
	paper = new Element('div', {id: 'paper_rollover'});
	document.body.insert(paper, {position: top});
	paper.hide();
}

function positionPaper(elem){
	elem.insert(paper, {position: top});
	
	if (paper.siblings().length > 0){
		var anchoredSibling = paper.siblings()[0]; 
		paper.stopObserving('click');  //Unregisters all click handlers
		paper.observe('click', function(e){
			macbox.loadAsset(paper.siblings()[0].href, paper.siblings()[0].title);
		});
	}
}

function resetPaperBg(){
	x = 0;
	bgY = bgStart;		
	paper.setStyle({backgroundPosition: '0 ' + bgStart + 'px'});
	clearInterval(timer);
}

function tweenBg(e, b, ty, sp){
	x += sp;
	if (Math.floor(Math.abs(ty - bgY)) > 3){
		bgY = -x + b;
		paper.setStyle({backgroundPosition: '0 ' + bgY + 'px'});			
	}else{
		paper.setStyle({backgroundPosition: '0 ' + ty + 'px'});
		clearInterval(timer);
	}
}