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 showobject(name, url, 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;
}

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 (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());
    });    
    
}