/** Here is the preload function that will be used on the next statement **/
function preload(arrayOfImages) {
    $(arrayOfImages).each(function(){
        $('<img/>')[0].src = this;
        // Alternatively you could use:
        // (new Image()).src = this;
    });
}// end function

///#############################################################################
/// -----------------------------------------------------------------------///|#
/** Hi dad here are the variables that store the info for your gallery **/ ///|#
var AmountOfImages = 4;													   ///|#
preload([																   ///|#
"Image Swapper/1.png",													   ///|#
"Image Swapper/2.png",													   ///|#
"Image Swapper/3.png",													   ///|#
"Image Swapper/4.png"													   ///|#
]);                                                                        ///|#
/** End Image loading, the rest will be done for you ;) **/                ///|#
/// -----------------------------------------------------------------------///|#
///#############################################################################

/// preaload the thank you image after the email animation is complete.
var ThanksImg = document.createElement('img');
ThanksImg.src = "Graphics/TY.png";

$(function(){
	
	$("a").click(function(){
		$("#SpamMeNot").attr({"href" : "mailto:brian@nwsigns.com"});
	})
	
	/** Use jquery ui to create the scrollbar **/
	$("#Scrollbar").draggable({containment: "parent", axis: "y" });

	/** The following animates the arrow to hover over the buttons **/
	$(".button").hover(function(){
			var TargerPos = $(this).css("left");
			//The following two lines strip down the string into an intiger
			TargerPos = TargerPos.replace(/px/g,"");
			TargerPos = parseInt(TargerPos);
			TargerPos = TargerPos + 28 + "px"; // Off by 1 pixel					 
			$("#MenuArrow").stop().animate({ "left" : TargerPos },300,"swing");
	});

	/** This interval function is used to swap the images on the home page**/
	var ImageList = new Array();
	/** The amount of images in on the main auto swapping gallery **/
	var NumberOfImages = AmountOfImages;
	
	NumberOfImages = parseInt(NumberOfImages);
	for(var i=1; i < (NumberOfImages+1); i++){
		ImageList[i] = "Image Swapper/"+i+".png";
	}

	if ( $.browser.msie != true ) {
		var CurrentImg = 2;
		setInterval(function() {
			$("#ImageSwapper").animate({ 
				"opacity" : 0 
			},200,"swing",function(){
				 $("#ImageSwapper").attr({ "src" : ImageList[CurrentImg] })
				$("#ImageSwapper").animate({ "opacity" : 1 },200,"swing");
				
				if(CurrentImg == parseInt(NumberOfImages)){CurrentImg=1;}
				else{CurrentImg++;}
			});
		}, 4000);
		/// End the image swapper script
	}
	
	else{
		setInterval(function() {
			var CurrentImg = 2;
			 $("#ImageSwapper").attr({ "src" : ImageList[CurrentImg] })
			if(CurrentImg == parseInt(NumberOfImages)){CurrentImg=1;}
			else{CurrentImg++;}
		}, 4000);
		/// End the image swapper script
	}

	function getPercentile(ELEM){
		var Percentile = parseInt(ELEM.css("top"))/parseInt(ELEM.parent().height() - parseInt($("#Scrollbar").height() ) ) * 100;
		Percentile = Math.round(Percentile);
		return(Percentile);
	}

	
	function setPercentileH(ELEM,Num){
		ELEM.css({"top":(-parseInt(ELEM.height())+parseInt(ELEM.parent().height()) ) *Num/100  });
	}

	
	setInterval(function(){
		/* $("#TextSlider").css({ "top" : parseInt($("#Scrollbar").css("top"))*-1 }); */
		getPercentile($("#Scrollbar"));
		setPercentileH($("#TextSlider"),getPercentile($("#Scrollbar")));
	}, 30);

	
	$("#FootSlider").hover(function(){
		$(this).stop().animate({"height" : "270px" },150,"swing");
	});	
	$("#FootSlider").mouseleave(function(){
		$(this).stop().animate({"height" : "50px" },150,"swing");
	});
	
	$("#SendMsg").click(function(){
	
		$("#FootSlider").unbind();
	
		$("#FootSlider").stop().animate({"height" : "0px" },250,"swing",function(){
			$("#FootSlider").css({ "background-image" : "url("+ ThanksImg.src +")" });
			$("#FootSlider").animate({"height" : "50px" },350,"swing");
			$("#FootSlider").html("");
		});
	});
	

	
});