var nCoords = {"x":0,"y":0};
var nSizes = {"wImg":0,"hImg":0,"wCan":0,"hCan":0};
var oTime;
var nRefresh = 1; // milliseconds
var nSpeed = 2; // pixels moved every refresh set by nRefresh

function beginRefresh () {
	oTime = setTimeout("eventFrame()",nRefresh);
}
function endRefresh () {
	clearTimeout(oTime);
}

function eventFrame () {

	var oCanvas = $("#canvas");
	var oImg = $("#canvas img");

	if (nSizes['hImg']>nSizes['hCan']) // if the image is larger than canvas proceed
	{

		var nOffset = oImg.offset().top - oCanvas.offset().top; // calibration -> image top offset - canvas top offset = 0
		var nDiff = nSizes['hImg']-nSizes['hCan']; // image height - canvas height

		if (nCoords['y']>nSizes['hCan']/2) // bottom
		{	
			
			if (Math.abs(nOffset)>=nDiff) // if we are done scrolling down or have gone too far reset to max
			{
				oImg.css({"top":"-"+nDiff+"px"});
				$("#overlay div.B").removeClass("on").addClass("off");
				$("#overlay div.T").removeClass("off").addClass("on");
			}
			else // continue scrolling down
			{
				var nTop = (nOffset-nSpeed) + "px";
				oImg.css({"top":nTop});
				$("#overlay div.B").removeClass("off").addClass("on");
				$("#overlay div.T").removeClass("off").addClass("on");
			}

		}
		else // top
		{
			if (nOffset>=0) // if we are done scrolling up or have gone too far reset to max
			{
				oImg.css({"top":"0"});
				$("#overlay div.B").removeClass("off").addClass("on");
				$("#overlay div.T").removeClass("on").addClass("off");
			}
			else // continue scrolling up
			{
				var nTop = (nOffset+nSpeed) + "px";
				oImg.css({"top":nTop});
				$("#overlay div.B").removeClass("off").addClass("on");
				$("#overlay div.T").removeClass("off").addClass("on");
			}
		}

	}

/*
	if (nSizes['wImg']>nSizes['wCan']) // if the image is wider than canvas proceed
	{
		var nOffset = oImg.offset().left - oCanvas.offset().left; // calibration -> image left offset - canvas left offset = 0
		var nDiff = nSizes['wImg']-nSizes['wCan']; // image width - canvas width
		
		if (nCoords['x']>nSizes['wCan']/2) // right
		{
			if (Math.abs(nOffset)>=nDiff) // if we are done scrolling right or have gone too far reset to max
			{
				oImg.css({"left":"-"+nDiff+"px"}); 
			}
			else // continue scrolling right
			{
				var nLeft = (nOffset-nSpeed) + "px";
				oImg.css({"left":nLeft});
			}
		}
		else // left
		{
			if (nOffset>=0) // if we are done scrolling left or have gone too far reset to max
			{
				oImg.css({"left":"0"});
			}
			else // continue scrolling left
			{
				var nLeft = (nOffset+nSpeed) + "px";
				oImg.css({"left":nLeft});
			}
		}

	}
*/

	beginRefresh(); // do all over again

}

// The array key's are the field names and their respective values
// PS: These are global, a change here should change every instance of these labels

var arrLabels = { 
	"first":"First Name",
	"last":"Last Name",
	"email":"Email",
	"address1":"Address Line 1",
	"address2":"Address Line 2",
	"city":"City",
	"zipcode":"Zipcode",
	"comments":"Comments"
};

$(document).ready(function(){

	if (jQuery.browser.safari && document.readyState != "complete") // Webkit browsers load CSS and JS at the same time so make them wait a bit more
	{
		setTimeout( arguments.callee, 100 );
		return;
	}

	$.each(arrLabels,function(intIndex,objValue) // add our labels to the appropriate field's value
	{
		$("[name='"+intIndex+"']").val(objValue);
	});
	
	$("form#contact").find("input,textarea").focus(function()
	{
		var temp = arrLabels[$(this).attr("name")];
		if(temp) // if we found an array result then continue
		{ 
			if($(this).val()==temp) // if this result matches the current input value then erase so user can type his own else it already has been altered so leave it
			{ 
				$(this).val("").removeClass("empty");
			}
		}
	});

	$("form#contact").find("input,textarea").blur(function()
	{
		var temp = arrLabels[$(this).attr("name")];
		if(temp) // if we found an array result then continue
		{ 
			if($(this).val()=="") // if the current input value is empty then fill it in with our result
			{ 
				$(this).val(temp).addClass("empty");
			}
		}
	});


	//////// GALLERY SLIDER ////////

	nSizes['wImg'] = $('#canvas img').width();
	nSizes['hImg'] = $('#canvas img').height();
	nSizes['wCan'] = $('#canvas').width();
	nSizes['hCan'] = $('#canvas').height();

	if (nSizes['hImg']>nSizes['hCan']) $("#overlay div.B").addClass("on");

	$('#canvas').mousemove(function(event) {
		nCoords['x'] = event.pageX-$(this).offset().left;
		nCoords['y'] = event.pageY-$(this).offset().top;
	});

	$("#canvas").hover(function(event){
		beginRefresh();
	},function(){
		endRefresh();
	});

});