key_peak_reset = null;

document.observe("dom:loaded", function() {
	var peaking = false;
	var keyholeLeft = $('keyhole').cumulativeOffset()[0];
	var keyholeTop = $('keyhole').cumulativeOffset()[1];

	var leftOffset = 0;
	var topOffset = 0;
	
	var initLeft = null;
	var initTop = null;
	
	Event.observe(window, 'load', function() { 
		$$("#keyhole")[0].setStyle({left:0}); 
		Effect.Appear('scene', { duration: 1.0 });
	});
	
	function moveScene(event) {

		$$("img#scene").each(function(e){
			
			leftPos = parseInt($('scene').getStyle('left'))+(leftOffset);
			topPos = parseInt($('scene').getStyle('top'))+(topOffset);
			
			//var rightConstraint = ($('keyhole').getWidth()-350)*-1;
			//var bottomConstraint = ($('keyhole').getHeight()-470)*-1;
						
			//$$('div#introduction p')[0].innerHTML="left: "+leftPos+"px / "+rightConstraint+"px || top: "+topPos+"px / "+bottomConstraint+"px" ;

			if((topPos < 165 && topPos > 5) && (leftPos < 115 && leftPos > -270)) {
				e.setStyle({
					left: leftPos+"px",
					top: topPos+"px"
				});
			
				if(initLeft != null && initTop != null) {
					leftOffset = initLeft-(Event.pointerX(event)-keyholeLeft);
					topOffset = initTop-(Event.pointerY(event)-keyholeTop);
				} else {	
					leftOffset = 0;
					topOffset = 0;
				}
				
				initLeft = (Event.pointerX(event)-keyholeLeft);
				initTop = (Event.pointerY(event)-keyholeTop);
			} else {
				initLeft = null;
				initTop = null;
				leftOffset = 0;
				topOffset = 0;
			}
			
		});
	}

	function startPeaking() {
		if(!peaking) {
			window.clearTimeout(key_peak_reset);
			
			Event.observe(document, 'mousemove', moveScene);
			peaking = true;
		}
	}
	
	function stopPeaking() {
		if(peaking) {
			Event.stopObserving(document, 'mousemove', moveScene);
			initLeft = null;
			initTop = null;
			leftOffset = 0;
			topOffset = 0;
			peaking = false;
			
			key_peak_reset = window.setTimeout(function() {
				Effect.Fade("scene", {
					duration: 0.5,
					afterFinish: function() {					
						$("scene").setStyle({
							left: "-262px",
							top: "64px"
						});
						Effect.Appear("scene", {
							duration: 0.5
						});
					}
				});
			}, 500);
		}
	}

	$$("div#keyhole").each(function(e){
		e.observe("mouseover", startPeaking);
	});
	
	$$("div#keyhole").each(function(e){
		e.observe("mouseout", stopPeaking);
	});
	
});