var minPrijs;
var maxPrijs;
var menuId;
var merk;
var Filter2Min = -1;
var Filter2Max = -1;
var SortType = ''; // 'verkoopprijs ';
var SortOrder = ''; // 'ASC';
var hostname = 'http://www.modern.nl/';
var ProductData;
var Start = 0;
var Records = 0;
var site = {};
var minPrijsId = '';
var maxPrijsId = '';
var GFKMin = '';
var GFKMax = '';
var sliding = false;

site.init = function () {
    if (window.addEventListener) {
        window.addEventListener('load', function (a) {
            clearMerk();
            checkHash();
            getProducts();
        }, false);
    }
    if (window.ActiveXObject) {
        window.attachEvent('onload', function (a) {
            clearMerk();
            checkHash();
            getProducts();
        });
    }
};

function clearMerk() {
    var CHK = document.getElementById(merk);
    if (CHK != null) {
        MerkList = '';
        var checkbox = CHK.getElementsByTagName("input");
        var label = CHK.getElementsByTagName("label");
        for (var i = 0; i < checkbox.length; i++) {
            checkbox[i].checked = false;
        }
    }
}

function checkHash() {
    if (document.location.hash.length > 0) {
		setElements();
    }
    return false;
}



function getCurrentHash() {
    CheckMerk();
    minPrijs = Math.floor(minPrijs);
    maxPrijs = Math.ceil(maxPrijs);
    Filter2Max = Math.ceil(Filter2Max);
    Filter2Min = Math.floor(Filter2Min)
    var myHash = minPrijs + '-' + maxPrijs + ';' + SortType + '-' + SortOrder + ';' + MerkList + ';' + Filter2Min + '-' + Filter2Max;
    return myHash
}

function setElements() {
    var parameters = unescape(document.location.hash.substring(1)).split(";");
    if (parameters.length == 4) {
        if (parameters[0].indexOf("-") >= 0) {
            var prijs = parameters[0].split("-");
        }
        if (parameters[1].indexOf("-") >= 0) {
            var Sort = parameters[1].split("-");
        }
        if (parameters[3].indexOf("-") >= 0) {
            var Filter = parameters[3].split("-");
        }
        if (parameters[0].indexOf("_") >= 0) {
            var prijs = parameters[0].split("_");
        }
        if (parameters[1].indexOf("_") >= 0) {
            var Sort = parameters[1].split("_");
        }
        if (parameters[3].indexOf("_") >= 0) {
            var Filter = parameters[3].split("_");
        }
        var Merken = parameters[2].split("|");
        minPrijs = prijs[0];
        maxPrijs = prijs[1];
        SortType = Sort[0];
        SortOrder = Sort[1];
        Filter2Min = Filter[0];
        Filter2Max = Filter[1];
        SetMerk(Merken);
        setSliderFilter1(parseInt(minPrijs), parseInt(maxPrijs));
        if ($get('dualSliderFilter2') != null) {
        setSliderFilter2(parseInt(Filter2Min), parseInt(Filter2Max));
        }
        getProducts();
    }
    
}

function getHeight() {
    var d = document.documentElement;
    var b = document.body;
    var who = d.offsetHeight ? d : b;
    //return Math.max(who.scrollHeight, who.offsetHeight);
    //   return who.scrollHeight;
    return d.scrollTop;
}

function getProducts() {
    //   ret = Products.GetProducts(menuId, MerkList, minPrijs, maxPrijs, Filter2Min, Filter2Max, SortOrder, SortType, Start, Records, renderProducts, onTimeout, onError);
    var webMethod = "/Service/Products.asmx/GetProducts";
    var parameters = "{'Catid':'" + menuId + "','Merk':'" + MerkList + "','MinPrijs':'" + minPrijs + "','Maxprijs':'" + maxPrijs + "','Filter2Min':'-1','Filter2Max':'-1','SortOrder':'" + SortOrder + "','SortType':'" + SortType + "','Start':'" + Start + "','Records':'" + Records + "'}";
 jQuery.ajax({
     type: "POST",
     url: webMethod,
     data: parameters,
     contentType: "application/json; charset=utf-8",
     dataType: "json",
     success: function (msg) {
         renderProducts(msg.d);
     },
     error: function (e) {
      //   alert('Error');
     }
 });
}

function onTimeout() {
//alert('Timeout');
}


function setHash() {
    CheckMerk();
/*    minPrijs = Math.floor(minPrijs);
    maxPrijs = Math.ceil(maxPrijs);*/
    Filter2Max = Math.ceil(Filter2Max);
    Filter2Min = Math.floor(Filter2Min)
  // alert(dualSliderFilter1.getRange(0).max());
    minPrijs = Math.floor(dualSliderFilter1.getRange(0).min());
    maxPrijs = Math.ceil(dualSliderFilter1.getRange(0).max());
    var myHash = minPrijs + '-' + maxPrijs + ';' + SortType + '-' + SortOrder + ';' + MerkList + ';' + Filter2Min + '-' + Filter2Max;
    $get('hash').value = myHash;

    document.location = "#" +  escape(myHash);
    checkHash();
}

function setmaxPrijs(sender, eventArgs) {
    var item = eventArgs.get_item();
    maxPrijs = item.get_value();
    setHash();
}

function setminPrijs(sender, eventArgs) {
    var item = eventArgs.get_item();
    minPrijs = item.get_value();
    setHash();
}

function SortPrijs() {
    SortType = 'verkoopprijs ';
    $get('Image3').style.display = 'none';
    if ($get('Image2').style.display == 'none') {
        $get('Image2').style.display = 'inline';
        if ($get('Image2').src.indexOf('/images/asc.gif',0) >= 0) {
            SortOrder = 'asc'
        } else {
            SortOrder = 'desc'
        }
    } else {
        if ($get('Image2').src.indexOf('/images/asc.gif',0) >= 0) {
            $get('Image2').src = '/images/desc.gif';
            SortOrder = 'desc'
        } else {
            $get('Image2').src = '/images/asc.gif';
            SortOrder = 'asc'
        }
    }
    setHash();
}


function SortMerk() {
    SortType = 'merk ';
    $get('Image2').style.display = 'none';
    if ($get('Image3').style.display == 'none') {
        $get('Image3').style.display = 'inline';
        if ($get('Image3').src.indexOf('/images/asc.gif',0) >= 0) {
            SortOrder = 'asc'
        } else {
            SortOrder = 'desc'
        }
    } else {
        if ($get('Image3').src.indexOf('/images/asc.gif', 0) >= 0) {
            $get('Image3').src = '/images/desc.gif';
            SortOrder = 'desc'
        } else {
            $get('Image3').src = '/images/asc.gif';
            SortOrder = 'asc'
        }
    }
    setHash();
}


function onError() {
//alert('Error');
}

var MerkList = new String('');

function CheckMerk() {
    var CHK = document.getElementById(merk);
    if (CHK != null) {
        MerkList = '';
        var checkbox = CHK.getElementsByTagName("input");
        var label = CHK.getElementsByTagName("label");
        for (var i = 0; i < checkbox.length; i++) {
            if (checkbox[i].checked) {
                MerkList += '|' + label[i].innerHTML.substring(0, label[i].innerHTML.indexOf('(') - 1);
            }
        }
        if (MerkList.length > 0) {
            MerkList = MerkList.substring(1);
        }
    }
}

function SetMerk(Merken) {
    var strMerk = Merken.toString();
    var CHK = document.getElementById(merk);
    if (CHK != null) {
        MerkList = '';
        var checkbox = CHK.getElementsByTagName("input");
        var label = CHK.getElementsByTagName("label");
        for (var i = 0; i < checkbox.length; i++) {
            if (strMerk.indexOf(label[i].innerHTML.substring(0, label[i].innerHTML.indexOf('(') - 1)) >= 0) {
                checkbox[i].checked = true;
                MerkList += '|' + label[i].innerHTML.substring(0, label[i].innerHTML.indexOf('(') - 1);
            }
            else {
                checkbox[i].checked = false;
            }
        }
        if (MerkList.length > 0) {
            MerkList = MerkList.substring(1);
        }
    }
}


function renderProducts(Result) {
    var ProductHTML = '';
    var USPText = '';
    if (Result == 'no records found') {
        loadinfo('590', 'content');
        return;
    }
    ProductData = JSON.parse(Result);
    if (ProductData.length > 0) {
        var Aantal = $get('ctl00_Main_Label1');
        if (Aantal != null) {
            Aantal.innerHTML = ' (' + ProductData.length + ')';
        }
//        ProductHTML += '<div id="VergelijkKop" class="PoVergelijkDiv">';
//        ProductHTML += '<img id="ButVergelijk1" onClick="return DoVergelijk();" src="/images/VergelijkButton.gif" class="PoVergelijkButOnder" />';
//        ProductHTML += '</div>';
//        ProductHTML += '<div class="ProductOvBox">';
        for (i = 0; i < ProductData.length; i++) {
            ProductHTML += '<div class="ProductenBack">';
            if (ProductData[i].Volgorde <= 6) {
                ProductHTML += '<div class="ProductenAanbevolenFrame"></div>';
                ProductHTML += '    <img class="Aanbevolen" src="/images/aanbevolen.png" />';
            } 
            ProductHTML += '      	<span  class="POTitelTekst"><a href="' + ProductData[i].URL + '"><H2>' + ProductData[i].Merk + ' ' + ProductData[i].Typenummer + ' - ' + ProductData[i].categorie + '</H2></a></span>';
            ProductHTML += '		<div class="POWinkelWagenBtn">';
//            ProductHTML += '			<a href="#" onclick="AddToBasket(\'' + ProductData[i].Artikelnummer + '\',\'\'); return false;"><img alt="Toevoegen aan winkelwagen" border="0" src="/Images/buttons/BestelAanbieding.gif" style="border-width:0px;" /></a>';
            ProductHTML += '			<a href="' + ProductData[i].URL + '"><img alt="Meer informatie" border="0" src="/Images/buttons/Bekijkbutton.png" style="border-width:0px;" /></a>';
            ProductHTML += '       	</div>';
            if (ProductData[i].KlantReview  > 0) {
                ProductHTML += '    <div class="PoKlantBeoordelingTxt">Klantbeoordeling:</div><div class="PoKlantBeoordeling">' + String(Number(ProductData[i].KlantReview).toPrecision(2)).replace(".",",") + '</div>';
            }
            ProductHTML += '        <div class="POMainImageHolder">';
            ProductHTML += '			<img title="' + ProductData[i].Merk + ' ' + ProductData[i].Typenummer + ' - ' + ProductData[i].categorie + '" src="' + ProductData[i].ImgURL + '" style="border-width:0px;" />';
            ProductHTML += '       	</div>';
            ProductHTML += '        <div class="POUsps">';
            ProductHTML += '			<span>';
            USPText = GetUSPText(ProductData[i]);
            ProductHTML += USPText;
            ProductHTML += '            </span>&nbsp;';
            if (USPText.length > 0) {
                ProductHTML += '			    <a href="' + ProductData[i].URL + '">Meer informatie</a>';
            }
            ProductHTML += '		</div>';
            if (trim(ProductData[i].VIMAGE1).length > 0) {
                ProductHTML += '	<div class="POPictoHolder1"><img src="' + hostname + 'producten/Modernpicto/' + ProductData[i].VIMAGE1 + '" alt="Klik hier voor meer informatie" /></div>';
            }
            if (trim(ProductData[i].VIMAGE2).length > 0) {
                ProductHTML += '       	<div class="POPictoHolder2"><img src="' + hostname + 'producten/Modernpicto/' + ProductData[i].VIMAGE2 + '" alt="Klik hier voor meer informatie" /></div>';
            }
            if (trim(ProductData[i].VIMAGE3).length > 0) {
                ProductHTML += '       	<div class="POPictoHolder3"><img src="' + hostname + 'producten/Modernpicto/' + ProductData[i].VIMAGE3 + '" alt="Klik hier voor meer informatie" /></div>';
            }
            if (trim(ProductData[i].VIMAGE4).length > 0) {
                ProductHTML += '		<div class="POPictoHolder4"><img src="' + hostname + 'producten/Modernpicto/' + ProductData[i].VIMAGE4 + '" alt="Klik hier voor meer informatie" /></div>    ';
            }
            ProductHTML += '	      <div class="POPrijs">Nu &euro;&nbsp;' + getPrijs(ProductData[i].verkoopprijs) + '</div>';
            if (ProductData[i].MaandBedrag.length > 0) {
                ProductHTML += '		<div class="POPerMaandPrijs">' + ProductData[i].MaandBedrag + '</div>';
            }
            ProductHTML += '	      <span class="PoDeskundig"></span>';

            if (ProductData[i].Beschikbaarheid.indexOf("mogelijke levertijd") < 0) {
                ProductHTML += '		<div class="PoVoorraad"><span class="lblVoorraad">' + ProductData[i].Beschikbaarheid + '</span></div>';
            } else {
            var hulp = ProductData[i].Beschikbaarheid.split(":");
                ProductHTML += '		<div class="PoVoorraad"><span class="lblVoorraad">' + hulp[0] + ":<br />" + hulp[1] + '</span></div>';
            }

            
            ProductHTML += '       	<a class="PoOverProduct" href="' + ProductData[i].URL + '"><img src="/images/transppix2.gif" style="border-width:0px;border:none; width:100%; height:100%;" /></a>';
            ProductHTML += '       	<a class="PoOverProduct2" href="' + ProductData[i].URL + '"><img src="/images/transppix2.gif" style="border-width:0px;border:none; width:100%; height:100%;" /></a>';
            if (ProductData[i].HasGfkData == true && ProductData.length > 1) {
                ProductHTML += '       	<span class="PoVergelijk"><input class="PoVergelijk" type="checkbox" onclick="VergelijkCheck(\'ctl00_Main_ProductenControl1_dlProducten_ctl' + i + '_VergelijkCheck\', \'' + ProductData[i].Artikelnummer + '\');" id="ctl00_Main_ProductenControl1_dlProducten_ctl' + i + '_VergelijkCheck" ArtNr="' + ProductData[i].Artikelnummer + '" ProdTitle="' + ProductData[i].Merk + ' ' + ProductData[i].Typenummer + ' - ' + ProductData[i].categorie + '" /></span>';
            }
            ProductHTML += '       	       <div class="PoVergelijkLijn"></div>';
            ProductHTML += '</div>';
            ProductHTML += '<div class="ProductenSeparator">&nbsp;</div>';
        }
        Start += Records;
//        ProductHTML += '</div>';
//        ProductHTML += '<div id="VergelijkBottom" class="PoVergelijkDiv">';
//        ProductHTML += '<img class="PoVergelijkOnderStip" src="/images/vergelijkonder.gif" alt="" />';
//        ProductHTML += '<asp:Image ID="ButVergelijk2" runat="server" ImageUrl="/images/VergelijkButton.gif" CssClass="PoVergelijkButOnder" />';
//        ProductHTML += '</div>';
//        ProductHTML += '<div class="clear"></div>';
        $get('divProducts').innerHTML = ProductHTML;

    }
    PositionDiv('ctl00_Main_MiddenCenterContentBottomContent');
    //  $get('ctl00_ContentPlaceHolder1_divProducts').innerHTML = Result;
};

function GetUSPText(row) {
    var ProductHTML = '';
    if (trim(row.USP1).length > 0) {
        ProductHTML += trim(row.USP1) + ', '
    }
    if (trim(row.USP2).length > 0) {
        ProductHTML += trim(row.USP2) + ', '
    }
    if (trim(row.USP3).length > 0) {
        ProductHTML += trim(row.USP3) + ', '
    }
    if (trim(row.USP4).length > 0) {
        ProductHTML += trim(row.USP4) + ', '
    }
    if (trim(row.USP5).length > 0) {
        ProductHTML += trim(row.USP5) + ', '
    }
    if (trim(row.USP6).length > 0) {
        ProductHTML += trim(row.USP6) + ', '
    }
    if (trim(row.USP7).length > 0) {
        ProductHTML += trim(row.USP7) + ', '
    }
    if (trim(row.USP8).length > 0) {
        ProductHTML += trim(row.USP8) + ', '
    }
    if (trim(row.USP9).length > 0) {
        ProductHTML += trim(row.USP9) + ', '
    }
    if (trim(row.USP10).length > 0) {
        ProductHTML += trim(row.USP10) + ', '
    }
    ProductHTML = ProductHTML.substring(0, ProductHTML.length - 2);
    if (ProductHTML.length > 200) {
        ProductHTML = trim(ProductHTML.substring(0, 200)) + '...';
    }
    return ProductHTML;
}

function getPrijs(Prijs) {
    var strPrijs = new String(Prijs);
    if (parseFloat(strPrijs) >= 100) {
        if (strPrijs.indexOf(".") >= 0) {
            return strPrijs.substring(0, strPrijs.indexOf(".")) + ",-";
        } else {
            return strPrijs + ",-";
        }
        return strPrijs + ',-';
    } else {
        return Prijs.toFixed(2).replace(".", ",");
    }
}