/// <reference path="jquery/jquery.intellisense.js" />

/* Functions belonging to the product view page. Please prepend all function names with _PV_
to avoid conflicts with global functions declared in other js files.*/

$(document).ready(function(){
    _PV_InitialiseProductViewPage();
    _PV_ExpandSectionFromUrl();
    _PV_FixInternalHyperlinks();
})

// systematically release all event handlers to stop IE memory leaks

window.onunload = EventCache.flush;

// this array stores the state of each section
var sectionSettings = new Array();

function _PV_InitialiseProductViewPage()
{
    if(!compatible)
        return false;
         
    var container = $('#productview');
    
    // get the outer div of each section that will expand/collapse...
    var collapsableSections = $(container).children('div.collapsable');
    
    // prepare each participating div...
    for(i=0;i<collapsableSections.length;i++){
        //populate default settings for this section (defaults to 1=expanded)
        sectionSettings[i] = new Object();
        sectionSettings[i].id = collapsableSections[i].id;
        sectionSettings[i].state = 1; 
        
        // set up the H2 tag within this div
        _PV_InitialiseClickableHeader(collapsableSections[i]);
    }
    
    // load the sectionSettings from cookie
    _PV_GetSettings(); // changes any settings from defaults (1=expanded) to users last known settings
    
    // set the inital state of each section based on the settings retrieved above
    _PV_SetInitialState();
    
    // initialise the Image Gallery
    _PV_InitialiseImageGallery();
    
    // initialise the Resources section (this appears to be obsolete so commented out)
    //_PV_InitialiseResources();
}

function _PV_InitialiseResources(){
    /*
    configures the resources section to be a set of tabbed lists
    rather than a linear nested list.
    */
    var resourceListContainer = document.getElementById("resourcelistcontainer");
    var resourceTypesList = document.getElementById("resourcelist");
    var resourceLists = new Array();
        
    // If the resource list was not found, don't go any further
    if(!resourceTypesList){
        return false;
    }
        
    // change the CSS Class on the resourceTypesList UL to format as a series of tabs
    //resourceListContainer.className += " tabsenabled ";
    //resourceTypesList.className += " tabsenabled ";
    
    // register click event handlers with each of the top level <li>'s
    var resourceTypeListItems = resourceTypesList.getElementsByTagName("LI")
    
    // set the first tab up as the currently selected
    //resourceTypeListItems[0].className += " current ";
    
    for(i=0;i<resourceTypeListItems.length;i++){
        if((" " + resourceTypeListItems[i].className + " ").indexOf(" contenttype ") > -1){
            //AddEvent(resourceTypeListItems[i],'click',_PV_ResourceTypeClick,false);
            
            // get the child <ul> which contains the actual resource links and add a reference to the resourceLists() array
            resourceLists.push(resourceTypeListItems[i].getElementsByTagName("UL")[0]);
        }
    }
    
    // attach click event handlers to all the <a> tags within the lists
    var anchors = resourceListContainer.getElementsByTagName("A");
    for(i=0;i<anchors.length;i++){
        AddEvent(anchors[i],'click',_PV_ResourceClick);
    }
    
    // add the resourceLists array to the resourceTypesList element so we can access and manipulate these items later
    resourceTypesList._resourceLists = resourceLists;
    
    // hide all but the first nested list
    if(resourceTypesList._resourceLists.length > 1){
        for(i=1;i<resourceTypesList._resourceLists.length;i++){
            resourceTypesList._resourceLists[i].className = " hidden ";
        }
    }
    
}

function _PV_ResourceClick(e){
    var evt = e || window.event;
    var evtTarget = evt.target || evt.srcElement;
    var resourceTypesList = document.getElementById("resourcelist");

    // make sure we have a reference to the A tag.
    // (if an image was clicked evtTarget will reference the image
    // rather than the surrounding anchor.)
    
    if(evtTarget.nodeName != "A")
        evtTarget = evtTarget.parentNode;
        
        
    if(evtTarget.nodeName != 'A')
    { 
        while(evtTarget.nodeType != 3)
        {
            evtTarget = evtTarget.parentNode;
        }
    }
    
    // if we still don't have a reference to the a tag, bail out.
    if(evtTarget.nodeName != "A")
        return;
    
    
    // stop the anchor from doing its thing
    if(evt.preventDefault)
       evt.preventDefault();
    else
       evt.returnValue = false;
       
   // if the class attribute of the clicked anchor contains "contenttype", ignore the click
   if(evtTarget.className.indexOf("contenttype") > 0)
        return false;
   
       
   // open the address from the href attribute in a new window
   window.open(evtTarget.href,"_blank");    
}

function _PV_ResourceTypeClick(e){
    var evt = e || window.event;
    var evtTarget = evt.target || evt.srcElement;
    var resourceTypesList = document.getElementById("resourcelist");

    // make sure we have a reference to the A tag.
    // (if an image was clicked evtTarget will reference the image
    // rather than the surrounding anchor.)
    
    if(evtTarget.nodeName != "LI")
        evtTarget = evtTarget.parentNode;
        
        
    if(evtTarget.nodeName != 'LI')
    { 
        while(evtTarget.nodeType != 3)
        {
            evtTarget = evtTarget.parentNode;
        }
    }
    
    // if we still don't have a reference to the a tag, bail out.
    if(evtTarget.nodeName != "LI")
        return;
    
    
    // stop the anchor from doing its thing
    if(evt.preventDefault)
       evt.preventDefault();
    else
       evt.returnValue = false;
       
    // loop through all top level <li>'s removing the "current" class from any that have it
    var resourceTypeListItems = getElementsByClass("contenttype",resourceTypesList,"LI");
    for(j=0;j<resourceTypeListItems.length;j++){
        resourceTypeListItems[j].className = RemoveClassFromClassList(resourceTypeListItems[j].className,"current");
    }
       
    // hide all the resource lists and remove the "current" class from any that have it  
    for(i=0;i<resourceTypesList._resourceLists.length;i++){
        resourceTypesList._resourceLists[i].className = " hidden ";
    }

    
    // show the selected/clicked list
    var unorderedList = evtTarget.getElementsByTagName("UL")[0];
    unorderedList.className = RemoveClassFromClassList(unorderedList.className,"hidden");
    evtTarget.className += " current "; 
}

function _PV_InitialiseImageGallery(){
    /* 
    configures the image gallery to work with javascript 
    rather than conventional postback/refresh
    */
    
    var scrollerWrapperDiv = document.getElementById('imagegalleryscrollerwrapper');
    var scrollerDiv = document.getElementById('imagegalleryscroller');
    
    // If the scroller div element is not found, don't go any further
    if(!scrollerDiv)
        return false;
        
    $(scrollerDiv).css('overflow', 'hidden');
    $(scrollerDiv).addClass('noscrollbars');

    
    // get the width and count of the thumbnails (all should be same width)
    // findings are stored as properties of the scrollerDiv
    var thumbs = $(scrollerDiv).children('a');
    scrollerWrapperDiv._thumbCount = thumbs.length;
    scrollerWrapperDiv._thumbWidth = 60; // hard coded to 60 because of inaccurate offsetWidth in IE
    
    // if there are more than 6 thumbs, we need scroller buttons...
    if(scrollerWrapperDiv._thumbCount > 6){
        $(scrollerWrapperDiv).addClass('scrollbuttonsactive');
        $(scrollerWrapperDiv).html('<a href="#" class="scrollbutton left"><img src="/images/' + _PV_storeGroupId + '/left_btn_inactive.gif"  id="scrollbuttonleft" /></a><div id="imagegalleryscroller" class="noscrollbars">' + $(scrollerDiv).html() + '</div><a href="#" class="scrollbutton right"><img src="/images/' + _PV_storeGroupId + '/right_btn.gif" id="scrollbuttonright" /></a><div class="clr"></div>');
        
        // re-establish reference to scrollerDiv
        scrollerDiv = $('#imagegalleryscroller');
        thumbs = $(scrollerDiv).children('a')
        
        // attach event handlers to scroll buttons
        $(scrollerWrapperDiv).children('a.scrollbutton').click(_PV_ScrollImageGalleryClick);
        
        // attach event to listen for cursor key presses
        $(document).keydown(_PV_ScrollImageGalleryKeyDown);
    }

    // thumbs, attach a click event handler to each
    $(thumbs).click(_PV_ScrollImageGalleryThumbClick);
    $(thumbs).mouseover(function(){$(this).toggleClass('hover')});
    $(thumbs).mouseout(function(){$(this).toggleClass('hover')});
    
}

function _PV_ScrollImageGalleryClick(e){
    var evt = e || window.event;
    var evtTarget = evt.target || evt.srcElement;
    var direction = "left";

    // make sure we have a reference to the A tag.
    // (if an image was clicked evtTarget will reference the image
    // rather than the surrounding anchor.)
    
    if(evtTarget.nodeName != "A")
        evtTarget = evtTarget.parentNode;
        
        
    if(evtTarget.nodeName != 'A')
    { 
        while(evtTarget.nodeType != 3)
        {
            evtTarget = evtTarget.parentNode;
        }
    }
    
    // if we still don't have a reference to the a tag, bail out.
    if(evtTarget.nodeName != "A")
        return;
    
    
    // stop the anchor from doing its thing
    if(evt.preventDefault)
       evt.preventDefault();
    else
       evt.returnValue = false;
    
    // figure out which way to scroll       
    if((" " + evtTarget.className + " ").indexOf(" left ") < 0)
        direction = "right";
    
    _PV_ScrollImageGallery(direction);
    
}

function _PV_ScrollImageGalleryThumbClick(e){
    var evt = e || window.event;
    var evtTarget = evt.target || evt.srcElement;
    var direction = "left";

    // make sure we have a reference to the A tag.
    // (if an image was clicked evtTarget will reference the image
    // rather than the surrounding anchor.)
    
    if(evtTarget.nodeName != "A")
        evtTarget = evtTarget.parentNode;
        
        
    if(evtTarget.nodeName != 'A')
    { 
        while(evtTarget.nodeType != 3)
        {
            evtTarget = evtTarget.parentNode;
        }
    }
    
    // if we still don't have a reference to the a tag, bail out.
    if(evtTarget.nodeName != "A")
        return;
    
    
    // stop the anchor from doing its thing
    if(evt.preventDefault)
       evt.preventDefault();
    else
       evt.returnValue = false;

    // get a reference to the thumb img
    var thumb = $(evtTarget).children('img:first').eq(0);
     
    // store the guid of the selected image as a property of largeImageContainer
    var largeImageContainer = document.getElementById('imagegallerylargeimage');
    largeImageContainer._largeImageSrc = $(thumb).attr("src").replace('_thumb','_large');
    largeImageContainer._guid = $(thumb).attr("class");

    //fade area (use fadeTo, not fadeOut because it doesn't hide element)    
    $(largeImageContainer).fadeTo('fast', 0, _PV_ScrollImageGalleryLargeImageFadeComplete);
    
}

function _PV_ScrollImageGalleryLargeImageFadeComplete(){

    var largeImageContainer = $("#imagegallerylargeimage");
    var largeImagePreLoader = $("#imagegallerylargeimagepreloader");
    var largeImage = document.createElement('img');
    
    // display the pre loaded graphic
    var timeout = setTimeout('_PV_ScrollImageGalleryPreLoader()',1000);

    
    largeImage.onload = function(){
        $(largeImagePreLoader).html('');
        $(largeImageContainer).html('');
        clearTimeout(timeout);
        $(largeImageContainer).append(largeImage);
        $(largeImageContainer).fadeTo('medium', 1);
    };
    // only set the src property AFTER setting the onload handler - intermittent IE bug/feature means that onload doesn't fire if src is set first!
    largeImage.src = document.getElementById('imagegallerylargeimage')._largeImageSrc;
    $('#imagegallerylargeimage').show();
}

function _PV_ScrollImageGalleryPreLoader(){
    var largeImageContainer = $('#imagegallerylargeimage');
    var largeImagePreLoader = $('#imagegallerylargeimagepreloader');
    $(largeImageContainer).html('');
    $(largeImagePreLoader).html('<img src="/images/' + _PV_storeGroupId + '/icons/ajax_preloader.gif" style="margin:137px 0;" />');
}

function _PV_ScrollImageGalleryKeyDown(e){
    var code;
	if (!e) var e = window.event;
	if (e.keyCode) code = e.keyCode;
	else if (e.which) code = e.which;
	
	switch (code){
	    case 37:
	        _PV_ScrollImageGallery("left");
	        break;
	    case 39:
	        _PV_ScrollImageGallery("right");
	        break;
	}
}

function _PV_ScrollImageGallery(direction){

    var scrollerWrapperDiv = document.getElementById('imagegalleryscrollerwrapper');
    var scrollerDiv = $('#imagegalleryscroller');
    var attributes;

    if(direction == "left"){
        $(scrollerDiv).animate({'scrollLeft': -scrollerWrapperDiv._thumbWidth + 'px' }, 'slow', '' , _PV_ScrollImageGalleryUpdateScrollButtons);
    } else {
        $(scrollerDiv).animate({'scrollLeft': scrollerWrapperDiv._thumbWidth + 'px' }, 'medium', '' , _PV_ScrollImageGalleryUpdateScrollButtons);
    }
  
}

function _PV_ScrollImageGalleryUpdateScrollButtons()
{
    // sets the left and right scroll buttons to active/inactive depending on scroll position
    var scrollerDiv = document.getElementById('imagegalleryscroller');
    var scrollButtonLeft = document.getElementById('scrollbuttonleft');
    var scrollButtonRight = document.getElementById('scrollbuttonright');

    if(scrollerDiv.scrollLeft < 1)
       scrollButtonLeft.src = scrollButtonLeft.src.replace("left_btn.gif","left_btn_inactive.gif");
    else
       scrollButtonLeft.src = scrollButtonLeft.src.replace("left_btn_inactive.gif","left_btn.gif");
       
    if(scrollerDiv.scrollLeft >= (scrollerDiv.scrollWidth-scrollerDiv.offsetWidth)-10)
       scrollButtonRight.src = scrollButtonRight.src.replace("right_btn.gif","right_btn_inactive.gif");
    else
       scrollButtonRight.src = scrollButtonRight.src.replace("right_btn_inactive.gif","right_btn.gif");
}

function _PV_ExpandSectionFromUrl()
{
    /*
    if an internal hyperlink (ie; #somelink) 
    is present in the url, attempt to expand 
    its section (it may or may not 
    reference an expandable section).
    */
    if(location.hash)
    {
        _PV_ExpandOrCollapseSection(location.hash.substr(1,location.hash.length-1) + 'section','show');
    }
}


function _PV_FixInternalHyperlinks()
{
    /*
    Iterates through all the hyperlinks within <div id="productview">
    If a hash (#internallink) is found, attaches an onclick event handler
    so that the collapsable section is expanded when a user navigates to it.
    */
    
    var anchors = $('#productview').children('a');
    
    for(i=0;i<anchors.length;i++){
        if(anchors[i].href.indexOf('#') > -1)
            $(anchors[i]).click(_PV_ExpandFromInternalLink);
    }
}


function _PV_ExpandFromInternalLink(e)
{
  
    var evt = e || window.event;
    var evtTarget = evt.target || evt.srcElement;
    
    // make sure we have a reference to the A tag.
    // (if an image was clicked evtTarget will reference the image
    // rather than the surrounding anchor.)
    
    if(evtTarget.nodeName != "A")
        evtTarget = evtTarget.parentNode;
        
        
    if(evtTarget.nodeName != 'A')
    { 
        while(evtTarget.nodeType != 3)
        {
            evtTarget = evtTarget.parentNode;
        }
    }
    
    // if we still don't have a reference to the a tag, bail out.
    if(evtTarget.nodeName != "A")
        return;
    
    if(evtTarget.href.indexOf('#')>-1)
    {
        var containerId = evtTarget.href.split('#')[1];
        containerId += 'section';
        _PV_ExpandOrCollapseSection(containerId,'show');
    }
    
}

function _PV_GetSettings()
{
    /*
        retrieves previous expand/collapse states from a cookie string
        and modifies values in the global sectionSettings array for each
    */
    var cookieString = _PV_GetCookie()
    if(cookieString){
        var cookieStrings = cookieString.split('&');
        
        for(i=0;i<sectionSettings.length;i++){
            for(ii=0;ii<cookieStrings.length;ii++){
                if(cookieStrings[ii].indexOf(sectionSettings[i].id) == 0){
                    sectionSettings[i].state = cookieStrings[ii].split('=')[1];
                }
            }
        }
    }
   
}

function _PV_SetSettings()
{

    /*
        commits any changes made to the sectionSettings global array
        back to cookie for retrieval on subsequent requests.
    */
    var cookieString = _PV_GetCookie();
    
    if(cookieString.length > 0){
        var cookieStrings = cookieString.split('&');
        
        // first we update any values already present in the cookie
        for(i=0;i<sectionSettings.length;i++){
            for(ii=0;ii<cookieStrings.length;ii++){
                if(cookieStrings[ii].indexOf(sectionSettings[i].id) == 0){
                    cookieStrings[ii] = sectionSettings[i].id + '=' + sectionSettings[i].state;
                }
            }
        }
    
        cookieString = '';
        for(i=0;i<cookieStrings.length;i++){
            cookieString += cookieStrings[i] + '&';
        }
    }
    
    // now we run through the sectionSettings array once more appending any new sections onto the cookie string
    
    for(i=0;i<sectionSettings.length;i++){
        if(cookieString.indexOf(sectionSettings[i].id)<0){
            cookieString += sectionSettings[i].id + '=' + sectionSettings[i].state + '&';
        }    
    }
    
    _PV_SetCookie(cookieString);
}


function _PV_SetSetting(sectionName,state){
    /*
        Sets the state value (1=expanded, 0=collapsed) of an individual section setting
    */
    for(i=0;i<sectionSettings.length;i++){
        if(sectionSettings[i].id == sectionName){
           sectionSettings[i].state = state;
           break;
        }
    }
}

function _PV_SetCookie(cookieString){
    var cookieExpiryDate = "";
    var days = new Array('Sun','Mon','Tue','Wed','Thu','Fri','Sat');
    var months = new Array('Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec');
    var theDate = DateAdd('y',10,new Date());
    cookieExpiryDate = days[theDate.getDay()] + ', ' 
                        + theDate.getDate() + ' ' 
                        + months[theDate.getMonth()] + ' ' 
                        + theDate.getFullYear() + ' ' 
                        + theDate.getHours() + ':' 
                        + theDate.getMinutes() + ':' 
                        + theDate.getSeconds() + ' UTC';                       
    document.cookie = 'productViewSectionSettings=' + cookieString 
                        + '; expires=' + cookieExpiryDate
                        + '; path=/ ';
}

function _PV_GetCookie()
{
    var cookies = document.cookie.split(';');
    for(i=0;i<cookies.length;i++){
        if(cookies[i].indexOf('productViewSectionSettings=') > -1)
            return cookies[i].substring(cookies[i].indexOf('=')+1);
    }
    
    return '';
}

function _PV_InitialiseClickableHeader(sectionContainer){
    //find the H2 tag
    var h2Tags = $(sectionContainer).children('h2');
    
    //If we have at least one H2 tag, proceed otherwise we go no further
    if(h2Tags.length < 1)
        return;
    else{
        var h2Tag = h2Tags[0];
        
        $(h2Tag).addClass('expanded clickable');
        // add a click event to the H2 tag
        $(h2Tag).click(_PV_ShowHideSection_Click);
    } 
}


function _PV_ShowHideSection_Click(e)
{
    var evt = e || window.event;
    var evtTarget = evt.target || evt.srcElement;
    
    // If the user clicked an Anchor tag - its most likely the customer reviews link
    if(evtTarget.nodeName == 'A')
        return;
    
    //If the user clicked the strong tag instead of H2, get a reference to the H2 tag
    if(evtTarget.nodeName == 'STRONG')
        evtTarget = evtTarget.parentNode;
        
    while(evtTarget.nodeType == 3){
        evtTarget = evtTarget.parentNode;
    }
    
    // get a reference to the H2s parent node which contains the ID of this section
    var sectionDiv = evtTarget.parentNode;
    while(sectionDiv.nodeType == 3){
        sectionDiv = sectionDiv.parentNode;
    }    
    
    /*  
        each collapsable section will have 
        a <div class="collapsable"> node as a 
        sibling of the H2. Here we get a reference
        to that div so we can operate on it (ie; hide or show)
    */
    var container = evtTarget.nextSibling;
    while(container.nodeType == 3){
        container = container.nextSibling;
    }
    
    if(container.nodeName != 'DIV' && container.className.indexOf('container') < 0)
        return;

    // container is now a reference to the <div class="collapsable"> element
    var containerClasses = ' ' + container.className + ' ';
    
    if(containerClasses.indexOf(' collapsed ') == -1)
    {
        $(container).addClass('collapsed');
        evtTarget.setAttribute('title',_PV_expandThisSection);
        $(evtTarget).addClass('collapsed');
        _PV_SetSetting(sectionDiv.id,0);        
    }else{
        $(container).removeClass('collapsed');
        $(evtTarget).attr('title',_PV_collapseThisSection);
        $(evtTarget).removeClass('collapsed');
        _PV_SetSetting(sectionDiv.id,1);
    }
    _PV_SetSettings();
}



function _PV_SetInitialState(){

    for(ii=0;ii<sectionSettings.length;ii++){
        if(sectionSettings[ii].state == 0){
            _PV_ExpandOrCollapseSection(sectionSettings[ii].id,'hide');
        } else {
           _PV_ExpandOrCollapseSection(sectionSettings[ii].id,'show');
        }
    }
}



function _PV_ExpandOrCollapseSection(sectionId,mode){
     var section = $('#'+sectionId);
     
     if(section){
         var h2tag = $(section).children('h2:first');
         var imgArrow = $(section).children('img:first');
         var container = $(section).children('div.container:first');
        
         if(mode == 'hide'){
            $(container).addClass('collapsed');
            $(h2tag).attr('title',_PV_expandThisSection);
            $(h2tag).addClass('collapsed');
         } else {
            $(container).removeClass('collapsed');
            $(h2tag).attr('title',_PV_collapseThisSection);
            $(h2tag).removeClass('collapsed');
         }
     }
}