/***
Filename:		productpage.js
Author:			Andrei Vais
Date:			12/10/2009
Description:	Javascript functionality for product page
***/
var ProductSampleLocation = "Static/Images/products/"
var ProductFullTileSampleLocation = "closeups/";
var ProductZoomedTileSampleLocation = "zoomed/";


function initialiseColours()
{    
    jQuery('#productcolours a').each(function(index, el){
        var link = jQuery(el);
        if(link.attr('title') != '')
            link.click(function(evt){
                evt.preventDefault();
                swapColourPic(link.attr('title'));
            });
    });
	    
    //setup product sample coordinating samples
    if (!document.getElementById("ToggleCoordinatingProducts")) return false;
    if (!document.getElementById("ProductCoordinatedColours")) return false;
    jQuery('#ProductCoordinatedColours').css('display', 'none');
    jQuery('#ToggleCoordinatingProducts').css('display', 'inline');
    //add this only when we pass the tests that there is a co-ordinated products div
    
    jQuery('#ToggleCoordinatingProducts a').click(function(evt){
        evt.preventDefault();
        var button = jQuery('#ToggleCoordinatingProducts a');
        if(button.attr('show') == 'false')
        {
            button.attr('show', 'true')
                .html(button.attr('rel'))
                .parent().toggleClass('hide').toggleClass('show');
            jQuery('#ProductCoordinatedColours').slideDown('slow', function() {
                if (jQuery("#ProductSample").length != 0)
                {
                    scrollProductIntoView;
                }
            });
        }
        else
        {
            button.attr('show', 'false')
                .html(button.attr('rel2'))
                .parent().toggleClass('hide').toggleClass('show');
            jQuery('#ProductCoordinatedColours').slideUp('slow', function() {
                if (jQuery("#ProductSample").length != 0)
                {
                    scrollProductIntoView;
                }
            });
        }        
    }).attr('show', false).attr('rel2', jQuery('#ToggleCoordinatingProducts a').html());
}

function initialiseColourSampleLinks()
{
    if (!document.getElementById) return false;
	if (!document.getElementById("ProductColourFullTile")) return false;
	if (!document.getElementById("ProductColourZoomedTile")) return false;
	
	document.getElementById("ProductColourFullTile").firstChild.onclick = function()
    {
        return showColourSample(this);
    }
	
	if (document.getElementById("ProductColourZoomedTile"))
	{
	    if (document.getElementById("ProductColourZoomedTile").firstChild.getAttribute("href").indexOf("sampleimagenotfound.gif") != -1)
        {
            document.getElementById("ProductColourZoomedTile").style.visibility="hidden";
        }  
        else
        {
            document.getElementById("ProductColourZoomedTile").style.visibility="visible";
        }
	
	    document.getElementById("ProductColourZoomedTile").firstChild.onclick = function()
        {
            return showColourSample(this);
        }
    }
}

function showColourSample(pSelectedLink)
{
    var colourSampleImgHRef = pSelectedLink.getAttribute("href");
    //console.log(colourSampleImgHRef);
        
    if (!document.getElementById) return false;
	if (!document.getElementById("ProductColourImage")) return false;
	
	document.getElementById("ProductColourImage").setAttribute("src", colourSampleImgHRef)
	
	//remove the selected class from all the siblings the set the click style class
	for(var i = 0; i < pSelectedLink.parentNode.parentNode.childNodes.length; i++)
	{
	    if(pSelectedLink.parentNode.parentNode.childNodes[i].nodeType == 1)
	    {
	        pSelectedLink.parentNode.parentNode.childNodes[i].firstChild.className = "";
	    }
	}	
	pSelectedLink.className = "selected";	
	
    return false;
}


function swapColourPic(pSelectedLink)
{
    //console.log(pSelectedLink);
    if (!document.getElementById) return false;
	if (!document.getElementById("ProductColourImage")) return false;
	if (!document.getElementById("ProductColourName")) return false;
	if (!document.getElementById("ProductColourFullTile")) return false;
	if (!document.getElementById("ProductColourZoomedTile")) return false;
    
    
    //console.log("test: ", ProductSamplesDictionary[pSelectedLink].sampleName);
    document.getElementById("ProductColourName").firstChild.nodeValue = ProductSamplesDictionary[pSelectedLink].sampleName;
	
	//need to decide whether the existing sample is a full tile sample image or a close up sample image
	if (document.getElementById("ProductColourImage").getAttribute("src").indexOf(ProductFullTileSampleLocation) != -1)
	{
	    document.getElementById("ProductColourImage").setAttribute("src", ProductSampleLocation + ProductFullTileSampleLocation + ProductSamplesDictionary[pSelectedLink].sampleFullTileImage);
	}
	else if (document.getElementById("ProductColourImage").getAttribute("src").indexOf(ProductZoomedTileSampleLocation) != -1)
	{
	    document.getElementById("ProductColourImage").setAttribute("src", ProductSampleLocation + ProductZoomedTileSampleLocation + ProductSamplesDictionary[pSelectedLink].sampleZoomTileImage);
	}
	else
	{
	    document.getElementById("ProductColourImage").setAttribute("src", "../Images/sampleimagenotfound.gif")	    
	}
	
	document.getElementById("ProductColourImage").setAttribute("alt", ProductSamplesDictionary[pSelectedLink].sampleName);
	
	document.getElementById("ProductColourFullTile").firstChild.setAttribute("href", ProductSampleLocation + ProductFullTileSampleLocation + ProductSamplesDictionary[pSelectedLink].sampleFullTileImage);
	document.getElementById("ProductColourZoomedTile").firstChild.setAttribute("href", ProductSampleLocation + ProductZoomedTileSampleLocation + ProductSamplesDictionary[pSelectedLink].sampleZoomTileImage);
	
	//hide link if zoomed tile image not found
	if (document.getElementById("ProductColourZoomedTile").firstChild.getAttribute("href").indexOf("sampleimagenotfound.gif") != -1)
	{
	    document.getElementById("ProductColourZoomedTile").style.visibility="hidden";
	}  
	else
	{
	    document.getElementById("ProductColourZoomedTile").style.visibility="visible";
	}
    
    return swapCoordinatingColourPic(pSelectedLink);    
    return false;
}

function swapCoordinatingColourPic(pSelectedLink)
{
    //console.log(pSelectedLink);
    if (!document.getElementById) return false;    
	if (!document.getElementById("ProductCoordinatedColours")) return false;
    
    var ArrCoordProductNames = jQuery("#ProductCoordinatedColours h4");
    var ArrCoordColoursImages = jQuery("#ProductCoordinatedColours img");
    var ArrCoordColoursNames = jQuery("#ProductCoordinatedColours span");
    var ArrCoordColoursLinks = jQuery("#ProductCoordinatedColours a");
    
    for (var i = 0; i < ArrCoordProductNames.length; i++)
    {
        ArrCoordProductNames[i].firstChild.nodeValue = ProductSamplesDictionary[pSelectedLink].coordinatedSamples[i].productName;
    }
    
    for (var i = 0; i < ArrCoordColoursNames.length; i++)
    {
        //first remove all children of the colour names
        while(ArrCoordColoursNames[i].hasChildNodes()) {ArrCoordColoursNames[i].removeChild(ArrCoordColoursNames[i].firstChild);}
        
        //now we rebuild the element        
        var sampleCode = document.createTextNode(ProductSamplesDictionary[pSelectedLink].coordinatedSamples[i].sampleCode);
        var sampleName = document.createTextNode(ProductSamplesDictionary[pSelectedLink].coordinatedSamples[i].sampleName);
        var theBR = document.createElement('br');

        ArrCoordColoursNames[i].appendChild(sampleCode);
        if (!((ProductSamplesDictionary[pSelectedLink].coordinatedSamples[i].sampleCode.toLowerCase() == 'null') || (ProductSamplesDictionary[pSelectedLink].coordinatedSamples[i].sampleCode.length == 0 && ProductSamplesDictionary[pSelectedLink].coordinatedSamples[i].sampleName.length == 0)))
        {
            ArrCoordColoursNames[i].appendChild(theBR);
        }
        ArrCoordColoursNames[i].appendChild(sampleName);
        
    }
    
    for (var i = 0; i < ArrCoordColoursImages.length; i++)
    {
        ArrCoordColoursImages[i].setAttribute("src", ArrCoordColoursImages[i].src.substr(0, ArrCoordColoursImages[i].src.lastIndexOf("/") + 1) + ProductSamplesDictionary[pSelectedLink].coordinatedSamples[i].sampleFullTileImage);
        ArrCoordColoursImages[i].setAttribute("alt", ProductSamplesDictionary[pSelectedLink].coordinatedSamples[i].productName);
    }
    
    for (var i = 0; i < ArrCoordColoursLinks.length; i++)
    {
        ArrCoordColoursLinks[i].setAttribute("href", ProductSamplesDictionary[pSelectedLink].coordinatedSamples[i].sampleLink);
    }    
    
    return false;
}



jQuery(document).ready(initialiseColourSampleLinks);
jQuery(document).ready(initialiseColours);

// New JS using jQuery
jQuery(document).ready(function() {
    //To switch directions up/down and left/right just place a "-" in front of the top/left attribute
    //Caption Sliding (Partially Hidden to Visible)
    //Set resize 7 reposition the box for different languages as for some longer text the text is hidden
    var SiteLang = jQuery("html").attr("lang");
    var BoxgridCaptionOnHoverTop = 0;
    
    switch(SiteLang)
    {
        case "fr":
            BoxgridCaptionOnHoverTop = 259;
            jQuery("#pagecontent .ranges li.boxgrid .boxcaption").css("height", "176px");
            break;
        case "it":
            BoxgridCaptionOnHoverTop = 246;
            jQuery("#pagecontent .ranges li.boxgrid .boxcaption").css("height", "189px");
            break;
        case "pl":
            BoxgridCaptionOnHoverTop = 272;
            jQuery("#pagecontent .ranges li.boxgrid .boxcaption").css("height", "163px");
            break;
        case "es":
            BoxgridCaptionOnHoverTop = 272;
            jQuery("#pagecontent .ranges li.boxgrid .boxcaption").css("height", "163px");
            break;
        default:
            BoxgridCaptionOnHoverTop = 285;
            jQuery("#pagecontent .ranges li.boxgrid .boxcaption").css("height", "150px");
    }
    
    
    jQuery('.boxgrid.caption').hover(function(){
        jQuery(".cover", this).stop().animate({top: BoxgridCaptionOnHoverTop+'px'},{queue:false,duration:160});
    }, function() {
        jQuery(".cover", this).stop().animate({top:'380px'},{queue:false,duration:160});
    });
    
    //transfer the link to the list item
    jQuery("#pagecontent ul.ranges li").click(function(){
        window.location.href  = jQuery(this).find('h3 a').attr("href");
    });
});


jQuery(document).ready(function(){
    /*  Reposition the product main sample image while user scrolls the page  */
    var productSampleSelector = "#ProductSample";
    var productSelector = ".product";
    var pageContentSelector = "#pagecontent";
    
	if(jQuery(productSampleSelector).length != 0)
	{
		var startingMenuOffset = jQuery(productSampleSelector).offset();
		var productOffset = jQuery(productSelector).offset();
		
		var startingMenuYOffSet = startingMenuOffset.top - productOffset.top;
		var minimumMenuMargin = parseInt(jQuery(productSampleSelector).css("margin-top"));
		
        var contentHeight = jQuery(pageContentSelector).height();
        
		window.scrollProductIntoView = function (){
		    var currentMenuHeight = jQuery(productSampleSelector).height();
		    var maxMenuMargin = contentHeight - currentMenuHeight - startingMenuYOffSet - minimumMenuMargin;
		    var scrollTop = jQuery(document).scrollTop();
		    
		    var newMenuMargin = minimumMenuMargin;
		    if(scrollTop > startingMenuOffset.top)
		        newMenuMargin = scrollTop + (minimumMenuMargin * 2) - startingMenuOffset.top;
		        
			newMenuMargin = Math.min(maxMenuMargin, newMenuMargin);
			
		    jQuery(productSampleSelector).animate({"margin-top":newMenuMargin+"px"},{duration:500,queue:false});
		};
		
		if(jQuery(document).scrollTop() > 0)
			scrollProductIntoView();
			
		jQuery(window).scroll(scrollProductIntoView);
	}
});