/************************************** Includes *************************************/
$.include("js/jquery/jquery.flash.js");
$.include("js/jquery/jquery.jqzoom.js");

/********************************** Global Variables *********************************/
$(document).ready(function() {

    // wires up the click event on the thumbnails
    $(".thumbnails a").click(function() {
        thumbnail_onClick(this);
        return false;
    })

    // Make sure none of the thumnails are selected, then set up the first image.
    $(".thumbnails li").removeClass("selected");
    swapImage($(".thumbnails a:first"));

    $("#inlineVideoC1Cl").click(function() {
		onPlayerFinish();
        return false;
    })

});

var zoomOptions = {
    zoomWidth: 616,
    zoomHeight: 444,
    xOffset: ($.browser.msie ? 18 : 14),
    yOffset: 0,
    position: 'right',
    lens: true,
    title: false,
    zoomType: 'reverse',
    showEffect: 'fadeIn',
    fadeinSpeed: 'slow',
    hideEffect: 'fadeOut',
    fadeoutSpeed: 'slow'
};

/************************************** Functions *************************************/

/****
 * swaps the image and hides/shows the correct bits
 ****/
function swapImage(which) {
    // If dealing with imagges, make sure there's no flash on the page first
    if ($($('div.flash').children()).length > 0)
        removeFlash();

    if ($($('#inlineVideoC1').children()).length > 0)
        removeFlash2();

    // Add the image elements in to the DOM
    addImageElements(which);

    // Wire up the zoom for the image
    $(".jqZoomImg").jqzoom(zoomOptions);

    // Now set the thumbnail image and ensure the zoom option is shown
    $($(which).parent()).addClass("selected");
    $("p.zoom").css("visibility", "visible");
}

/****
 * Adds the image elements onto the page. Basically an anchor tag around an image tag
 ****/
function addImageElements(which) {

    // Remove the old image elements from the DOM
    removeProductImage();

	var thisHref = $(which).attr("href");
	var thisHref2 = thisHref.replace("/i/350x444/", "/");

	if (thisHref2 == thisHref) {
		// not zoomable
    	$("#productImage").append([
            "<img src=\"",
               	thisHref,
           	"\" width=\"350\" height=\"444\" title=\"",
                $(which).attr("title"),
           	"\" alt=\"",
                $(which).attr("title"),
           	"\" />"
    	].join(""));
		$('#zoomLink').hide();
	} else {
    	// Add in the new elements
    	$("#productImage").append([
	        "<a href=\"",
            	thisHref2,
        	"\" class=\"jqZoomImg\" title=\"",
	            $(which).attr("title"),
        	"\">",
	            "<img src=\"",
                	thisHref,
            	"\" width=\"350\" height=\"444\" title=\"",
	                $(which).attr("title"),
            	"\" alt=\"",
	                $(which).attr("title"),
            	"\" />",
        	"</a>"
    	].join(""));
		$('#zoomLink').show();
	}
}

/****
 * Adds the flash video elements onto the page.
 ****/
function addVideoElements(which) {
    removeProductImage();

    if ($($('div.flash').children()).length > 0)
        removeFlash();

    $('div.flash').flash(null, { version: 9 }, function(htmlOptions) {
        htmlOptions.src = "/flash/productsVideo.swf";
        htmlOptions.width = 350;
        htmlOptions.height = 444;
        htmlOptions.flashvars = "flvPath=" + $(which).attr("href");
        this.innerHTML = '<div class="alt">' + this.innerHTML + '</div>';
        $(this).addClass('flash-replaced').prepend($.fn.flash.transform(htmlOptions));
    });

    // Wanna hide the zoom controls, show the flash and select the thumbnail.
    $("p.zoom").css("visibility", "hidden");
    $($(which).parent()).addClass("selected");
    $("div.flash").show();
}

/****
* Remove the flash embed from the page
****/
function removeFlash() {
    $("div.flash").hide().removeClass("flash-replaced");
    $($("div.flash").children()).remove();
}

function startInLineVideo(which) {
    if ($($('#inlineVideoC1').children()).length > 0)
        removeFlash2();

	var version = deconcept.SWFObjectUtil.getPlayerVersion();
	if (version["major"] < 1) {
		alert('You need to have flash installed to play this video');
		$(which).attr("href",'#');
	} else {
    	// Wanna hide the zoom controls, show the flash and select the thumbnail.
    	$("p.zoom").css("visibility", "hidden");
    	$($(which).parent()).addClass("selected");
    	$("#productContent").hide();
    	$("#inlineVideoC1").show();
		$("#inlineVideoC1Close").show();
		videoPlayer('inlineVideoC1',getStamp(),$(which).attr("href"),680,455,'/spacer.gif',true,false,'/tools/xml/agentp.zip');
	}
}

function removeFlash2() {
    $("#inlineVideoC1").hide();
	$("#inlineVideoC1Close").hide();
    $("#productContent").show();
    $($("#inlineVideoC1").children()).remove();
}

function onPlayerFinish(obj) {
	removeFlash2();
    $("#liVideo").removeClass("selected");
    $(".thumbnails li.previous").addClass("selected");
}

/****
 * Removes the product image (and zoom) elements from the page
 ****/
function removeProductImage() {
    $($("#productImage").children()).remove();
}

/*********************************** Event Handlers ***********************************/
/****
 * Handles the thumbnail click event
 ****/
function thumbnail_onClick(which) {
    $(".thumbnails li").removeClass("selected");
    if ($(which).hasClass("videox")) {
        startInLineVideo(which);
    } else if ($(which).hasClass("video")) {
        addVideoElements(which);
    } else {
        // Otherwise just change the main image
    	$(".thumbnails li").removeClass("previous");
	    $($(which).parent()).addClass("previous");
        swapImage(which);
    }
}