// When the DOM is ready to go
$(document).ready(function()
{
	slideshowInit();
});


/**********************************
Slideshow SETTINGS
**********************************/
// Enter number in miliseconds (i.e. 1000 miliseconds = 1 second)
var adDelayTime = 6000; // Ad Delay Time
var transitionSpd = 500; // The time it take for the image to fade in and then fade out 
// Enter number as decimal percent (i.e. 1 = 100%, .50 = 50%)
var controlOpacityOffHover = .50;
var controlOpacityOnHover = 1;

/**********************************
~END~Slideshow SETTINGS
**********************************/

/**********************************
GLOBAL VARIABLES
**********************************/
var getAllDivs;
var currentDiv = 0;
var slideshowQueue;
var test;
/**********************************
~END~GLOBAL VARIABLES
**********************************/

/**********************************
INIT
**********************************/
//  This function starts after the DOM is ready
function slideshowInit()
{	
	createAds();

	// get all div elements
	getAllDivs = $("#imageGalleryPages div.ad");
	
	// hide all the ad pages
	hideAllDiv();
	
	// show first ad page
	$(getAllDivs[0]).show();
	
	
	
	// setup up events
		//show slideshow controls on slideshow hover
		eventShowControls();
		//set css properties via jquery
		setControlStyle();
	
	// if there is only 1 image in imageList then do not bother animating...
	
	if(imagesList.length <= 1)
	{
		// do not run animation code
		
		// hide arrow controls
		$("#imageGalleryControls").hide();
	}
	else
	{
		slideshowQueue = setInterval("nextImg()",adDelayTime);	
	}
	
	
	
	//slideshowQueue = setInterval("nextImg()",adDelayTime);	
		
	/*	
	var count=0;
	// start slideshow animation
	$("#ad2 img").load(function(){
		count++;
		if(count == 2)
		{
			
			slideshowQueue = setInterval("nextImg()",adDelayTime);
		}
		test = count;
	});
	*/
}
/**********************************
~END~INIT
**********************************/

/**********************************
Slideshow Controls
**********************************/
// This function changes the ad to the next ad
function nextImg()
{
	if(currentDiv == getAllDivs.length-1)
	{
		currentDiv = 0;
	}
	else
	{
		currentDiv++;
	}
	transition();
}
// This function changes the ad to the previous ad
function prevImg()
{
	if(currentDiv == 0)
	{
		currentDiv = getAllDivs.length-1;
	}
	else
	{
		currentDiv--;
	}
	transition();
}
/**********************************
~END~Slideshow Controls
**********************************/

/**********************************
Slideshow Events
**********************************/
function createAds()
{
	for(var i=0; i<imagesList.length; i++)
	{
		var insert = "<div class='ad' id='ad"+i+"'>";
		if(linkList[i].length == 2)
		{
			insert += "<img src='"+imagesList[i]+"' usemap='#imagemap"+i+"'/>";
			insert += createImgMap(i,linkList[i],targetList[i]);
		}
		else
		{
			if(linkList[i] == "#")
			{
				insert += "<a href='javascript:void(0);' style='cursor:default;'>";				
			}
			else
			{
				insert += "<a href='"+linkList[i]+"' target='"+targetList[i]+"'>";
			}
			
			insert += "<img src='"+imagesList[i]+"'/>";
			insert += "</a>";
		}
		insert += "</div>";
		$("#imageGalleryPages").append(insert);
	}
	
}

function createImgMap(name, url, target)
{
	var insert = "";
	switch(url.length)
	{	
		case 2:
		{
			insert += "<map name='imagemap"+name+"'>";
			insert += "<area shape='rect' coords='0,0,302,265' href='"+url[0]+"' target='"+target[0]+"' />";
			insert += "<area shape='rect' coords='303,0,605,265' href='"+url[1]+"' target='"+target[1]+"' />";
			insert += "</map>";
		}break;
		case 3:
		{
		}break;
		default :
		{
			alert("Please create the image map for the image with "+url.length+" hot spots");
		}break;
	}
	return insert;
}

//  This function performs the actually fading in and out of the ads
function transition()
{
	if(!$("#imageGalleryPages div.ad").is(":animated"))
	{
		$(getAllDivs).each(function()
		{
			$(this).fadeOut(transitionSpd);
		});
		$(getAllDivs[currentDiv]).fadeIn(transitionSpd);
	}
}

// This function hides all the divs (ad pages)
function hideAllDiv()
{
	$(getAllDivs).each(function(){
		$(this).hide();
	});
}

// This function sets the hover event to stop animating the slideshow (pause) and to resume the slide show when the user hovers off
function eventShowControls()
{
	$("#imageGallery").hover(function(){
		clearInterval(slideshowQueue);
		
	},
	function()
	{
		slideshowQueue = setInterval("nextImg()",adDelayTime);
	});
	
	
	$("#imageGalleryControls a").hover(function(){
		$(this).fadeTo(1, controlOpacityOnHover);
	},
	function()
	{
		$(this).fadeTo(1, controlOpacityOffHover);
	});
}

// This function sets the css opacity property for the arrow images
function setControlStyle()
{
	$("#imageGalleryControls a").fadeTo(1, controlOpacityOffHover);
}
/**********************************
~END~Slideshow Events
**********************************/