function ToSearchPage(page) {
    var form = document.getElementById("searchPostBackForm");
    form.page.value = page;
    form.submit();
}

function clearText() {
    if (document.getElementById('search').value == 'Zoeken op trefwoord, naam, artikelnummer, maat, kleur, prijs')
        document.getElementById('search').value = '';
}

function setText() {
    if (document.getElementById('search').value == '')
        document.getElementById('search').value = 'Zoeken op trefwoord, naam, artikelnummer, maat, kleur, prijs';

    // Also fix enter button
    fixEnter();
}

function formSubmit(elementName) {
    document.forms[elementName].submit();
}

function clearExtraText() {
    if (document.getElementById('trefwoord').value == 'Verfijn op trefwoord')
        document.getElementById('trefwoord').value = '';
}

function setExtraText() {
    if (document.getElementById('trefwoord').value == '')
        document.getElementById('trefwoord').value = 'Verfijn op trefwoord';
}

function labelmerk(id) {
    if (document.getElementById('merk' + id).checked == false)
        document.getElementById('merk' + id).checked = true;
    else
        document.getElementById('merk' + id).checked = false;

    deselect();
}

function deselect() {
    document.getElementById('MerkAll').checked = false;
}

function deselectAll() {
    document.getElementById("MerkElse").value = "";
    if (document.getElementById("searchextraform") != null) {
        for (var i = 0; i < document.getElementById("searchextraform").elements.length; i++) {
            if (document.getElementById("searchextraform").elements[i].type == 'checkbox') {
                if (document.getElementById("searchextraform").elements[i].value != 'all')
                    document.getElementById("searchextraform").elements[i].checked = false;
            }
        }
    }
}


var num = 1;
var xmlhttp;
function loadXMLDoc(url) {
    xmlhttp = null;
    if (window.XMLHttpRequest) {
        // code for IE7, Firefox, Opera, etc.
        xmlhttp = new XMLHttpRequest();
    }
    else if (window.ActiveXObject) {
        // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    if (xmlhttp != null) {
        if (num == 1) {
            //1.get original prods for catview
            xmlhttp.onreadystatechange = state_Change;
        } else if (num == 2) {
            //2. get prods for catview
            xmlhttp.onreadystatechange = state_Change2;
        } else if (num == 3) {
            //3. get cats for catview 
            xmlhttp.onreadystatechange = state_Change3;
        } else if (num == 4) {
            //4. get search 
            xmlhttp.onreadystatechange = search_Change;
        } else if (num == 5) {
            //5. get related product   
            xmlhttp.onreadystatechange = rel_Change;
        } else if (num == 6) {
            //6. get related product prices   
            xmlhttp.onreadystatechange = rel_ChangePrice;
        }
        xmlhttp.open("GET", url, true);
        xmlhttp.send(null);
    }
    else {
        alert("Your browser does not support XMLHTTP.");
    }
}



/*** PRODUCT DETAILS ***/
$(document).ready(function () {
    // Check of we op de product pagina zitten?
    if ($("#proddetails").length > 0) {
        if (document.webshop != null)
            document.webshop.reset();

        setDetailFields();
        fixDetailsPosition();
        fixMeasureBoxes();
    }
});

function recensie() {
    disablePage(closerecensie);
    openDivPop("recensie");
}
function closerecensie() {
    closeDivPop("recensie");
}

function productinfo() {
    disablePage(closeproductinfo);
    openDivPop("productinfo", false, 450);
}
function closeproductinfo() {
    closeDivPop("productinfo");
}

function mailafriend() {
    disablePage(closemailafriend);
    openDivPop("mailafriend", false, 500);
}
function closemailafriend() {
    closeDivPop("mailafriend");
}

function closeReview() {
    closeDivPop("reviewdivdetail");
}
function Review() {
    disablePage(closeReview);
    openDivPop("reviewdivdetail", false, 500);
}

function setDetailFields() {
    if ("{brand}" == "")
        document.getElementById("merktr").style.display = 'none';
}

var maxTryFixPos = 5;
function fixDetailsPosition() {
    var defHeight = 250;
    var defEnlargeTop = 300;
    var defPhotoSmallTop = 325;

    var pic = document.getElementById("pic");

    if (pic != null && pic.complete) {
        var diff = defHeight - pic.height;

        var enlarge = document.getElementById("vergroot");
        if (enlarge != null)
            enlarge.style.top = defEnlargeTop - diff;

        var photosmall = document.getElementById("photosmall");
        if (photosmall != null)
            photosmall.style.top = defPhotoSmallTop - diff;
    }
    else {
        // Object not found or not yet loaded, can we try again?
        if (maxTryFixPos-- > 0) {
            // Try again 250 miliseconds later
            setTimeout("fixDetailsPosition();", 250);
        }
    }
}



/*** RELATED ARTICLES ***/
var number;
var number2;
var pid;
var col;
var mes;
var selectedMeasure = Array();
var single = new Array();

function clearArray(arr) {
    var len = arr.length;
    for (var i = 0; i < len; i++) {
        arr.pop();
    }
}

function fixMeasureBoxes() {
    var content, measure, params;
    var element = false;
    var i = 0;
    var options = Array();

    do {
        element = document.getElementById("measurebox_" + i);
        if (element != false && element != null) {
            content = element.innerHTML.toLowerCase().split("</a>");
            for (var c = 0; c < content.length; c++) {
                if (content[c].indexOf("<a") != -1)
                    options.push(content[c]);
            }

            if (options.length == 1) {
                // Set measure for product with only one option				
                measure = options[0].substring(options[0].lastIndexOf(">") + 1);
                params = options[0].substring(options[0].indexOf("(") + 1, options[0].indexOf(")")).split(",");
                setMeasure(parseInt(params[0], 10), parseInt(params[1], 10), parseInt(params[2], 10), measure, undefined, true, false);

                // By default don't check the checkbox in this case
                document.getElementById("mee_" + i).checked = false;
                single[i] = true;
            }
            else
                single[i] = false;

            clearArray(options);
        }
        i++;
    } while (element != false && element != null);
}

function clickSingleLink(e, i) {
    alert("e: " + e + "\ni: " + i);
}

function checkValues(num) {
    if (document.getElementById('measure_' + num).value == '' && document.getElementById('mee_' + num).checked == true) {
        alert('Dit product kan niet worden meegeleverd omdat u geen maat heeft geselecteerd');
        document.getElementById('mee_' + num).checked = false;
    }
}

function setMeasure(pid, num, mid, m, fromLink, overwrite, setOrderCheckbox) {
    if (overwrite || selectedMeasure[num] != mid || (fromLink && single[num])) {
        selectedMeasure[num] = mid;
        CloseRelBox(num);
        document.getElementById('measure_' + num).value = mid;

        if (m != null && m.length > 20)
            m = m.substring(0, 20) + '...';

        if (m != null && m.length > 0)
            document.getElementById('link_' + num).innerHTML = m;

        // Change the price
        if (!overwrite) {
            changeprice(pid, num, 'measure');
        }

        // Set 'meebestellen' checkbox checked
        if (($("#mee_" + num).length > 0) && setOrderCheckbox) {
            $("#mee_" + num).attr('checked', 'checked');
        }
    }
    else
        CloseRelBox(num);
}

function OpenRelBox(num) {
    // Close other rel. boxes
    CloseRelBox(0);
    CloseRelBox(1);
    CloseRelBox(2);
    CloseRelBox(3);

    // Calculation the width and height for the overlay div
    var height = document.body.offsetHeight;

    var width = window.innerWidth;
    if (width == 0 || !width)
        width = document.body.offsetWidth;

    if (navigator.appName == 'Microsoft Internet Explorer')
        height = height + 400;
    else
        width = width - 40;

    // Show the overlay div
    var overlay = document.getElementById('measureOverlay');
    if (overlay != null) {
        overlay.style.top = -255;
        overlay.style.left = '-' + (((width - 990) / 2) + 150) + 'px';
        overlay.style.visibility = 'visible';
        overlay.style.display = 'block';
        overlay.style.height = height;
        overlay.style.width = width;
        overlay.onclick = function () { CloseRelBox(num); };
    }

    // Open the given number
    document.getElementById('measurebox_' + num).style.visibility = 'visible';
}

function CloseRelBox(num) {
    if (document.getElementById('measurebox_' + num) != null)
        document.getElementById('measurebox_' + num).style.visibility = 'hidden';

    var overlay = document.getElementById('measureOverlay');
    if (overlay != null)
        overlay.style.visibility = 'hidden';
}

function changeprice(id, numb, last) {
    number2 = numb;
    pid = id;
    col = "";
    mes = "";

    if (number2 < 0) {
        if (document.getElementById("kleurbox2") != null)
            col = document.getElementById("kleurbox2").value;
        if (document.getElementById("maatbox2") != null)
            mes = document.getElementById("maatbox2").value;
    }
    else {
        if (document.getElementById("colour_" + numb) != null)
            col = document.getElementById("colour_" + numb).value;
        if (document.getElementById("measure_" + numb) != null)
            mes = document.getElementById("measure_" + numb).value;
    }

    // Load the new price for the given color and measure
    // Also loads the list of measure available for this color
    num = 6;

    var color = '/col/' + col;
    if (color == '/col/')
        color = '';

    var measure = '/mes/' + mes;
    if (measure == '/mes/')
        measure = '';

    var lastsel = '';
    if (last != '' && last != 'undefined')
        lastsel = "/lastsel/" + last;

    loadXMLDoc('/Webshop.aspx/action/relatedprice/shopid/' + id + color + measure + lastsel + ((numb < 0) ? "/org/1" : ""));
}

function rel_ChangePrice() {

    // 4 = "loaded"
    if (xmlhttp.readyState == 4) {
        // 200 = "OK"
        if (xmlhttp.status == 200) {
            var productID, oldPriceObject, priceObject, priceCentObject, pictureObject;
            x = xmlhttp.responseXML.documentElement.getElementsByTagName("product");

            if (x.length > 0) {
                if (number2 < 0) {
                    oldPriceObject = document.getElementById('oldprice2');
                    priceObject = document.getElementById('detailprice2');
                    priceCentObject = document.getElementById('pricecent2');
                    pictureObject = document.getElementById('relatedphoto');
                }
                else {
                    priceObject = document.getElementById('overviewprice_' + number2);
                    priceCentObject = document.getElementById('pricecent_' + number2);
                    pictureObject = document.getElementById('relatedpic_' + number2);
                }

                productID = x[0].getElementsByTagName("id")[0].firstChild.nodeValue;

                // Set all the values, we do this with try-catch statements, so we don't have to check 5 times if an object exists
                try {
                    oldPriceObject.innerHTML = x[0].getElementsByTagName("oldprice")[0].firstChild.nodeValue.replace(/%20/g, ' ');
                } catch (ex) { }

                try {
                    priceObject.innerHTML = x[0].getElementsByTagName("price")[0].firstChild.nodeValue.replace(/%20/g, ' ');
                } catch (ex) { }

                try {
                    priceCentObject.innerHTML = x[0].getElementsByTagName("cent")[0].firstChild.nodeValue.replace(/%20/g, ' ');
                } catch (ex) { }

                try {
                    document.getElementById("artnr2").innerHTML = x[0].getElementsByTagName("artnum")[0].firstChild.nodeValue.replace(/%20/g, ' ');
                } catch (ex) { }

                try {
                    var imgSrc = x[0].getElementsByTagName("picture")[0].firstChild.nodeValue;
                    // Only change picture, if we have one
                    if (imgSrc != "") {
                        if (pictureObject.firstChild.src != undefined)
                            pictureObject.firstChild.src = imgSrc;
                        else
                            document.getElementById("picpopup").src = imgSrc;
                    }
                }
                catch (ex) { }
            }

            // Set the selected color.
            if (xmlhttp.responseXML != null) {
                var xmlmeasure = xmlhttp.responseXML.documentElement.getElementsByTagName("measure");

                // Set the measure.
                setMeasure(
                    productID,
                    number2,
                    xmlmeasure[0].getElementsByTagName("id")[0].firstChild.nodeValue,
                    xmlmeasure[0].getElementsByTagName("name")[0].firstChild.nodeValue,
                    false,
                    true,
                    true
                );
            }

            // Set the selected color.
            if (xmlhttp.responseXML != null) {
                var xmlcolor = xmlhttp.responseXML.documentElement.getElementsByTagName("color");

                if (xmlcolor != null && xmlcolor != undefined && xmlcolor.length > 0 && $("#colour_" + number2).length > 0) {
                    $("#colour_" + number2 + " option:selected").removeAttr("selected");
                    if (xmlcolor[0].firstChild != null && xmlcolor[0].firstChild != undefined) {
                        $("#colour_" + number2 + " option[value='" + xmlcolor[0].firstChild.nodeValue + "']").attr("selected", "selected");
                    }
                }
            }
        }
    }
}

// Remove all child objects from a given object
function RemoveChilds(obj) {
    if (obj != null) {
        while (obj.hasChildNodes()) {
            obj.removeChild(obj.firstChild);
        }
    }
}


function openRelated(id, numb, lastselected) {
    pid = id;
    number = numb;
    num = 5;
    if (document.getElementById('colour_' + number).value == "")
        colour = "";
    else
        colour = "/colour/" + document.getElementById('colour_' + number).value;

    if (selectedMeasure != null && selectedMeasure[number] != null)
        measureid = "/measureid/" + selectedMeasure[number];
    else
        measureid = "";

    // Add the last selected property to the url. Note the capital in lastSel.
    var lastsel = '';
    if (lastselected != '' && lastselected != 'undefined')
        lastsel = "/lastSel/" + lastselected;

    var params = new Array();
    params["number"] = number;
    params["pid"] = pid;
    ajaxSendGet('/webshop.aspx/action/related/shopid/' + id + colour + measureid + lastsel, openRelatedDiv, params);

    disablePage(submitRelated);
    openDivPop("related", 800, 600);
    document.getElementById("related").innerHTML = '<div id="relatedarticle"><div id="relatedclose"><a href="Javascript: submitRelated(false)"><img src="/images/closelabel.gif" border=0></a></div><div style="float: left; width: 100%; text-align: center;"><img src="/designimages/web3.0/loading.gif" /></div></div>';
}

function openRelatedDiv(params) {

    document.getElementById("related").innerHTML = params["response"];
    var number = params["number"];
    var pid = params["pid"];

    relatedOpenedID = pid;
    relatedOpenedNR = number;

    $("select.selectboxprod[rel=minimal]").each(function () {
        $(this).change(function () {
            var propID = $(this).attr("name").replace("property", "");

            if ($(this).attr("name") == "property3") {
                $(this).attr("id", "currentRelatedSelectedProperty");
                document.getElementById('colour_' + number).value = $("#currentRelatedSelectedProperty>option:selected").text();
                submitRelated(false, '3');
                openRelated(pid, number, '3');
            }
            else if ($(this).attr("name") == "property5") {
                selectedMeasure[number] = $(this).attr("value");
                submitRelated(false, '5');
                openRelated(pid, number, '5');
            }
            else {
                submitRelated(false, propID);
                openRelated(pid, number, propID);
            }
        });
    });
}

var relatedOpenedID = 0;
var relatedOpenedNR = 0;

function closeRelated() {
    closeDivPop("related");
}

function submitRelated(setCheck, lastProperty) {
    var kleur2 = false;
    var maat2 = false;
    var maat2text = "";

    try {
        kleur2 = document.getElementById('kleurbox2').options[document.getElementById('kleurbox2').selectedIndex].value;
        for (var i = 0; i < document.getElementById('colour_' + number).options.length; i++) {
            if (document.getElementById('colour_' + number).options[i].value == kleur2)
                document.getElementById('colour_' + number).options[i].selected = true;
        }
    }
    catch (err) { }

    try {
        maat2 = document.getElementById('maatbox2').options[document.getElementById('maatbox2').selectedIndex].value;
        maat2text = document.getElementById('maatbox2').options[document.getElementById('maatbox2').selectedIndex].innerHTML;
    }
    catch (err) { }

    var hoofdpagina_pic;
    var current_pic;
    try {
        hoofdpagina_pic = document.getElementById("relatedpic_" + number);
        current_pic = document.getElementById("picpopup");

        if (hoofdpagina_pic != null && current_pic != null) {
            var imgW = $("a#relatedpic_" + number + ">img").width();
            var imgH = $("a#relatedpic_" + number + ">img").height();
            var ihtml = "<img src=\"" + current_pic.src + "\" border=\"0\"/>";
            ihtml = ihtml.replace("/org/", "/");
            hoofdpagina_pic.innerHTML = ihtml;
            $("a#relatedpic_" + number + ">img").width(imgW);
            $("a#relatedpic_" + number + ">img").height(imgH);
        }
    }
    catch (err) { }

    try {
        maat2 = $("select[name='property5'][rel='minimal'] option:selected").val();
        maat2text = $("select[name='property5'][rel='minimal'] option:selected").text();
    }
    catch (err) { }

    if (setCheck)
        document.getElementById('mee_' + number).checked = true;

    setMeasure(document.getElementById('p_' + number).value, number, maat2, maat2text, false);

    $("#measure_" + number).val(maat2);

    changeprice(pid, number, lastProperty);
    closeRelated();
}

function rel_Change() {
    // 4 = "loaded"
    if (xmlhttp.readyState == 4) {
        // 200 = "OK"
        if (xmlhttp.status == 200) {
            strtext = xmlhttp.responseText;

            document.getElementById('related').innerHTML = strtext;
            if (document.getElementById("kleurbox2") != null) {
                if (document.getElementById("kleurbox2").options.length <= 0)
                    document.getElementById("kleur2").style.display = 'none';
                else if (document.getElementById("kleurbox2").options.length == 1) {
                    var temp = document.getElementById("kleurbox2").options[0].text;
                    temp = temp + '<input type="hidden" name = "kleur" id="kleurbox2" value="' + document.getElementById("kleurbox2").options[0].value + '">';
                    document.getElementById("kleurtd2").innerHTML = temp;
                }
            }

            if (document.getElementById("maatbox2").options.length <= 0)
                document.getElementById("maat2").style.display = 'none';
            else if (document.getElementById("maatbox2").options.length == 1) {
                var temp = document.getElementById("maatbox2").options[0].text;
                temp = temp + '<input type="hidden" name = "maat" id="maatbox2" value="' + document.getElementById("maatbox2").options[0].value + '">';
                document.getElementById("maattd2").innerHTML = temp;
            }

            if ('{brand}' == '')
                document.getElementById("merktr2").style.display = 'none';
        }
    }
}

/* Reload the product detail. */
function reloadProductDetail(propid) {
    var url = "";

    var id = document.getElementById("shopid").value;
    var aid = document.getElementById("shopart").value;

    /* Get all properties within the related article div and put them in the url.*/
    var props = $("#productdetail_form select[name*=property]");

    for (i = 0; i < props.length; i++)
        url += "/" + props[i].name + "/" + props[i].value;

    if (propid != null && propid != 'undefined')
        url += "/lastSel/" + propid;

    url += "/ajax/1";

    var args = new Array();
    args["id"] = id;
    args["vars"] = url;

    ajaxSendGet("/webshop.aspx/action/showdetail/shopid/" + id + url, fillProductDetail, args);
}

/* Fill the product detail. */
function fillProductDetail(params) {
    if (params["response"].indexOf("<form") >= 0)
        $("#webshop").html(params["response"]);
    else
        $("#productdetail_container").html(params["response"]);

    if ($("#review_left") != null && $("#review_right") != null) {
        var left_height = $("#review_left").height();
        var right_height = $("#review_right").height();

        if (left_height > right_height)
            $("#review_right").height(left_height);
        else if (right_height > left_height)
            $("#review_left").height(right_height);
    }

    /* Set the events for the product detail properties. */
    setProductDetailEvents();

    /* Set lightbox on photos */
    setSlimbox();
}

function addArticleToCart() {
    /* Set initial variables */
    var shopURL = "";
    var shopid = -1;
    var articleID = -1;

    /* get shopurl */
    if ($("#shopurl").val() != undefined)
        shopURL = $("#shopurl").val();

    /* get shopid */
    if ($("#shopid").val() != undefined)
        shopid = $("#shopid").val();

    /* get shopart */
    if ($("#shopart").val() != undefined)
        articleID = $("#shopart").val();

    /* check if needed values are set */
    if ((shopid > -1) && (articleID > 0)) {
        /* set webshop action and perform submit */
        document.webshop.action = shopURL + '/Webshop.aspx/shopmode/addcart/shopid/' + shopid + '/shopart/' + articleID;
        document.webshop.submit();
    }
    else
    /* shopid or articleid missing, show message */
        alert('Geen artikel om toe te voegen.');
}