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.parentNode;

        MediaShow.mediaShow.appendChild(MediaShow.createControls());

        if (MediaShow.isValid()) {
            MediaShow.mediaShow.appendChild(MediaShow.createThumbnails());
            MediaShow.changeImage(0);
            if (MediaShow.Config.autoPlay && MediaShow.thumbnails.length > 1) MediaShow.Play();
        }

        if (!MediaShow.thumbnails && MediaShow.Video.videoLocation) MediaShow.Video.Toggle();
    },

    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() {
        if (MediaShow.thumbnailsDiv) return document.createTextNode('');
        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() {
        if (MediaShow.controls != null) return document.createTextNode('');
        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 = "2px";
		MediaShow.Video.videoIFrame.style.left = "2px";
	    
		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:"itemDetails",
	affectedDivZoomOutClass:"",
	affectedDivZoomInClass:"zoom",
	thumbnailMaxHeigth:48,
	thumbnailMaxWidth:64,
	changeInterval:5000,
	autoPlay:true,
	imageRatio:1.33333
}

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