/*

Mario's jQuery html slideshow

date: 12/11/2009
author: Mario Edgar
website: http://www.marioedgar.com

preload JS provided by Ariel Flesler: http://flesler.blogspot.com/2008/01/jquerypreload.html

Feel free to use this in any way, sell it for $1,000,000,000 for all I care

*/

jQuery(window).ready(function(){

    /* These are the only values that will need to be edited */
    var divName = "slideShowDiv";
    var numSlides = 3;
    var pauseTime = 8000;
	  /* If you plan on preloading images set this to true, otherwise set to false */
	  var imagePreLoad = true;
    var imagesPath = "http://marioedgar.com/homepage_slide_images/";
    var imageType = ".jpg";
    var slideShowWidth = 910;
    var slideShowHeight = 300;
    var loaderName = "loader.gif";
    var loaderWidth = 32;    
    var loaderHeight = 32;
    var navigationButtons = true; 
    /* No need to edit anything any code below */  

    /* Create path to loader URL */   
    var loaderURL = "url(" + imagesPath + loaderName + ")";
    var counter = 1;
    var preLoadImages = [];  
    numSlides = numSlides + 1;
	var timer;
 
    /* Append the loader inside of slideshow div */  
    jQuery("#" + divName).append("<b id='loader_gif' style='opacity:0.0;'></b>");
	
	/* If the navigationButtons variable is set to true then append the buttons to the stage */
    if (navigationButtons == true)
            {
               jQuery("#" + divName).append("<div id='slideControls' style='display:none;' ><a id='previousSlide' ><img src='" + imagesPath + "left.png' /></a><a id='nextSlide' ><img src='" + imagesPath + "right.png' /></a></div>");
               jQuery("#" + divName + " a").css("cursor","pointer");           
			         jQuery("#previousSlide img").css("opacity","0.1");    
			         jQuery("#nextSlide img").css("opacity","0.1");    
            } 

    /* Get the X and Y coordinates for the loader gif */    
    var loaderX = (slideShowWidth / 2) - (loaderWidth / 2);
    var loaderY = (slideShowHeight / 2) - (loaderHeight / 2);
    
    /* Set style of slideshow */   
    var slideShowDivObject= document.getElementById(divName);
    slideShowDivObject.style.width = slideShowWidth + "px";
    slideShowDivObject.style.height = slideShowHeight + "px";
    slideShowDivObject.style.position = "relative";

    /* Set style and positioning of loader */   
    var loaderDivObject= document.getElementById("loader_gif");
    loaderDivObject.style.width = loaderWidth + "px";
    loaderDivObject.style.height = loaderHeight + "px";
    loaderDivObject.style.position = "absolute";
    loaderDivObject.style.top = "0";
    loaderDivObject.style.zIndex = "-1";
    loaderDivObject.style.marginTop = loaderY + "px";
    loaderDivObject.style.marginLeft = loaderX + "px";
    loaderDivObject.style.backgroundImage  = loaderURL;
    loaderDivObject.style.backgroundRepeat = "no-repeat"; 

	/* Fade in the loader gif*/
    jQuery("#loader_gif").animate({opacity: 1.0}, 2000);
 
    /* set the preLoadImages array to contain all of the image names */
    for (var i = 1; i < numSlides; i++)
    {
        preLoadImages[i] = String(i);
    }
    
	if (imagePreLoad == true)
	{
			/* Preload all of the images (Thanks to jquery.preload-min.js), once finished start the slideshow */
			jQuery.preload( preLoadImages, {
				base: imagesPath,
				ext: imageType,
				onFinish:function(){ 
					/* Remove the loader gif */
					jQuery("#loader_gif").fadeOut("slow");
					/* Fade in the slidecontrols */
					jQuery("#slideControls").fadeIn("slow"); 
					/* Begin slideshow */
					autoNextSlide();
				}
			});
	}
	else
	{
			/* Remove the loader gif */
			jQuery("#loader_gif").fadeOut("slow");
			/* Fade in the slidecontrols */
			jQuery("#slideControls").fadeIn("slow"); 
			/* Begin slideshow */
			autoNextSlide();
	}

	/* Function for manually pressing the next button */
    function nextSlide()
    {	
      clearTimeout(timer);
      jQuery("#" + divName + " #slide" + counter).find("div.slideInfo").animate({height: "60px"}, 500 );	
  		jQuery("#" + divName + " #slide" + counter).fadeIn("#slide" + (counter)); 
    }
	
	/* Function for auto slidshow, after the pause time go to the next slide */
    function autoNextSlide()
    {	
      clearTimeout(timer);	
  		jQuery("#" + divName + " #slide" + counter).fadeIn("#slide" + (counter)); 
      jQuery("#" + divName + " #slide" + counter).find("div.slideInfo").animate({height: "60px"}, 500 );
      jQuery("#" + divName + " #slide" + counter).find("div.slideInfo").animate({height: "60px"}, 7000 );
      jQuery("#" + divName + " #slide" + counter).find("div.slideInfo").animate({height: "1px"}, 500 );  
  		timer = window.setTimeout(autoSlideShow,(pauseTime));  
    }

  	/* After pause time, come back to this function to fadeout the previous slide and go to the next */
  	function autoSlideShow()
  	{ 
  	  clearTimeout(timer);
  	  jQuery("#" + divName + " #slide" + counter).find("div.slideInfo").animate({height: "1px"}, 500 );  
  		jQuery("#" + divName + " #slide" + counter).fadeOut("#slide" + (counter));	
  		counter++;
  		if(counter >= numSlides){counter=1} 
  		timer = window.setTimeout(autoNextSlide,(400));  
  	}
	
    /* Function for next slide on click event */
    jQuery("#nextSlide").click(function () { 
        clearTimeout(timer); 	
        jQuery("#" + divName).find("div.slideInfo").animate({height: "1px"}, 500 ); 
    		jQuery("#" + divName + " #slide" + counter).fadeOut("#slide" + (counter));		
    	  counter++;
    		if(counter >= numSlides){counter=1}
    		timer = window.setTimeout(nextSlide,(400));  
    });
	
    /* Function for previous slide on click event */
    jQuery("#previousSlide").click(function () {  
        clearTimeout(timer);	
        jQuery("#" + divName).find("div.slideInfo").animate({height: "1px"}, 500 );      
    		jQuery("#" + divName + " #slide" + counter).fadeOut("#slide" + (counter)); 									 
    	 	counter--;
    		if(counter <= 0){counter=numSlides-1}
    		timer = window.setTimeout(nextSlide,(400));  
    });
	 
    /* Function for when user mouses over the left arrow */
    jQuery("#previousSlide").mouseenter(function () { 
		jQuery("#previousSlide img").animate({opacity: 0.5}, 500);								 
    });    
    
    /* Function for when user mouses out of the left arrow */
    jQuery("#previousSlide").mouseleave(function () { 
		jQuery("#previousSlide img").animate({opacity: 0.1}, 500);	
    });  
	
     /* Function for when user mouses over the right arrow */
    jQuery("#nextSlide").mouseenter(function () { 
		jQuery("#nextSlide img").animate({opacity: 0.5}, 500);								 
    });    
    
    /* Function for when user mouses out of the right arrow */
    jQuery("#nextSlide").mouseleave(function () { 
		jQuery("#nextSlide img").animate({opacity: 0.1}, 500);	
    });  
   
});