/*Copyright Joseph P. Neathawk Productions 2011 - All Rights Reserved - Joseph Neathawk */
/* slides images horizontally and vertically by shrinking/growing them in place*/

var slider = new function()
{
	var me = this;
	me.name = 'slider';
	me.MasterTitle = false;
	
	//contains the current viewing image number
	me.image1 = 0;
	me.image2 = 0;
	
	me.autoNavigate = true;
	me.slideable = true;
	me.sliding = false;
	me.horizontal = true;
	me.vertical = true;
	
	me.timer = new Date().getTime();
	me.slideInterval = 8 * 1000;
	me.slideTime = .6 * 1000;
	me.FPS = 1000 / 30;
	
	me.originalWidth = 875;
	me.originalHeight = 500;
	
	me.image1Width = me.originalWidth;
	me.image1Height = me.originalHeight;
	
	me.image2Width = 0;	
	me.image2Height = 0;
	
	//contains all image info (thumbnail,image,date,title,desc)
	//if default of false is not changed no other functionality will be written/available
	me.image = new Array(false);
	//contains the thumbnail SRC for preloading
	me.imageSRC = new Array();
	
	//*/navigation
	me.navigation = false;
	me.buttonImageNext = "/_image/imageSliderHVSG/arrowNext.png";
	me.buttonImagePrevious = "/_image/imageSliderHVSG/arrowPrevious.png";
	me.thumbnail = false;
	//number of thumbnails to be shown
	me.thumbnailCountMax = 7;
	me.thumbnailCountMin = 3;
	me.thumbnailCount = me.thumbnailCountMax;
	me.thumbnailLeft = me.image1 - Math.floor(me.thumbnailCount / 2);
	me.thumbnailCenter = Math.ceil(me.thumbnailCount / 2);
	// is 66px overall in css
	me.thumbnailWidth = 56;
	//alignment value
	me.thumbnailStartX = 335;
	//*/icon
	me.icon = true;
	
	me.start = function()
	{				
		if(me.image[0] != false)
		{
			me.preloadImage();				
			
			var output = "\n" + '<div id="' + me.name + 'Wrapper" >';
			//alert('image');
			output += "\n" + '<div id="' + me.name + 'ImageWrapper" >';
			output += "\n" + '<img id="' + me.name + 'Image2" src="" />';
			output += "\n" + '<img id="' + me.name + 'Image1" src="" />';
			output += "\n" + '</div>';
			//alert('overlay');
			output += "\n" + '<div id="' + me.name + 'OverlayImage" ></div>';
			//alert('navigation');
			output += "\n" + '<div id="' + me.name + 'Navigation" >';		
			output += "\n" + '</div>';
			//alert('thumbnail');
			output += "\n" + '<div id="' + me.name + 'ThumbnailWrapper">';
			output += "\n" + '<div id="' + me.name + 'ThumbnailPositioner">';
			output += "\n" + '</div>';		
			output += "\n" + '</div>';
			//alert('icon');
			output += "\n" + '<div id="' + me.name + 'IconWrapper">';
			output += "\n" + '</div>';	
						
			
			if(me.MasterTitle != false)
			{
				output += "\n" + '<div id="' + me.name + 'MasterTitle" >';
				output += "\n" + '<h1>' + me.MasterTitle + '</h1>';
				output += "\n" + '</div>';	
			}
			output += "\n" + '</div><div style="clear:both; height:0px;"></div>';
			document.write(output);
			
			if(me.navigation)
			{
				me.navigationDraw();				
			}
			if(me.thumbnail)
			{
				me.thumbnailDraw();				
			}
			if(me.icon)
			{
				me.iconDraw();				
			}
			me.setImage();		
			
			if(me.autoNavigate)
			{
				me.autoNavigation();
			}
		}
	};
	
	me.preloadImage = function()
	{		
		for(var i = 0; i < me.image.length; i++)
		{
			me.imageSRC[i] = new Image();
			me.imageSRC[i].src = me.image[i][0];
		}	
		me.image2 = me.imageSRC.length - 1;
	};	
	
	me.autoNavigation = function()
	{		
		if(me.autoNavigate)
		{		
			var tempTime = new Date().getTime();
			if(me.timer + me.slideInterval < tempTime)
			{
				me.timer = tempTime;
				me.next();
			}
			
			setTimeout(me.name + '.autoNavigation()',10);
		}
	};
	
	me.slide = function()
	{
		if(me.sliding)
		{	
			var newTime = new Date().getTime() - me.timer;
			if(newTime >= me.slideTime)
			{
				me.sliding = false;
				me.postSlide();
				me.image1Height = me.originalHeight;
				me.image2Height = 0;
				me.image1Width = me.originalWidth;
				me.image2Width = 0;
			}	
			else
			{			
				if(me.vertical)
				{
					var tempHeight = (me.originalHeight * newTime) / me.slideTime;
					me.image1Height = Math.floor(me.originalHeight - tempHeight);
					me.image2Height = Math.floor(tempHeight);
				}				
				if(me.horizontal)
				{					
					var tempWidth = (me.originalWidth * newTime) / me.slideTime;
					me.image1Width = Math.floor(me.originalWidth - tempWidth);
					me.image2Width = Math.floor(tempWidth);
				}
				
				me.image1Height = (me.image1Height > me.originalHeight) ? me.originalHeight : me.image1Height;
				me.image2Height = (me.image2Height > me.originalHeight) ? me.originalHeight : me.image2Height;
				me.image1Width = (me.image1Width > me.originalWidth) ? me.originalWidth : me.image1Width;
				me.image2Width = (me.image2Width > me.originalWidth) ? me.originalWidth : me.image2Width;
			}	
			//wait to do the update because sometimes the image.src change will cause a flash at the end of the slide
			setTimeout(me.name + '.slideUpdate()',5);
			
			setTimeout(me.name + '.slide()',me.FPS);
		}
	};
	
	me.slideUpdate = function()
	{					
		if(document.getElementById(me.name + 'Image1') && document.getElementById(me.name + 'Image2'))
		{
			var picture1 = document.getElementById(me.name + 'Image1');
			var picture2 = document.getElementById(me.name + 'Image2');	
			
			if(me.vertical && me.horizontal)
			{		
				picture1.style.height = me.image1Height + 'px';
				picture1.style.marginTop = (me.originalHeight - me.image1Height) + 'px';
				picture2.style.height = me.image2Height + 'px';
				picture2.style.marginTop = (me.originalHeight - me.image2Height) + 'px';
				
				picture1.style.width = me.image1Width + 'px';
				picture2.style.width = me.image2Width + 'px';				
			}			
			else if(me.vertical)
			{
				picture1.style.height = me.image1Height + 'px';
				picture2.style.height = me.image2Height + 'px';
				
				picture1.style.width = me.originalWidth + 'px';
				picture2.style.width = me.originalWidth + 'px';
			}				
			else if(me.horizontal)
			{					
				picture1.style.height = me.originalHeight + 'px';
				picture2.style.height = me.originalHeight + 'px';
				
				picture1.style.width = me.image1Width + 'px';
				picture2.style.width = me.image2Width + 'px';
			}
		}	
	};
	
	me.next = function()
	{		
		me.jump(me.image1 + 1);	
	};
	
	me.previous = function()
	{
		me.jump(me.image1 - 1);
	};
	
	me.jump = function(number)
	{
		if(me.image1 != (number))
		{
			me.image2 = number;
			if(me.image2 < 0)
			{
				me.image2 = me.imageSRC.length - 1;
			}
			if(me.image2 >= me.imageSRC.length)
			{
				me.image2 = 0;
			}
			if(me.slideable)
			{
				me.timer = new Date().getTime();
				me.sliding = true;
				me.preSlide();
				me.slide();	
			}
			else
			{
				me.setImage();
			}
		}
		else
		{
			me.timer -= me.slideTime;
		}
	};
	
	me.thumbnailJump = function(newImage)
	{
		var newNumber = me.image1 + newImage - me.thumbnailCenter;
		if(newNumber >= me.imageSRC.length)
		{
			newNumber -= me.imageSRC.length;
		}
		else if(newNumber < 0)
		{
			newNumber += me.imageSRC.length;			
		}
		me.jump(newNumber);
	};
	
	me.setImage = function()
	{
		if(document.getElementById(me.name + 'Image1') && document.getElementById(me.name + 'Image2'))
		{
			var picture1 = document.getElementById(me.name + 'Image1');
			picture1.src = me.imageSRC[me.image1].src;
			picture1.title = me.image[me.image1][1];	
			picture1.alt = me.image[me.image1][2];	
			var picture2 = document.getElementById(me.name + 'Image2');
			picture2.src = me.imageSRC[me.image2].src;
			picture2.title = me.image[me.image2][1];	
			picture2.alt = me.image[me.image2][2];	
		}
		//update thumbnails at the end of the slide
		if(me.thumbnail)
		{
			me.thumbnailUpdate();
		}
		else
		{
			me.iconUpdate();
		}
	};
	
	me.preSlide = function()
	{
		if(document.getElementById(me.name + 'Image1') && document.getElementById(me.name + 'Image2'))
		{
			//change the second picture to be the NEW image
			var picture2 = document.getElementById(me.name + 'Image2');
			picture2.src = me.imageSRC[me.image2].src;
			picture2.title = me.image[me.image2][1];	
			picture2.alt = me.image[me.image2][2];
		}
	};
	
	me.postSlide = function()
	{
		if(document.getElementById(me.name + 'Image1') && document.getElementById(me.name + 'Image2'))
		{
			//make both images the same NEW image
			me.image1 = me.image2;
			var picture1 = document.getElementById(me.name + 'Image1');
			picture1.src = me.imageSRC[me.image1].src;
			picture1.title = me.image[me.image1][1];	
			picture1.alt = me.image[me.image1][2];	
		}
		me.iconUpdate();
	};
	
	me.iconUpdate = function()
	{	
		for(var i = 0; i < me.image.length; i++)
		{	
			if(document.getElementById(me.name + 'Icon' + i))
			{
				var icon = document.getElementById(me.name + 'Icon' + i);
				//icon.style.backgroundColor = '#000000';
				//icon.style.borderColor = '#cccccc';
					icon.className = 'icon';	
			}	
		}	
		if(document.getElementById(me.name + 'Icon' + me.image1))
		{
			var icon = document.getElementById(me.name + 'Icon' + me.image1);
			//icon.style.backgroundColor = '#ffffff';
			//icon.style.borderColor = '#666666';
					icon.className = 'chosen';	
		}		
	};
	
	//draws the icons
	me.iconDraw = function()
	{
		if(document.getElementById(me.name + 'IconWrapper'))
		{
			var wrapper = document.getElementById(me.name + 'IconWrapper');
			var output = '';
			output += "\n" + '<ul>' + "\n";
			for(var i = 0; i < me.image.length; i++)
			{			
				output += "\n" + '<li><div id="' + me.name + 'Icon' + i + '" class="icon" onclick="javascript:' + me.name + '.jump(' + i + ');" ></div></li>';						
			}	
			output += "\n" + '</ul>' + "\n";
			wrapper.innerHTML = output;	
			
			me.iconUpdate();
		}
	};
	
	//draws the left/right navigation
	me.navigationDraw = function()
	{
		if(document.getElementById(me.name + 'Navigation'))
		{
			var wrapper = document.getElementById(me.name + 'Navigation');
			var output = '';
			output += "\n" + '<input type="image" id="' + me.name + 'Previous" src="' + me.buttonImagePrevious + '" alt="Previous" onclick="' + me.name + '.previous();" />';
			output += "\n" + '<input type="image" id="' + me.name + 'Next" src="' + me.buttonImageNext + '" alt="Next" onclick="' + me.name + '.next();" />';		
			wrapper.innerHTML = output;	
		}
	};
			
	
	//draws the thumbnails with the proper numbers
	me.thumbnailDraw = function()
	{
		me.thumbnailCountAdjust();
		if(document.getElementById(me.name + 'ThumbnailPositioner'))
		{
			var thmb = document.getElementById(me.name + 'ThumbnailPositioner');
			var output = '';							
			output += "\n" + '<ul id="' + me.name + 'ThumbnailInnerContainer" >';
					
			for(i = 1; i <= me.thumbnailCount; i++)
			{				
				output += "\n" + '<li><img id="' + me.name + 'Thumbnail' + i + '" src="" alt="Thumbnail' + i + '" onclick="' + me.name + '.thumbnailJump(' + i + ');" /></li>';
				
			}		
			output += "\n" + '</ul>' + "\n";
			thmb.innerHTML = output;			
			
			me.thumbnailStartX -= (me.thumbnailCount * me.thumbnailWidth / 2);
			thmb.style.left = me.thumbnailStartX + 'px';
			
			me.thumbnailUpdate();			
		}				
	};
	me.thumbnailCountAdjust = function()
	{
		var workingNumber = me.imageSRC.length;
		if(workingNumber % 2 != 1)
		{
			workingNumber--;
		}
		
		if(workingNumber < me.thumbnailCountMax && workingNumber >= me.thumbnailCountMin)
		{
			me.thumbnailCount = workingNumber;
			me.thumbnailLeft = me.image1 - Math.floor(me.thumbnailCount / 2);
			me.thumbnailCenter = Math.ceil(me.thumbnailCount / 2);
		}		
	};
	
	//makes the proper thumbnail chosen
	//gives the proper SRC to images
	me.thumbnailUpdate = function()
	{
		me.thumbnailLeft = me.image1 - Math.floor(me.thumbnailCount / 2);
		if(document.getElementById(me.name + 'ThumbnailPositioner'))
		{
			var thmb = document.getElementById(me.name + 'ThumbnailPositioner');
			
			for(i = 1; i <= me.thumbnailCount; i++)
			{ 			
				var element = document.getElementById(me.name + 'Thumbnail' + i);
				//me.alertInfo();
				var workingImageNumber = i + me.thumbnailLeft - 1;
				if(workingImageNumber < 0)
				{
					workingImageNumber += me.imageSRC.length;	
				}
				else if(workingImageNumber > me.imageSRC.length - 1)
				{
					workingImageNumber -= me.imageSRC.length;	
				}
				element.src = me.imageSRC[workingImageNumber].src;
				
				
				if(i == me.thumbnailCenter)
				{
					element.className = 'chosen';	
				}
				else
				{
					element.className = '';	
				}
				
			}									
		}	
	};
	
	me.setNewTitle = function(title)
	{
		me.MasterTitle = title;
		if(document.getElementById(me.name + 'MasterTitle'))
		{
			var mtitle = document.getElementById(me.name + 'MasterTitle');
			mtitle.innerHTML = '<h1>' + me.MasterTitle + '</h1>';
		}
	};
	
	me.setNewInterval = function(seconds)
	{
		seconds = Number(seconds);
		if(seconds > 0)
		{
			me.slideInterval = seconds * 1000;
		}
	};
	
	me.setNewSpeed = function(seconds)
	{
		seconds = Number(seconds);
		if(seconds > 0)
		{
			me.slideTime = seconds * 1000;
		}
	};
	
	me.newImage = function(picture,title,desc)
	{
		if(!title)
		{
			var title = 'DragnWing Productions';	
		}
		if(!desc)
		{
			var desc = title;	
		}
		//by default the array is set to false
		if(me.image[0] == false)
		{
			me.image = new Array();	
		}
		me.image[me.image.length] = new Array(picture,title,desc);	
		
	};
}