function getVisibleWindowSize(){
    var de = document.documentElement;
    var w = window.innerWidth || self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;
    var h = window.innerHeight || self.innerHeight || (de&&de.clientHeight) || document.body.clientHeight;
    arrayPageSize = [w,h];
    return arrayPageSize;
}

function renderMainImageForZoom() {
    $(".mainImage").unbind();
    //initialise jqZoom, start by working out how big to make zoom window
    //sometimes .height() doesn't work (probably becuase the image hasn't loaded), and returns
    //a variety of numbers depeding on the browser. in this case set mainImageHeight to 534
    //(which is the height of a 3:4 ratio fash_product)
    var mainImageHeight = $(".mainImage img").height() >= 400 ? $(".mainImage img").height() : 534;
    var zoomHeight = mainImageHeight - 2;
    var zoomWidth = $(".thumb-cont").is(':visible') ? 472 : 522;
    var xOffset = $(".thumb-cont").is(':visible') ? 17 : 19;
    
    var options = {
        zoomWidth: zoomWidth,
        zoomHeight: zoomHeight, //make zoom window same height as main image
        title: false,
        xOffset: xOffset,
        yOffset: 0
    };
    $(".mainImage").jqzoom(options);
}

function renderMainPage() //called from $(document).ready and $(window).resize
{
    renderMainImageForZoom();
}

function renderOverlay() {
    //tell optimost
    if (typeof s !== "undefined") {
        s.pageName = s.pageName.split(" - ")[0] + " - Large View";
        s.tl(this,'o','Large View');
         }
    //set height of main image so that it is as large as possible given the window 
    var availableHeight = getVisibleWindowSize()[1]-50 ;
    var imageHeight=0
    //determine if product image is square. use the main image from the page as this will
    //have already loaded and so is a more reliable source of information!
    var square = $(".mainImage img").height() == $(".mainImage img").width() ? true : false;
    if(!square)
    {
        if(availableHeight <= 582){imageHeight = 582;}
        else if(availableHeight >= 800){imageHeight = 800;}
        else{imageHeight=availableHeight;}
    }
    else {
        if (availableHeight <= 553) { imageHeight = 553; }
        else if(availableHeight >= 600){imageHeight = 600;}
        else{imageHeight=availableHeight;}
    }
    //get current src and remove any scene7 query string
    var src = $(".lrg-image").attr('src').split('?')[0];
    //append height
    src += "?wid=600&hei=" + imageHeight;
    $(".lrg-image").attr({src: src});
    //move the overlay down if the paeg has been scrolled
    $(".overlay-container").attr({ style: "top:" + ($(window).scrollTop() + 10) + "px;" });
    $(".largeViewWrapper").show();
    return false;
}

function closeOverlay() {
    $(".largeViewWrapper").hide();
    return false;
}

function ClearVideoObject() {
    if (document.getElementById("alt-content").innerHTML.indexOf("PARAM") > 0) {
        document.getElementById("alt-content").removeNode(true);
        var newdiv = document.createElement('div');
        newdiv.setAttribute('id', 'alt-content');
        document.getElementById("mainFlashVideo").appendChild(newdiv);
    }
}

function showImage(sender, path) {
     //Hide Video Show Main Image
    document.getElementById("JQZoomImage_divMainVideo").style.display = "none";
    document.getElementById("JQZoomImage_divMainCont").style.display = "block";
    ClearVideoObject();
    $(".thumbnail-link").removeClass("selected");
    //add class "selected" to all elements with name = sender.name
    //with an img descendant (to add to overlay too!)
    $("a[name='" + sender.name + "']:has(img)").addClass("selected");
    $(".mainImage img").attr("src", path);
    $(".lrg-image").attr("src",path.split("?")[0] + "?" + $(".lrg-image").attr("src").split("?")[1]); //overlay image
    renderMainImageForZoom();
    sender.blur(); return false;
}

function renderPage()
{
    if ($(".largeViewWrapper").is(':visible')) { renderOverlay(); } else { renderMainPage(); }
}

jQuery.preloadImages = function()
{
    jQuery("<img>").attr("src", arguments[0]);
}

function style_selectSize(sender, selectedCellId, sku, hidSku, title, selectedProdFieldId, divSizeGridId) {
    //Update selected prod title.
    var selectedProd = document.getElementById(selectedProdFieldId);
    selectedProd.innerHTML = title;
    selectedProd.className = "inst-title";
    document.getElementById(hidSku).value = sku;
    
    //Update selected styles.
    var divSizeGrid = document.getElementById(divSizeGridId);
    var cells = divSizeGrid.getElementsByTagName("td");
    var loopTimes = cells.length;
    for (var i = 0; i < loopTimes; i++) {
        var e = cells[i];
        if (e.id == selectedCellId) {
            if (e.className == "") {
                e.className = "size-selected";
            } else if (e.className == "size-ls") {
                e.className = "size-ls-selected";
            }
            sender.style.display = "none";
            document.getElementById(sender.id.replace("_lnkCellText", "_spanCellText")).style.display = "";
        } else {
            if (e.className == "size-selected") {
                e.className = "";
                document.getElementById(e.id.replace("_tdCell", "_spanCellText")).style.display = "none";
                document.getElementById(e.id.replace("_tdCell", "_lnkCellText")).style.display = "";
            } else if (e.className == "size-ls-selected") {
                e.className = "size-ls";
                document.getElementById(e.id.replace("_tdCell", "_spanCellText")).style.display = "none";
                document.getElementById(e.id.replace("_tdCell", "_lnkCellText")).style.display = "";
            }
        }
    }
    sender.blur();
    return false;
}

function style_addToBasket(hidSku, selectedProdFieldId) {
    if (document.getElementById(hidSku).value == "") {
        var selectedProd = document.getElementById(selectedProdFieldId);
        selectedProd.innerHTML = "Please select a size from the selection above";
        selectedProd.className = "inst-highlight-title";
        return false;
    }
    return true;
}

$(document).ready(function() {
    $(".lnkLargeView").click(function() {
        $(".mainImage").unbind();
    });

    $("#printpageJS").show();
    $("#nonJSCarousel").hide();
    $("#jsCarousel").show();
    $("#rolloverText").show();
    renderPage();
    jQuery("#mycarousel").jcarousel({
        scroll: 3,
        initCallback: mycarousel_initCallback,
        buttonNextHTML: null,
        buttonPrevHTML: null
    });
});

$(window).resize(renderPage);

//this function is called after the page is loaded and ready.
//now we can start to cache larger versions of the thumbnails
//starting with fash_product and followed by fash_zoom
$(window).bind('load', function() {
    $(".thumbnail-link img").each(function() {
        $.preloadImages($(this).attr("src").replace("preview", "fash_product"));
    });
    $(".thumbnail-link img").each(function() {
        $.preloadImages($(this).attr("src").replace("preview", "fash_zoom"));
    });
});