var reflectOptions = { height: /*"50px"*/0.3, opacity: 0.5 };
var fadevar = 300;

var colourArr = [];
var imageArr = [];
var altArr = [];
var selectedColour = "";
var mainImageLoaded = false;
var carouselTransparencyApplied = false;

var resize = ".ashx?w=290&mh=230"; //h=260, mh = max height
var IE6resize = ".ashx?w=290&h=230";
var resizeBig = ".ashx?h=500&w=500";
var resizeSmall = ".ashx?h=30&w=40";
var resizeCarousel = ".ashx?w=640&h=480";
var activeImage; //jquery object
var activeColour;

var path = "";
var item = "";

$j(document).ready(
	function() {
	    initProductPage();
	    $j('.selectedProductText').bind('click', function(e) {

	        var tabWidth = $j(this).outerWidth();
	        if (!$j(this).get(0).tabSet) {
	            if (window.XMLHttpRequest) {
	                // Note, IE 6 7 and 8 all render this in completely different ways. only 8 does it in a standards compliant fashion, 6 is addressed below, 7 is addressed by a CSS addressing underlineStatusSelection
	                $j(this).parent().append('<div  id="underlineStatusSelection" style="width: ' + tabWidth + 'px;">\n' +
																	     '  <div style="margin-top:-24px;position: absolute; bottom: 0px; height: 4px; width: ' + tabWidth + 'px;">\n' +
																	     '    <div style="margin: 0 4px; background-color: #cc0000;"></div>\n' +
																	     '    <div style="margin: 0 2px; background-color: #cc0000;"></div>\n' +
																	     '    <div style="margin: 0 1px; background-color: #cc0000;"></div>\n' +
																	     '    <div style="margin: 0; background-color: #cc0000;"></div>\n' +
																	     '  </div>\n' +
																	     '</div>');
	            } else {
	                // IE 6 sucks

	                $j(this).parent().append('<div style="left: -' + (tabWidth / 2) + ';height: 35px;  position: relative; width: ' + tabWidth + 'px;">\n' +
																	     '  <div style="margin-top:-24px;position: absolute; bottom: 0px; height: 4px; width: ' + tabWidth + 'px; font-size:0px;">\n' +
																	     '    <div style="margin: 0 4px; background-color: #cc0000; font-size:0px;"></div>\n' +
																	     '    <div style="margin: 0 2px; background-color: #cc0000; font-size:0px;"></div>\n' +
																	     '    <div style="margin: 0 1px; background-color: #cc0000; font-size:0px; "></div>\n' +
																	     '    <div style="margin: 0; background-color: #cc0000; font-size:0px;"></div>\n' +
																	     '  </div>\n' +
																	     '</div>');
	            }
	            $j(this).get(0).tabSet = true;
	        }

	        $j('.selectedProductText').parent().removeClass('active');
	        $j(this).parent().addClass('active');
	        //$j('.selectedProductText').parent().css('background-color', 'rgb(237, 237, 237)');


	    }); /*.append('<div style="margin: 0 2px; bottom: 3px"></div>\n' +
				 '<div style="margin: 0 1px; bottom: 2px;"></div>\n' + 
				 '<div style="margin: 0 0px; bottom: 1px;"></div>\n' + 
				 '<div style="margin: 0 0px; bottom: 0px;"></div>');*/
	    // Activate first feature tab
	    // $j('#aProdFeatures2').click();
	    if ($j.browser.msie) {
	        $j('#hiddenImageLoader').hide();
	        setTimeout(function() {
	            $j('#productCarousel img').each(function() {
	                IEPNGFix.fix(this, $j(this).attr('src'), 2);
	            });
	        }, 1000);

	    }
	}

);
function imgpng() {

}
// Carousel tab highlighter



function initProductPage() {
    //initMenu('active');
    //$j('#productImageContainer').hide();
    // Activate product
    $j('li.active').parent().slideDown('fast')
    $j('li.active').parent().parent().addClass('active')
    //initMiniCarousel();
    initMaxiCarousel();
}

function initMenu(showClass) {
    //showClass is the classname used to style the active menu (and initially show that menu)
    $j('ul.accordian ul').hide();
    $j.each($j('ul.accordian'), function() {
        $j('ul.accordian li.' + showClass + ' ul').show();
    });
    $j('ul.accordian li a').click(
		function() {
		    var checkElement = $j(this).next();
		    var parent = this.parentNode.parentNode.id;

		    if ($j('#' + parent).hasClass('noaccordion')) {
		        $j(this).next().slideToggle('fast');
		        return false;
		    }
		    if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
		        if ($j('#' + parent).hasClass('collapsible')) {
		            $j('#' + parent + ' ul:visible').slideUp('fast');
		        }
		        return false;
		    }
		    if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
		        $j('#' + parent + ' ul:visible').slideUp('fast');
		        $j('#' + parent + ' ul').parent().removeClass('active');
		        checkElement.slideDown('fast');
		        checkElement.parent().addClass('active');
		        return false;
		    }
		}
	);
}

function initFlowPlayer(video) {

    //    $j("#productDetailDisplay").append("<div id=\"demoVideoPlayer\"");
    //    $j("#demoVideoPlayer").css('visibility', 'hidden');
   // $j("#productDetailDisplay").ready(function() {
        loadProductVideoPlayer(video);
        //$j("#demoVideoPlayer").css('display','none');
   // });
    //$j("#at15s").css('z-index', 1);
}

var videoWidth = '742';
var videoHeight = '418';

function loadProductVideoPlayer(video) {
    
    //var video = '';
    $j('#demoVideoPlayer').attr("style", "width: " + videoWidth + "px; height: " + videoHeight + "px;");

    flowplayer("demoVideoPlayer",
        {
            src: "/flash/flowplayer.unlimited-3.2.5.swf",
            wmode: 'opaque'

        },
        {
            key: '8cf214aece5e4a35738',
            clip: {
                url: video,
                provider: 'cf',
                autoPlay: false
            },
            onLoad: function() {   },
            // onUnload: function() { videoUnload(); },
            plugins: {
                cf: {
                    url: 'flowplayer.rtmp-3.2.3.swf',
                    netConnectionUrl: 'rtmp://s3r9fko5sdo9ig.cloudfront.net/cfx/st'
                },
                controls: {
                    "borderRadius": "0px",
                    "timeColor": "rgba(0, 0, 0, 1)",
                    "bufferGradient": [0, 0.2, 0.4],
                    "slowForward": true,
                    "backgroundColor": "rgba(99, 99, 99, 0.7)",
                    "volumeSliderGradient": [0, 0.2, 0.4],
                    "slowBackward": false,
                    "timeBorderRadius": 20,
                    "time": true,
                    "progressGradient": [0, 0.2, 0.4],
                    "height": 26,
                    "volumeColor": "rgba(153, 153, 153, 1)",
                    "tooltips": {
                        "marginBottom": 5,
                        "volume": true,
                        "scrubber": true,
                        "buttons": false
                    },
                    "opacity": 1,
                    "fastBackward": false,
                    "timeFontSize": 12,
                    "bufferColor": "rgba(41, 41, 41, 1)",
                    "border": "0px",
                    "volumeSliderColor": "rgba(41, 41, 41, 1)",
                    "buttonColor": "#ffffff",
                    "mute": true,
                    "autoHide": {
                        "enabled": true,
                        "hideDelay": 500,
                        "mouseOutDelay": 500,
                        "hideStyle": "move",
                        "hideDuration": 400,
                        "fullscreenOnly": false
                    },
                    "backgroundGradient": [0.5, 0.2, 0],
                    "width": "100pct",
                    "display": "block",
                    "sliderBorder": "1px solid rgba(128, 128, 128, 0.7)",
                    "buttonOverColor": "rgba(204, 0, 0, 1)",
                    "fullscreen": true,
                    "timeBgColor": "rgba(214, 207, 214, 1)",
                    "scrubberBarHeightRatio": 0.2,
                    "bottom": 0,
                    "stop": false,
                    "zIndex": 1,
                    "sliderColor": "#000000",
                    "scrubberHeightRatio": 0.6,
                    "tooltipTextColor": "#ffffff",
                    "sliderGradient": "none",
                    "spacing": {
                        "time": 6,
                        "volume": 8,
                        "all": 2
                    },
                    "timeBgHeightRatio": 0.8,
                    "volumeSliderHeightRatio": 0.6,
                    "name": "controls",
                    "timeSeparator": " ",
                    "volumeBarHeightRatio": 0.2,
                    "left": "50pct",
                    "tooltipColor": "rgba(0, 0, 0, 0)",
                    "playlist": false,
                    "durationColor": "rgba(81, 81, 82, 1)",
                    "play": true,
                    "fastForward": true,
                    "progressColor": "rgba(153, 153, 153, 1)",
                    "timeBorder": "0px solid rgba(0, 0, 0, 0.3)",
                    "volume": true,
                    "scrubber": true,
                    "volumeBorder": "1px solid rgba(128, 128, 128, 0.7)",
                    "builtIn": false,
                    "margins": [2, 6, 2, 12],
                    "z-index": -99
                }
            }
        });
        hideDemo();
    //hideDemo();
}
var playTimeout = false;
function showobject(name, url, fade, nocache) {
    // try to get from the cache
    //alert(url);

    //        //setTimeout("showobject('" + name + "','" + url + "','" + fade + "');", 2000);
    //    }
    var _name = 'div.' + name.substring(1) + '_cache';
    var cacheContent = $j(_name + '[rel="' + url + '"]').hide();
    var currentContent = $j(_name, name);
    // internal function to handle the display
    var internalFunc = function(name, cacheContent, currentContent, fade) {
        if (fade) {
            if (currentContent.length == 1) {
                currentContent.fadeOut(fadevar, function() {
                    // move the current content to the end and hide it.
                    $j('body').append(currentContent);
                    // show the cache one
                    $j(name).append(cacheContent);
                    cacheContent.fadeIn(fadevar);
                });
            } else {
                // move the current content to the end and hide it.
                $j(name).append(cacheContent);
                // show the cache one
                cacheContent.fadeIn(fadevar);
            }
        } else {
            // move the current content to the end and hide it.
            $j('body').append(currentContent.hide());
            // show the cache one
            $j(name).append(cacheContent.show());
        }
        replaceFontsAgain();
    }
    // if no cache is found
    if ((cacheContent.length == 0) || (nocache==true) ){
        $j.ajax({
            type: "GET",
            url: url,
            async: false,
            success: function(html) {
                // construct the cacheContent
                var html = $j(html);
                $j("input[name='__VIEWSTATE']", html).remove()
                cacheContent = $j('<div class="' + name.substring(1) + '_cache" rel="' + url + '">' + $j(html).html() + '</div>').hide();
                //alert(cacheContent.attr('class'));
                internalFunc(name, cacheContent, currentContent, fade);
            }
        });
    } else internalFunc(name, cacheContent, currentContent, fade);
    /*if (fade) {
    $j.ajax({
    type: "GET",
    url: url,
    success: function(html) {
    $j(name).fadeOut(fadevar, function() {
    $j(name).html(html);
    replaceFontsAgain();
    $j(name).fadeIn(fadevar);
    });
    }
    });
    } else {
    $j.ajax({
    type: "GET",
    url: url,
    success: function(html) {
    $j(name).html(html);
    replaceFontsAgain();
    }
    });
    }*/

    return false;
}
var IsLoading = false;
var VideoLoaded = false;

function videoInit() {
    IsLoading = true;
}

function videoStarting() {
    //$f("demoVideoPlayer").play();
    IsLoading = false;
}

function showDemo() {
    $j("#demoVideoContainer").show();
    if (typeof $f != 'undefined') {
        if ($f("demoVideoPlayer")) {
            //$j('#demoVideoPlayer').attr("style", "position: relative; width: " + videoWidth + "px; height: " + videoHeight + "px;");

            //alert("SHOW");

            $f("demoVideoPlayer").play();

            //        videoInit();
            //        //$j("#demoVideoPlayer").fadeIn('slow', function() {
            //        //  
            //        $j("#demoVideoContainer").css('display', 'block');
            //        if (!playTimeout) {
            //            playTimeout = true;
            //            alert(playTimeout);
            //            //$f("demoVideoPlayer").play();
            //            playVideo();
            //        }
            // });
        }
    }
}

function playVideo() {
    if (!$f("demoVideoPlayer").isLoaded()) {
        setTimeout('playVideo()', 2000);
    }
    if ($f("demoVideoPlayer").getState() != 3) {
        playTimeout = false;
        $f("demoVideoPlayer").play();
    }
}


function hideDemo() {
    // $j("#demoVideoPlayer").fadeOut('slow', function() {
    //alert("HIDE");
    //$j('#demoVideoPlayer').attr("style", "position: absolute; width: " + videoWidth + "px; height: " + videoHeight + "px;");
    $j("#demoVideoContainer").hide();
    if (typeof $f != 'undefined')
    {
    if ($f("demoVideoPlayer")) {
        $f("demoVideoPlayer").pause();
        
    }
    }
    //$j("#demoVideoContainer").css('display', 'none');
    // });
}


function preloadImgs(colour, extension) {
    var preloadImgArr = imageArr[colour];
    if (preloadImgArr && preloadImgArr.length) {
        for (var c = 0; c < preloadImgArr.length; c++) {
            var select = path + colour + '/' + name + extension;
            $j.preloadImages(select);
        }
    }
}

function setColour(colour, tgt) {
    // Reset carousel margin-left
    $j('#imagesControl').css('margin-left', 0);
    //'tgt' can be replaced by 'this' when we do proper event binding
    preloadImgs(colour, resize);
    //preloadImages(colour, resizeBig);
    preloadImgs(colour, resizeSmall);

    selectedColour = colour;
    var cr = '';
    var arr = imageArr[colour];
    var aarr = altArr[colour];
    if (arr && arr.length) {
        // Empty out previous pagination
        $j('#pageSelect').empty();
        $j('#carousel_ul').empty();

        for (var i = 0; i < arr.length; i++) {
            if (arr[i] != null) {
                cr = cr + "<div class=\"thumbnail\" id=\"" + i + "\"><a href='javascript:;' onclick='setImage(\"" + arr[i] + "\", \"" + aarr[i] + "\",this)'><img src='" + path + selectedColour + '/' + arr[i] + resizeSmall + "' class='pngfix' width='40' height='30' alt='" + aarr[i] + "' /></a></div>";
                // attach pagination controls to carousel div pageSelect
                $j('<span class="switchToImage" val=""></span>').appendTo('#pageSelect');
                var carouselLi = "<li><img src='" + path + selectedColour + '/' + arr[i] + resizeCarousel + "' class='pngfix' width='640' height='480' alt='" + aarr[i] + "' /></li>";
                $j(carouselLi).appendTo('#carousel_ul');
            }
        }
        $j('#imagesControl').html(cr);
        setImage(imageArr[selectedColour][0], altArr[selectedColour][0]);
        $j('#imagesControl .thumbnail').removeClass("active");
        $j('#imagesControl .thumbnail:first').addClass("active");
    }

    //set selected color class to active
    $j('#colourControl .swatch').removeClass('active');
    $j(tgt).parent().addClass('active');
    initMiniCarousel();
    // If no image to set, give a placeholder
    if (!$j('#productImageContainer').attr('src').length > 0) {
        $j('#productImageContainer').attr('src', '/images/noproductimage.png');
        if (!window.XMLHttpRequest) {
            $j('#productImageContainer').ready(function() {
                $j('#productImageContainer').replaceWith('<img class="pngfix" alt="" src="/images/noproductimage.png" id="productImageContainer" style="margin-top: 52px;"/>');
            });
        }
        $j('#productImageContainer').attr('alt', 'no product image');
        $j('#productImageContainer').css('margin-top', '52px');
    }

    //Omniture track this event
    //var s = s_gi(s_account); 
    //s.linkTrackVars = 'events,eVar13,products';
    //s.linkTrackEvents = 'event14';
    if (tgt) {
        s.events = 'event14';
        s.eVar13 = 'Colour Selector';
        if (itemDisplayName)
            s.products = ";" + itemDisplayName;
        else
            s.products = "unknown";
        void (s.t());
    }

    return false;

}
function fixIeImage() {
    if ($j('#productImageContainer').width() > 100 && !mainImageLoaded) {
        mainImageLoaded = true;
        $j('#productImageContainer').each(function() { IEPNGFix.fix(this, $j('#productImageContainer').attr('src'), 2) });
    }
}

function setImage(name, alt, tgt) {
    mainImageLoaded = false;

    var select = path + selectedColour + '/' + name;
    // No reflections for IE6
    if (window.XMLHttpRequest) {
        $j('#productImageContainer').unreflect()
        // wait for the attr to be well and truly right before trying to reflect again
        // and be sure to remove the previous reflection
        // EXPERIMENTAL: reflect on image load, instead of timeout - causing stack overflow in IE6?
        $j('#productImageContainer').load(function() {
            $j(this).reflect(reflectOptions);
        });
        //setTimeout("$j('#productImageContainer').reflect(reflectOptions)", 100)
    } else {
        // But we do want transparencies
        setInterval(fixIeImage, 10);
        /*$j('#productImageContainer').load(function() {
        if ($j('#productImageContainer').complete) setTimeout("$j('#productImageContainer').each(function() { IEPNGFix.fix(this, $j('#productImageContainer').attr('src'), 2)})", 10);
        });*/
        //setTimeout("$j('#productImageContainer').each(function() { IEPNGFix.fix(this, $j(this).attr('src'), 2)})",250);
    }
    if (window.XMLHttpRequest) {
        $j('#productImageContainer').attr("src", select + resize);
    } else {
        // IE6 unable to handle dynamic image resizing by itself.
        // width is already set on the tag, also set fixed height for IE6 (height is fixed
        $j('#productImageContainer').attr("src", select + IE6resize).height(230);
    }
    //	alert(select + "" + resize);
    //	$j('#productImageContainer').ready(function() {
    //		$j('#productImageContainer').replaceWith('<img alt="" src="' + select + resize + '" id="productImageContainer" style="border: 0px none ; display: block;"/>');
    //		initMaxiCarousel();
    //	});
    //}
    $j('#productImageContainer').attr("alt", alt);

    //$j('#productImageLinkContainer').attr("href", select+resizeBig);
    $j("#imagesControl .thumbnail").removeClass("active");
    $j(tgt).parent().addClass("active");
    var imageOnCarousel = $j(tgt).parent().attr("id")
    if (imageOnCarousel) {
        // Width of item in carousel + margin
        var itemWidth = 640
        $j('#carousel_ul').css('left', "-" + (itemWidth * imageOnCarousel) + "px")
    }

    return false;
}
function initMiniCarousel() {
    // Mini carousel

    var visibleItems = 4;
    var overflowedImages = $j('#imagesControl div').size() - (visibleItems);

    if ($j('#imagesControl > div').size() < 2) {
        $j('#imagesControl > div').hide();
    }

    if (overflowedImages < 0) {
        $j('#moveLeft').hide();
        $j('#moveRight').hide();
    }
    else {
        $j('#moveLeft').fadeIn(200);
        $j('#moveRight').fadeIn(200);
    }

    if ($j.browser.msie && $j.browser.version.substr(0, 1) < 9) {
        $j('#moveLeft').bind('click', function(e) {
            var itemWidth = 60;
            var currentMargin = parseInt($j('#imagesControl').css('margin-left'));
            var overflowedImages = $j('#imagesControl div').size() - visibleItems;
            if (currentMargin < 0) $j('#imagesControl').css('margin-left', currentMargin + itemWidth);

        });
        $j('#moveRight').bind('click', function(e) {
            var itemWidth = 60;
            var totalWidth = 480;
            var currentMargin = parseInt($j('#imagesControl').css('margin-left'));
            var overflowedImages = $j('#imagesControl div').size() - visibleItems;
            var maths = ((overflowedImages * itemWidth) * -1);

            var overcheck = (overflowedImages - 6) * 60;
            if ($j.browser.msie && $j.browser.version.substr(0, 1) > 6) {
                overcheck = -overcheck;
            }
            if (currentMargin > maths && currentMargin > -overcheck) {
                $j('#imagesControl').css('margin-left', currentMargin - itemWidth);
            }
        });
    } else {
        $j('#moveLeft').bind('click', function(e) {

            var itemWidth = $j('#imagesControl div').outerWidth()
            var totalWidth = $j('#imagesControl div').outerWidth() * $j('#imagesControl div').size()
            var currentMargin = parseInt($j('#imagesControl').css('margin-left'));
            var overflowedImages = $j('#imagesControl div').size() - visibleItems;
            if (currentMargin < 0) $j('#imagesControl').css('margin-left', currentMargin + itemWidth);
        });
        $j('#moveRight').bind('click', function(e) {
            var itemWidth = $j('#imagesControl div').outerWidth()
            var totalWidth = $j('#imagesControl div').outerWidth() * $j('#imagesControl div').size()
            var currentMargin = parseInt($j('#imagesControl').css('margin-left'));
            var overflowedImages = $j('#imagesControl div').size() - visibleItems;
            if (currentMargin > ((overflowedImages * itemWidth) * -1)) {
                $j('#imagesControl').css('margin-left', currentMargin - itemWidth);
            }

        });

    }


}



function closeMaxiCarousel(openPosition) {
    $j('#carousel_container').fadeOut(500, function() {
        $j('#carousel_ul').css('left', openPosition);
    });
    $j('#fullBackdrop').fadeOut(500);
    $j(document).unbind("keydown");
}

function maxiCarouselRight() {
    //get the width of the items ( i like making the jquery part dynamic, so if you change the width in the css you won't have o change it here too ) '
    var item_width = $j('#carousel_ul li').outerWidth();
    //calculate the new left indent of the unordered list
    var left_indent = parseInt($j('#carousel_ul').css('left')) - item_width;

    //make the sliding effect using jquery's anumate function '
    if (left_indent > totalWidth && (parseInt($j('#carousel_ul').css('left')) % item_width) == 0) $j('#carousel_ul').animate({ 'left': left_indent }, { queue: false, duration: 500 }, function() {
        //get the first list item and put it after the last list item (that's how the infinite effects is made) '
        $j('#carousel_ul li:last').after($j('#carousel_ul li:first'));

        //and get the left indent to the default -210px
        $j('#carousel_ul').css({ 'left': '-210px' });
    });
}

function maxiCarouselLeft() {

    var item_width = $j('#carousel_ul li').outerWidth();

    /* same as for sliding right except that it's current left indent + the item width (for the sliding right it's - item_width) */
    var left_indent = parseInt($j('#carousel_ul').css('left')) + item_width;
    if (left_indent <= 0 && (parseInt($j('#carousel_ul').css('left')) % item_width) == 0) $j('#carousel_ul').animate({ 'left': left_indent }, { queue: false, duration: 500 }, function() {
        /* when sliding to left we are moving the last item before the first item */
        $j('#carousel_ul li:first').before($j('#carousel_ul li:last'));

        /* and again, when we make that change we are setting the left indent of our unordered list to the default -210px */
        $j('#carousel_ul').css({ 'left': '-210px' });
    });
}

function initMaxiCarousel() {
    $j('#productImageContainer').unbind().click(function() {
        var openPosition = $j('#carousel_ul').css('left');
        // When we first go into the carousel, record the x axis position so it can be reset on close
        $j('#closeCarousel').unbind().click(function() {
            closeMaxiCarousel(openPosition);
        });

        $j(document).keydown(function(e) {
            switch (e.which) {
                case 27:
                    closeMaxiCarousel();
                    break;
                case 37:
                    maxiCarouselLeft();
                    break;
                case 39:
                    maxiCarouselRight();
            }
        });

        $j('#carousel_container').fadeIn(500);
        $j('#fullBackdrop').toggle();
        $j('#fullBackdrop').fadeTo(500, 0.7);
        // Only for Non IE6 (reflections)
        if (window.XMLHttpRequest) {

            // We just spawned a carousel, reflect the images.
            $j('#carousel_ul li img').each(function() {
                $j(this).reflect(reflectOptions)
            });
        } else {
            // Only for IE6 (transparency hack)
            $j('#carousel_ul li img').each(function() {
                if (!carouselTransparencyApplied) {
                    IEPNGFix.fix(this, $j(this).attr('src'), 2);
                }
            });
            carouselTransparencyApplied = true;

        }
        // Get the width of the carousel based on the amount of items in the system, make it negative for comparison purposes.
        totalWidth = ($j('#carousel_ul li').size() * $j('#carousel_ul li').outerWidth() * -1);

        //move the last list item before the first item. The purpose of this is if the user clicks previous he will be able to see the last item.
        //$j('#carousel_ul li:first').before($j('#carousel_ul li:last'));
        //when user clicks the image for sliding right

        $j('#right_scroll').click(function() {
            maxiCarouselRight();
        });

        //when user clicks the image for sliding left
        $j('#left_scroll').click(function() {
            maxiCarouselLeft();
        });

        // Setup direct pagination

        $j('.switchToImage').each(function(i) {
            $j(this).html((i + 1));
            $j(this).attr('val', i);
            $j(this).bind("click", function() {
                var itemWidth = 640;
                $j('#carousel_ul').animate({ 'left': "-" + (itemWidth * i) + "px" }, { queue: false, duration: 500 }, function() {
                    /* when sliding to left we are moving the last item before the first item */
                    $j('#carousel_ul li:first').before($j('#carousel_ul li:last'));

                    /* and again, when we make that change we are setting the left indent of our unordered list to the default -210px */
                    $j('#carousel_ul').css({ 'left': '-210px' });
                });
            });
        });

        //Omniture track this event
        //var s = s_gi(s_account); 
        //s.linkTrackVars = 'events,eVar13,products';
        //s.linkTrackEvents = 'event14';
        s.events = 'event14';
        s.eVar13 = 'Enlarge Image';
        if (itemDisplayName)
            s.products = itemDisplayName;
        else
            s.products = "unknown";
        void (s.tl());
    });

}