//get the page scroll
function getPageScroll() {

    var yScroll;

    if (self.pageYOffset) {
        yScroll = self.pageYOffset;
    } else if (document.documentElement && document.documentElement.scrollTop) {	 // Explorer 6 Strict
        yScroll = document.documentElement.scrollTop;
    } else if (document.body) {// all other Explorers
        yScroll = document.body.scrollTop;
    }

    arrayPageScroll = new Array('', yScroll)
    return arrayPageScroll;
}

//make sure xml object can be created
function SetupGet() {
    if (window.XMLHttpRequest) {
        //most browsers
        return new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        //ie 5 and 6
        return new ActiveXObject("Microsft.XMLHTTP");
    } else {
        return null;
    }
}

//get the page size
function getPageSize() {

    var xScroll, yScroll;

    if (window.innerHeight && window.scrollMaxY) {
        xScroll = document.body.scrollWidth;
        yScroll = window.innerHeight + window.scrollMaxY;
    } else if (document.body.scrollHeight > document.body.offsetHeight) { // all but Explorer Mac
        xScroll = document.body.scrollWidth;
        yScroll = document.body.scrollHeight;
    } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
        xScroll = document.body.offsetWidth;
        yScroll = document.body.offsetHeight;
    }

    var windowWidth, windowHeight;
    if (self.innerHeight) {	// all except Explorer
        windowWidth = self.innerWidth;
        windowHeight = self.innerHeight;
    } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
        windowWidth = document.documentElement.clientWidth;
        windowHeight = document.documentElement.clientHeight;
    } else if (document.body) { // other Explorers
        windowWidth = document.body.clientWidth;
        windowHeight = document.body.clientHeight;
    }

    // for small pages with total height less then height of the viewport
    if (yScroll < windowHeight) {
        pageHeight = windowHeight;
    } else {
        pageHeight = yScroll;
    }

    // for small pages with total width less then width of the viewport
    if (xScroll < windowWidth) {
        pageWidth = windowWidth;
    } else {
        pageWidth = xScroll;
    }


    arrayPageSize = new Array(pageWidth, pageHeight, windowWidth, windowHeight)
    return arrayPageSize;
}

function CloseLargeView() {
    document.getElementById('LargViewContainer').style.top = "-10000px";
    document.getElementById('LargeViewNavBar').style.visibility = "hidden";
    var imgBG = document.getElementById('LargeDetailBG');
    imgBG.style.width = "10px";
    imgBG.style.height = "10px";
    imgBG.style.top = "-1000px";
    var imgTag = document.getElementById('LargeViewLoadingText');
    imgTag.innerHTML = "Loading....";
}

//show big image when it's loaded
var bigImage = new Image();
bigImage.onload = function() {
    //configure the image container
    var pageInfo = getPageSize();

    //configure the image container
    var imgContainer = document.getElementById('LargViewContainer');
    imgContainer.style.width = bigImage.width + "px";
    imgContainer.style.height = (bigImage.height + 22) + "px";
    imgContainer.style.left = (pageInfo[0] - bigImage.width) / 2 + "px";
    imgContainer.style.top = "50px";

    //setup the close button
    var nav = document.getElementById('LargeViewNavBar');
    nav.style.visibility = "visible";

    //add image to document
    var imgTag = document.getElementById('LargeViewLoadingText');
    imgTag.style.width = bigImage.width + "px";
    imgTag.style.height = (bigImage.height + 22) + "px";
    imgTag.innerHTML = "<img src=\"" + bigImage.src + "\" alt=\"Image Full View\" style=\"width: " + bigImage.width + "px; height:" + bigImage.height + "px;\">";
}

//setup to show big image
function BigImage(imgPath, colorLst) {
    //scroll to the top of the page
    window.scrollTo(0, 0);
    
    //get the page size
    var pageInfo = getPageSize();

    //get the image bg
    var imgBG = document.getElementById('LargeDetailBG');
    imgBG.style.top = "0px";
    imgBG.style.left = "0px";
    imgBG.style.width = "100%";
    imgBG.style.height = pageInfo[1] + "px";

    //get the container
    var imgContainer = document.getElementById('LargViewContainer');
    imgContainer.style.width = "300px";
    imgContainer.style.height = "50px";
    imgContainer.style.left = (pageInfo[0] - 300) / 2 + "px";
    imgContainer.style.top = "50%";

    //get location of image
    var bgImagePath = "getImage.aspx?bv=" + imgPath;
    if (document.getElementById(colorLst) != null) {
        bgImagePath = "getImage.aspx?bv=" + document.getElementById(colorLst).value;
    }
    bigImage.src = bgImagePath;
}

//change image color
function ChangeColor(newColor) {
    //get location of image
    var objGet = SetupGet();
    if (objGet != null) {
        var url = "getImage.aspx?mv=" + newColor;
        objGet.onreadystatechange = function() {
            //setup the image variables
            if (objGet.readyState == 4) {
                //info received
                var info = objGet.responseText;

                //now split the information and set variables
                document.getElementById('ProductMedFirstCol').style.backgroundImage = "url('" + info + "')";
            }
        }
        objGet.open("GET", url, true);
        objGet.send(null);
    }
}