/**
 * Slide Show
 * Author: Dusten Smith
 * Date: 2008-07-07
 *
 * CHANGE LOG
 *
 * ID		DATE			DESCRIPTION
 * -------	----------		--------------------------------------------------
 * DS0001	2008-07-09		There is an issue that could have a potential for 
 *							problems from a medical standpoint. If you click the
 *							the next or previous buttons fast enough the image
 *							will create a flicker.
 *							This has been resolved by adding a timer counter and
 *							making sure that the timer is finished before the 
 *							next action is started.
 * DS0002   2008-08-07      Added an option to dynamically add navigation buttons
 *                          Based on the number of Slides
 */

/**
 * Slide Object
 * Description:
 * 	 This object defines the properties of each slide.
 */
function slide(image,url,text){
	this.simage = image;
	this.slink  = url;
	this.stext  = text;
}

/** 
 * Slide Show Functionality
 */
function slideshow(slideshowname)
{
	// Global Variables
	this.currentSlide=0;				// Current Slide in Loop
	this.slides = new Array();			// Slides
	this.totalSlides;					// Total Number of Slides
	this.timerId=null;					// Stores the current timer id.
	this.timerSlide;					// Slide Timer (Time between slides)
	this.timerBlend=null;				// Blend Timer (Time from the start to end of the fade)

	// Below defines the output objects to modify for the slide show.
		this.slideImageObj;				// Image Object
		this.slideDivObj;				// Div Object
		this.slideTextObj;				// Text Object
		this.slideURLObj;				// Url Object
		this.ssName=slideshowname;		// Slide Name

	// Configure Slide Show
	// Function: add_slide(imgpath, url, text)
	// Description: Adds a slide object to the array of slides
	// Params:
	//		imgpath	- is the path to the image that will be used in the slide
	//		url		- is the url to link two if the image is clicked
	//		text	- is the text to appear at the bottom of the page.
	this.add_slide = function(imgpath,url,text){
		// Get total number of slides
		this.totalSlides = this.slides.length;
		// Add new Slide
		this.slides[this.totalSlides] = new slide(imgpath,url,text);
		// Preload Image
		preload = new Image();
		preload.src=imgpath;
	}
	
	// Set time between Slides
	this.set_timer = function(millisec){
		this.timerSlide = millisec;
	}
	
	// Set Slide Image Object
	this.slide_image_object = function(imgobj){
		this.slideImageObj = imgobj;	
	}
	
	// Set Slide Div Object
	this.slide_div_object = function(divobj){
		this.slideDivObj = divobj;	
	}
	
	// Set Slide Text Object
	this.slide_text_object = function(textobj){
		this.slideTextObj = textobj;	
	}

	// Set Slide URL Object
	this.slide_url_object = function(urlobj){
		this.slideURLObj = urlobj;	
	}

  	// Navigation Controls
	// Function: start()
	// Desc: Start Slide Show
	// Params: NONE
	this.start = function(){
		// Stop the current timer if one is running.
		if (this.timerId != null){ this.pause(); }
		// Show First Slide
		setTimeout(this.ssName+".showslide()",0);	
		// Start Timer
		this.timerId = setInterval(this.ssName+".rotateImages()",this.timerSlide);	
	}
	
	// Function: toggle()
	// Desc: Start / Pause Slide Show
	// Params: NONE
	this.toggle = function(){
		if (this.timerId != null){
			// Stop Timer (Pause)
			this.pause();
		}else{
			// Start Timer (Play)
			this.timerId = setInterval(this.ssName+".rotateImages()",this.timerSlide);	
		}
	}
	
	// Function: next()
	// Desc: Next Slide
	// Params: NONE
	this.next = function(){
		// If timer is not stopped stop it.
		if (this.timerId != null){ this.pause(); }
		if (this.timerBlend == 0){ 							// DS0001 - Check to see if a timer is currently in use.
			this.timerBlend = 1;							// DS0001 - Use a timer

			// Loop Back to 1
			if (this.currentSlide < this.totalSlides){
				++this.currentSlide;
			}else{
				this.currentSlide = 0;
			}
			
			// Transition to Next Image

			setTimeout(this.ssName+".showslide()",1000);	// DS0001 - Start Next Slide
		}
	}
	
	// Function: goto()
	// Desc: Goto Slide
	// Params: Slide Number
	this.goto = function(slide){
		// If timer is not stopped stop it.
		if (this.timerId != null){ this.pause(); }
			
			// Loop
			this.currentSlide = slide;
			
			// Transition to Image
			setTimeout(this.ssName+".showslide()",500);	// DS0001 - Start Next Slide
			setTimeout(this.ssName+".toggle()",10000);	
	}
	
	// Function: previous()
	// Desc: Navigate to the Previous Slide
	// Params: NONE
	this.previous = function(){
		// If timer is not stopped stop it.
		if (this.timerId != null){ this.pause(); }

		if (this.timerBlend == 0) { 						// DS0001 - Check to see if a timer is currently in use.
			this.timerBlend = 1;							// DS0001 - Use a timer
			
			// Loop
			if (this.currentSlide <= 0){
				this.currentSlide = this.totalSlides;
			}else{
				--this.currentSlide;
			}
			
			// Transition to Prev Image
			setTimeout(this.ssName+".showslide()",1000);	// DS0001 - Start Next Slide
		}
	}
	
	// Function: pause()
	// Desc: Pause Slide Show
	// Params: NONE
	this.pause = function(){
		clearInterval(this.timerId);	// Stop Timer Id
		this.timerId = null;			// Clear Timer Id
		this.timerBlend = 0;			// Clear Blend Timer ID
	}

  // Private Functions
	// rotateImages()
	// Desc: Rotate Slides Loop
	// Params: NONE
	this.rotateImages = function()
	{
		// Loop
		if (this.currentSlide < this.totalSlides){
			++this.currentSlide;
		}else{
			this.currentSlide = 0;
		}

		this.showslide();
	}
	
	// Function: SlideShow();
	// Desc: Transition to the current slide
	// Params: NONE
	this.showslide = function()
	{
		this.nav("SlideShow_controls");
		// Transition to Next Image
		this.blendimage(this.slideDivObj, this.slideImageObj, this.slides[this.currentSlide].simage,1000);
		// Display Text
		document.getElementById(this.slideTextObj).innerHTML = this.slides[this.currentSlide].stext;
		// Set URL
		document.getElementById(this.slideURLObj).href = this.slides[this.currentSlide].slink;
		this.timerBlend = 0; 								// DS0001 - Close Timer
	}
	
	// Function: changeOpac(opacity, id)
	// Desc: Change the opacity for different browsers
	// Params:
	//		opacity: 	0 - 100
	//		id: 		id of the object to change opacity on.
	this.changeOpac = function(opacity, id) {
		var object = document.getElementById(id).style; 
		object.opacity = (opacity / 100);
		object.MozOpacity = (opacity / 100);
		object.KhtmlOpacity = (opacity / 100);
		object.filter = "alpha(opacity=" + opacity + ")";
	}
	
	// Function: blendimage(divid, imageid, imagefile, millisec)
	// Desc: Blend Image into another Image
	// Params:
	//		divid:		id of the Slideshow DIV
	//		imageid:	image id to blend
	//		imagefile:	name of image to blend to
	// 		millisec:	time it takes to blend image in.
	this.blendimage = function(divid, imageid, imagefile, millisec) {	
		var speed = Math.round(millisec / 100);
		var timer = 0;
		
		//set the current image as background
		document.getElementById(divid).style.backgroundImage = "url(" + document.getElementById(imageid).src + ")"; 
		
		//make image transparent
		this.changeOpac(0, imageid);
		
		//make new image
		document.getElementById(imageid).src = imagefile;
	
		//fade in image
		for(i = 0; i <= 100; i++) {
			setTimeout(this.ssName+".changeOpac(" + i + ",'" + imageid + "')",(timer * speed));
			timer++;
		}
	}
	
	// Function: nav()
	// Description: Builds the slide buttons for the number of slides
	// Params: Object to write the controls to.
	this.nav = function(a)
	{		
		var current;
		// Build HTML for Controls
		var html = "<div><table width=\"100%\"><tr>";
			// Set buttons for each slide
			for (var x=0; x < this.slides.length; ++x)
			{
				var y = x+1;
				// Rotate Buttons depending on which slide your on.
				if (this.currentSlide === x){
					var btn = "<img src=\"themes/default/images/slide_btn_rollover.png\" border=\"0\"/>";
				}else{
					var btn = "<img src=\"themes/default/images/slide_btn.png\" border=\"0\"/>";
				}			
					html += "<td><a href=\"#\" onClick=\"javascript:ss.goto("+x+")\">"+ btn +"</a></td>";
			}
		html += "</tr></table></div>";
		document.getElementById(a).innerHTML = html;	// Output Html
	}
} // End SlideShow Class


/* Rocky Specific */
<!-- Slide Show Code Step 1 -->
var url1 ="http://www.lehighoutfitters.com/Products/detail.aspx?productId=7277&lehighproductId=1600RD4160&heading=Women%27s%20Footwear:%20&Title=Women%27s%20Footwear:";
var url2 ="http://www.lehighoutfitters.com/Products/detail.aspx?productId=5328&lehighproductId=1600RD4111&heading=Women%27s%20Footwear:%20&Title=Women%27s%20Footwear:";
var url3 ="http://www.lehighoutfitters.com/Products/detail.aspx?productId=7278&lehighproductId=1600RD4162&heading=Women%27s%20Footwear:%20&Title=Women%27s%20Footwear:";
    // Initialize Slides
    ss = new slideshow("ss");

    // Setup Slide Show
    ss.set_timer(5000);							// Set Time Limit
    ss.slide_image_object("SlideShow_image");	// Set Image Object
    ss.slide_div_object("SlideShow_div");		// Set Div Object
    ss.slide_text_object("SlideShow_text");		// Set Text Object
    ss.slide_url_object("SlideShow_url");		// Set URL Object
    
    // Add Slides
    ss.add_slide("images/ad1.jpg",url1,"<a href=\""+url1+"\">You better believe it! Our customer service agents work<br/> hard to see that you receive the service you deserve.</a>");
    ss.add_slide("images/ad2.jpg",url2,"Set-up a customized Lehigh website specific to your<br/>Companies needs and purchase boots at custom pricing.");
    ss.add_slide("images/ad3.jpg",url3,"LEHIGH Presents: Work Boots Featuring Innovation<br/>");

<!-- End Step 1 -->