MediaShow = 
{
	isPlaying:false,
	isZoomed:false,
	thumbnails:null,
	images:null,
	largeImages:null,
	selectedIndex:0,
	mainImage:null,
	mainImageContainer:null,
	mediaShow:null,
	controls:null,
	thumbnailsDiv:null,
	affectedDiv:null,
	intervalId:0,
	
	init:function()
	{
		MediaShow.mediaShow = document.getElementById(MediaShow.Config.mediaShowId);
		MediaShow.mainImage = document.getElementById(MediaShow.Config.mainImageId);
		
		MediaShow.mainImageContainer = (MediaShow.mainImage) ? MediaShow.mainImage.parentNode : null;
		
		if (!MediaShow.isValid()) return false;
				
		MediaShow.mediaShow.appendChild(MediaShow.createControls());
		MediaShow.mediaShow.appendChild(MediaShow.createThumbnails());
		
		MediaShow.changeImage(0);
		
		if (MediaShow.Config.autoPlay && MediaShow.thumbnails.length > 1) MediaShow.Play();
	},
	
	Play:function()
	{
		if (MediaShow.isPlaying) return;
		MediaShow.isPlaying = true;
		MediaShow.intervalId = setInterval(MediaShow.Next, MediaShow.Config.changeInterval);
	},
	
	Stop:function()
	{
		if (!MediaShow.isPlaying) return;
		MediaShow.isPlaying = false;
		clearInterval(MediaShow.intervalId);
	},
	
	Previous:function()
	{
		MediaShow.changeImageSequential(MediaShow.Direction.Backward);
	},
	
	Next:function()
	{
		MediaShow.changeImageSequential(MediaShow.Direction.Forward);
	},
	
	Zoom:function()
	{
        if (!MediaShow.affectedDiv) MediaShow.affectedDiv = document.getElementById(MediaShow.Config.affectedDivId);

		if (MediaShow.isZoomed)
			MediaShow.zoomOut();
		else
			MediaShow.zoomIn();
			
		MediaShow.isZoomed = !MediaShow.isZoomed;
		MediaShow.changeImage(MediaShow.selectedIndex);
	},
	
	changeImageSequential:function(direction)
	{
		var newSelected = MediaShow.selectedIndex + direction;
		if (newSelected >= MediaShow.thumbnails.length) newSelected = 0;
		if (newSelected < 0) newSelected = MediaShow.thumbnails.length - 1;
		
		MediaShow.changeImage(newSelected);
	},
	
	changeImage:function(newSelected)
	{
		var oldThumb = document.getElementById("thumbnail_" + MediaShow.selectedIndex);
		var newThumb = document.getElementById("thumbnail_" + newSelected);
		if (oldThumb && newThumb) 
		{
			oldThumb.className = MediaShow.Config.thumbnailClass;
			newThumb.className = MediaShow.Config.thumbnailSelectedClass;
		}
		
		var img = new Image();
		img.onload = function(){
			img = MediaShow.adjustImageDimensions(img, MediaShow.mainImageContainer.offsetWidth, MediaShow.mainImageContainer.offsetHeight);
			img.style.marginTop = ((MediaShow.mainImageContainer.offsetHeight - img.height) / 2) + "px";
		};
		img.src = (MediaShow.isZoomed) ? MediaShow.largeImages[newSelected] : MediaShow.images[newSelected];;
		img.id = MediaShow.Config.mainImageId;
		
		MediaShow.mainImageContainer.removeChild(MediaShow.mainImage);
		MediaShow.mainImage = img;
		MediaShow.mainImageContainer.appendChild(MediaShow.mainImage);

		MediaShow.selectedIndex = newSelected;
		
		if (MediaShow.Video.active) MediaShow.Video.hide();
	},
	
	adjustImageDimensions:function(newImage, maxWidth, maxHeight)
	{
		var ratio = newImage.width / newImage.height;
		if (ratio < MediaShow.Config.imageRatio)
		{
			//its too high
			newImage.width = (newImage.width / newImage.height) * maxHeight;
			newImage.height = maxHeight;
		}
		else
		{
			//its too wide
			newImage.height = (newImage.height / newImage.width) * maxWidth;
			newImage.width = maxWidth;
		}
		return newImage;
	},
	
	zoomIn:function()
	{
		MediaShow.mediaShow.className = MediaShow.Config.zoomInClass;
		if (MediaShow.affectedDiv) MediaShow.affectedDiv.className = MediaShow.Config.affectedDivZoomInClass;
	},
	
	zoomOut:function()
	{
		MediaShow.mediaShow.className = MediaShow.Config.zoomOutClass;
		if (MediaShow.affectedDiv) MediaShow.affectedDiv.className = MediaShow.Config.affectedDivZoomOutClass;
	},
	
	createThumbnails:function()
	{
		MediaShow.thumbnailsDiv = document.createElement('div');
		MediaShow.thumbnailsDiv.id = MediaShow.Config.thumbnailsDivId;
		
		if (MediaShow.thumbnails.length <= 1) return MediaShow.thumbnailsDiv; 

		for (var i = 0; i < MediaShow.thumbnails.length; i++) 
		{
			MediaShow.thumbnailsDiv.appendChild(MediaShow.createThumbnail(i, MediaShow.thumbnails[i]));
		}
		
		return MediaShow.thumbnailsDiv;
	},
	
	createThumbnail:function(index, imgSrc)
	{
		var img = new Image();
		img.onload = function(){
			img = MediaShow.adjustImageDimensions(img, MediaShow.Config.thumbnailMaxWidth, MediaShow.Config.thumbnailMaxHeigth);
			img.style.marginTop = ((MediaShow.Config.thumbnailMaxHeigth - img.height) / 2) + "px";
		};
		img.src = imgSrc;

		var container = document.createElement('div');
		container.id = "thumbnail_" + index;
		container.className = (index == 0) ? MediaShow.Config.thumbnailSelectedClass : MediaShow.Config.thumbnailClass;

		container.appendChild(img);
		container.onclick = function(){
			MediaShow.Stop();
			MediaShow.changeImage(index);
			return false;
		}
		return container;
	},
	
	createControls:function()
	{
		MediaShow.controls = document.createElement('div');
		MediaShow.controls.id = MediaShow.Config.controlsId;
		
		if (MediaShow.thumbnails && MediaShow.thumbnails.length > 1) 
		{
			MediaShow.controls.appendChild(MediaShow.createLinkButton("prevButton", "Previous", function(){
				MediaShow.Stop();
				MediaShow.Previous();
				return false;
			}));
			MediaShow.controls.appendChild(MediaShow.createTextNode("", "hide", ", "));
			MediaShow.controls.appendChild(MediaShow.createLinkButton("stopButton", "Stop", function(){
				MediaShow.Stop();
				return false;
			}));
			MediaShow.controls.appendChild(MediaShow.createTextNode("", "hide", ", "));
			MediaShow.controls.appendChild(MediaShow.createLinkButton("playButton", "Play", function(){
				MediaShow.Play();
				return false;
			}));
			MediaShow.controls.appendChild(MediaShow.createTextNode("", "hide", ", "));
			MediaShow.controls.appendChild(MediaShow.createLinkButton("nextButton", "Next", function(){
				MediaShow.Stop();
				MediaShow.Next();
				return false;
			}));
			MediaShow.controls.appendChild(MediaShow.createTextNode("", "hide", ", "));
		}
		if (MediaShow.Video.videoLocation) 
		{
			MediaShow.controls.appendChild(MediaShow.createLinkButton("videoButton", "Play Video", function(){
				MediaShow.Video.Toggle();
				return false;
			}));
			MediaShow.controls.appendChild(MediaShow.createTextNode("", "hide", ", "));
		}
		MediaShow.controls.appendChild(MediaShow.createLinkButton("zoomButton", "Zoom", function(){
				MediaShow.Zoom();
				return false;
			}));
		
		return MediaShow.controls;
	},
	
	createLinkButton:function(id, text, delegate)
	{
		var button = document.createElement('a');
		button.href = "#";
		button.id = id;
		button.appendChild(document.createTextNode(text));
		button.onclick = delegate;
		return button;
	},
	
	createTextNode:function(id, cssClass, text)
	{
		var node = document.createElement('span');
		node.id = id;
		node.className = cssClass;
		node.appendChild(document.createTextNode(text));
		return node;
	},
	
	isValid:function()
	{
		if (!MediaShow.mediaShow || !MediaShow.mainImage || !MediaShow.mainImageContainer) return false;
		if (!MediaShow.thumbnails || !MediaShow.images || !MediaShow.largeImages) return false;
		if (!(MediaShow.thumbnails.length == MediaShow.images.length && MediaShow.images.length == MediaShow.largeImages.length)) return false;
		return true;
	}
}

MediaShow.Video = 
{
	videoIFrame:null,
	active:false,
	videoLocation:null,

	Toggle:function()
	{
		if (!MediaShow.Video.active)
		  MediaShow.Video.show();
		else
		  MediaShow.Video.hide();
	},

	show:function()
	{
		if (MediaShow.isZoomed) MediaShow.Zoom();
	    
		if (!MediaShow.Video.videoIFrame)
		  MediaShow.Video.init();
	    
		MediaShow.Video.videoIFrame.style.display = "block";
		MediaShow.Video.active = true;
		MediaShow.Stop();
	},

	hide:function()
	{
		if (!MediaShow.Video.videoIFrame || !MediaShow.mediaShow)
		  return;
	    
		MediaShow.mediaShow.removeChild(MediaShow.Video.videoIFrame);
		MediaShow.Video.videoIFrame = null;
		MediaShow.Video.active = false;
	},

	init:function()
	{
		if (!MediaShow.mediaShow || !MediaShow.Video.videoLocation) return; 
	    
		MediaShow.Video.videoIFrame = document.createElement('iframe');
	    
		MediaShow.Video.videoIFrame.id = "msVideo";
		MediaShow.Video.videoIFrame.src = MediaShow.Video.videoLocation;
		MediaShow.Video.videoIFrame.scrolling = "no"; 
		MediaShow.Video.videoIFrame.style.border="none";
		MediaShow.Video.videoIFrame.frameBorder=0;

		MediaShow.Video.videoIFrame.style.width = "336px";
		MediaShow.Video.videoIFrame.style.height = "300px";

		MediaShow.Video.videoIFrame.style.position = "absolute";
		MediaShow.Video.videoIFrame.style.top = "4px";
		MediaShow.Video.videoIFrame.style.left = "4px";
	    
		MediaShow.mediaShow.appendChild(MediaShow.Video.videoIFrame);
	}
}

MediaShow.Config = 
{
	mediaShowId:"mediaShow",
	mainImageId:"mainImage",
	controlsId:"controls",
	thumbnailsDivId:"thumbnails",
	zoomInClass:"zoomIn",
	zoomOutClass:"zoomOut",
	thumbnailClass:"thumbnail",
	thumbnailSelectedClass:"selected",
	affectedDivId:"contactSeller",
	affectedDivZoomOutClass:"ve",
	affectedDivZoomInClass:"ho",
	thumbnailMaxHeigth:48,
	thumbnailMaxWidth:64,
	changeInterval:5000,
	autoPlay:true,
	imageRatio:1.33333
}

MediaShow.Direction = 
{
	Forward:1,
	Backward:-1	
}