/************************************** Splendid *************************************
* Created By:		Steve Doggett
* Creation Date:	22nd July 2009
* Edited ----------------------------------------------------------------------------
*      By:              On:
* Description -----------------------------------------------------------------------
*      This file handles the image swapping functionality on the product details page
*      Uses JQuery.
*      Example:
*           14-product-detail.html
*
* Functions -------------------------------------------------------------------------
*       swapImage()             // swaps the image and hides/shows the correct bits
*       addImageElements()      // Adds the image elements onto the page. Basically an anchor tag around an image tag
*       addVideoElements()      // Adds the flash video elements onto the page.
*       removeFlash()           // Remove the flash embed from the page
*       removeProductImage()    // Removes the product image (and zoom) elements from the page
*
* Event Handlers --------------------------------------------------------------------
*       thumbnail_onClick()     // Handles the thumbnail click event
*
**************************************************************************************/

/************************************** 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"));
});

var zoomOptions = {
    zoomWidth: 325,
    zoomHeight: 415,
    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();

    // 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/325x415/", "/");

	if (thisHref2 == thisHref) {
		// not zoomable
    	$("#productImage").append([
            "<img src=\"",
               	thisHref,
           	"\" width=\"325\" height=\"415\" 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=\"325\" height=\"415\" 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 = 325;
        htmlOptions.height = 415;
        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();
}

/****
 * 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("video")) {
        addVideoElements(which);
    } else {
        // Otherwise just change the main image
        swapImage(which);
    }
}