function toggleFilterAcces(blnActivate) {
    if (blnActivate) {
        $("cmbSegment").set('disabled', false);
        $("cmbKleur").set('disabled', false);
        $("cmbBloemtype").set('disabled', false);
        $("cmbNieuw").set('disabled', false);
    } else {
        $("cmbSegment").set('disabled', true);
        $("cmbKleur").set('disabled', true);
        $("cmbBloemtype").set('disabled', true);
        $("cmbNieuw").set('disabled', true);
    }
}

function setCookie(name, value, page) {
    if (page) {
        sessvars.page = page;
    }
    if (name.toLowerCase() == 'bdpi1dt1_page') {
        sessvars.page = value;
    }
    if (name.toLowerCase() == 'segment') {
        sessvars.segment = value;
    }
    if (name.toLowerCase() == 'kleur') {
        sessvars.kleur = value;
    }
    if (name.toLowerCase() == 'bloemtype') {
        sessvars.type = value;
    }
    if (name.toLowerCase() == 'nieuw') {
        sessvars.nieuw = value;
    }
    if (value == '') {
        ComboboxData(name.toLowerCase());
    }

    ProductsAjax();
}

function Reset(blnUpdateProducts) {
    var SelBoxS = $("cmbSegment");
    var SelBoxK = $("cmbKleur");
    var SelBoxT = $("cmbBloemtype");
    var SelBoxN = $("cmbNieuw");

    //Clear selected values
    selectByValue(SelBoxS, "", "");
    selectByValue(SelBoxK, "", "");
    selectByValue(SelBoxT, "", "");
    selectByValue(SelBoxN, "", "");

    //Unset Cookie
    sessvars.page = '';
    sessvars.segment = '';
    sessvars.kleur = '';
    sessvars.type = '';
    sessvars.nieuw = '';

    //Update ComboboxData and reload products
    if (blnUpdateProducts) {
        ComboboxData("all");
        ProductsAjax();
    }
}

function getURLParam(strParamName) {
    var strReturn = "";
    var strHref = window.location.href;
    if (strHref.indexOf("?") > -1) {
        var strQueryString = strHref.substr(strHref.indexOf("?")).toLowerCase();
        var aQueryString = strQueryString.split("&");
        for (var iParam = 0; iParam < aQueryString.length; iParam++) {
            if (aQueryString[iParam].indexOf(strParamName.toLowerCase() + "=") > -1) {
                var aParam = aQueryString[iParam].split("=");
                strReturn = aParam[1];
                break;
            }
        }
    }
    return unescape(strReturn);
}

function ProductsAjax() {
    if ($('prods')) {
        $(document.body).getElement('.pnl_assor_left_element').set('style', 'display:none;');
        $('loader').set('style', 'display:block;');
    }
    var FilterS = $(document.body).getElement('a.SegmentFilter');
    var FilterK = $(document.body).getElement('a.KleurFilter');
    var FilterT = $(document.body).getElement('a.TypeFilter');
    var FilterN = $(document.body).getElement('a.NieuwFilter');
    var FilterQ = $(document.body).getElement('a.qFilter');
    var SelBoxS = $("cmbSegment");
    var SelBoxK = $("cmbKleur");
    var SelBoxT = $("cmbBloemtype");
    var SelBoxN = $("cmbNieuw");
    var segment, kleur, type, nieuw, page, langid = 0;
    var ArrayFilters = [
        [segment, FilterS, SelBoxS, sessvars.segment],
        [kleur, FilterK, SelBoxK, sessvars.kleur],
        [type, FilterT, SelBoxT, sessvars.type],
        [nieuw, FilterN, SelBoxN, sessvars.nieuw]];
    var ArrayRest = [
        [page, sessvars.page],
        [langid, sessvars.langid]];

    ArrayFilters.each(function (item, index) {
        if (item[3] != '') {
            item[0] = item[3];
            selectByValue(item[2], item[3], item[1]);
            if (item[1] != null) {
                item[1].setStyle('display', 'inline');
            }
        } else {
            item[0] = '';
            selectByValue(item[2], segment, item[1]);
            if (item[1] != null) {
                item[1].setStyle('display', 'none');
            }
        }
    });

    ArrayRest.each(function (item, index) {
        if (item[1] != '') {
            item[0] = item[1];
        } else {
            item[0] = '';
        }
    });
    if ($('prods')) {
    var AreaName = $('bdAreaName').get('html');
    AreaName = AreaName.replace(' ','-');
        var req = new Request({
            method: 'get',
            //url: '/Default.aspx',
            url: '/' + AreaName + '/system/productdetails.aspx',
            data: {
                //'ID': '2',
                'bdPI1DT1_Page': ArrayRest[0][0],
                'LangID': ArrayRest[1][0],
                'Segment': ArrayFilters[0][0],
                'Kleur': ArrayFilters[1][0],
                'Type': ArrayFilters[2][0],
                'Nieuw': ArrayFilters[3][0],
                'bdxslonly': 'true'
            },
            onRequest: function () {
                toggleFilterAcces(false); //Temporarly disable the filter until ajax-request is done    
            },
            onComplete: function (response) {
                toggleFilterAcces(true); //Re-enable the filter
                var newprods = new Element('div', {
                    'class': 'prods',
                    'html': response
                });
                $('prods').set('class', "updated");
                $('prods').set('html', newprods.getElement('div.products').get('html'));
                $('results').set('html', newprods.getElement('div.NumResults').get('html'));
				new Fx.Reveal($('results')).reveal();
				new Fx.Reveal($('resulttext')).reveal();
                $('paging_top').set('html', newprods.getElement('div.paging').get('html'));
                $('paging_bot').set('html', newprods.getElement('div.paging').get('html'));
                $(document.body).getElements('a.icon_pers_sel').each(function (prod) {
                    //als in winkelwagen dan addclass 'disabled'
                    $(document.body).getElements('span.cart').each(function (cart) {
                        if (prod.get('productid') == cart.get('productid')) {
                            prod.addClass('selected');
                            prod.set('title', '-');
                            productid = "#" + cart.get('productid');
                            var CartCmd = prod.getParent('div.product_item_cat').getParent('div.product_item').getChildren(productid).getElement('input[name=CartCmd]');
                            var key = prod.getParent('div.product_item').getChildren(productid).getElement('input[name=key]');
                            CartCmd.set('value', 'DelOrderLine');
                            var getKey = cart.get('orderline');
                            key.set('value', getKey);
                        }
                    });
                });
                $('loader').set('style', 'display:none;');
				ComboboxData('all');
				$(document.body).getElements('img.Product_image').each(function (image) {
				new Asset.images(image.get('src'));
				});
                $(document.body).getElement('div.pnl_assor_left_element').set('style', 'display:block;');

            }
        }).send();
    }

}

function ComboboxData(data) {
    var FilterS = $(document.body).getElement('a.SegmentFilter');
    var FilterK = $(document.body).getElement('a.KleurFilter');
    var FilterT = $(document.body).getElement('a.TypeFilter');
    var FilterN = $(document.body).getElement('a.NieuwFilter');
    var FilterQ = $(document.body).getElement('a.qFilter');
    var SelBoxS = $("cmbSegment");
    var SelBoxK = $("cmbKleur");
    var SelBoxT = $("cmbBloemtype");
    var SelBoxN = $("cmbNieuw");
    var segment, kleur, type, nieuw;
    var ArrayFilters = [
        [segment, sessvars.segment, "segment", FilterS, SelBoxS],
        [kleur, sessvars.kleur, "kleur", FilterK, SelBoxK],
        [type, sessvars.type, "bloemtype", FilterT, SelBoxT],
        [nieuw, sessvars.nieuw, "nieuw", FilterN, SelBoxN]];

    ArrayFilters.each(function (item, index) {
        if (item[1] != '') {
            item[0] = item[1];
        } else {
            item[0] = '';
        }
    });
	
    var req = new Request({
        method: 'get',
        url: '/Default.aspx',        
        data: {
            'ID': '42',
			'LangID': sessvars.langid,
            'Segment': ArrayFilters[0][0],
            'Kleur': ArrayFilters[1][0],
            'Type': ArrayFilters[2][0],
            'Nieuw': ArrayFilters[3][0],
            'bdxslonly': 'true'
        },
        onRequest: function () {
            toggleFilterAcces(false); //Temporarly disable the filter until ajax-request is done    
        },
        onComplete: function (response) {
            toggleFilterAcces(true);
            var result = new Element('div', {
                'class': 'combobox',
                'html': response
            });
            if (result.getElement("div.rows").get('html') != 0) {
			$('results').set('html',result.getElement("div.rows").get('html'));
			new Fx.Reveal($('results')).reveal();
			new Fx.Reveal($('resulttext')).reveal();
			//$('results').set('style','display:block');
			//$('resulttext').set('style','display:block');
                var segments = result.getElements('div.segment');
                var colors = result.getElements('div.color');
                var types = result.getElements('div.type');
                var news = result.getElements('div.new');
                if (!segment) {
                    if ((data == 'segment') || (data == 'all')) {
                        var cb_segment = new Array();
                        cb_segment[0] = new Option($('cmbSegment').options[0].text, "");						

                        segments.each(function (element, index) {
                            var name = element.getElement('div.name').get('html');
                            var value = element.getElements('div.value').get('html');
                            cb_segment[index + 1] = new Option(name, value);

                        });
                        for (i = SelBoxS.options.length; i > 0; i--) {
                            SelBoxS.options[i] = null; //Delete option
                        }

                        for (i = 0; i < cb_segment.length; i++) {

                            if (cb_segment.length > 2){
								SelBoxS.options[i] = cb_segment[i];
								SelBoxS.set('disabled', false);
							}
							else{
								SelBoxS.options[i] = null;
								SelBoxS.options[i] = cb_segment[i];
								SelBoxS.options[i].selected = "1";
								SelBoxS.set('disabled', true);
								
								}
                        }
                    }
                }
                if (!kleur) {
                    if ((data == 'kleur') || (data == 'all')) {
                        var cb_kleur = new Array;
                        cb_kleur[0] = new Option($('cmbKleur').options[0].text, "");	
						
                        colors.each(function (element, index) {
                           var name = element.getElement('div.name').get('html');
                            var value = element.getElements('div.value').get('html');
                            cb_kleur[index + 1] = new Option(name, value);

                        });
                        for (i = SelBoxK.options.length; i > 0; i--) {
                            SelBoxK.options[i] = null;
                        }

                        for (i = 0; i < cb_kleur.length; i++) {
                            if (cb_kleur.length > 2){
								SelBoxK.options[i] = cb_kleur[i];
								SelBoxK.set('disabled', false);
								
							}
							else{
								SelBoxK.options[i] = null;
								SelBoxK.options[i] = cb_kleur[i];
								SelBoxK.options[i].selected = "1";
                                SelBoxK.set('disabled', true);
								}
                        }
                    }
                }
                if (!type) {
                    if ((data == 'bloemtype') || (data == 'all')) {
                        var cb_type = new Array;
                        cb_type[0] = new Option($('cmbBloemtype').options[0].text, "");	
						
						types.each(function (element, index) {
                           var name = element.getElement('div.name').get('html');
                            var value = element.getElements('div.value').get('html');
                            cb_type[index + 1] = new Option(name, value);

                        });
                        for (i = SelBoxT.options.length; i > 0; i--) {
                            SelBoxT.options[i] = null;
                        }

                        for (i = 0; i < cb_type.length; i++) {
                            if (cb_type.length > 2){
								SelBoxT.options[i] = cb_type[i];
								SelBoxT.set('disabled', false);
							}
							else{
								SelBoxT.options[i] = null;
                                SelBoxT.options[i] = cb_type[i];
								SelBoxT.options[i].selected = "1";
								SelBoxT.set('disabled', true);
								}
                        }
                    }
                }
                if (!nieuw) {
                    if ((data == 'nieuw') || (data == 'all')) {
                        var cb_nieuw = new Array;
                        cb_nieuw[0] = new Option($('cmbNieuw').options[0].text, "");	
						
                        news.each(function (element, index) {
                           var name = element.getElement('div.name').get('html');
                            var value = element.getElements('div.value').get('html');
                            cb_nieuw[index + 1] = new Option(name, value);

                        });
                        for (i = SelBoxN.options.length; i > 0; i--) {
                            SelBoxN.options[i] = null;
                        }

                        for (i = 0; i < cb_nieuw.length; i++) {
                            if (cb_nieuw.length > 2){
								SelBoxN.options[i] = cb_nieuw[i];
								SelBoxN.set('disabled', false);
							}
							else{
								SelBoxN.options[i] = null;
								SelBoxN.options[i] = cb_nieuw[i];
								SelBoxN.options[i].selected = "1";
                                SelBoxN.set('disabled', true);
								}
                        }
                    }
                }
                selectByValue(SelBoxS, segment, FilterS);
                selectByValue(SelBoxK, kleur, FilterK);
                selectByValue(SelBoxN, nieuw, FilterN);
                selectByValue(SelBoxT, type, FilterT);
            }
        }

    }).send();
}

function selectByValue(select, value, filter) {
    //alert("select: " + select + " value: " + value + " filter: " + filter);      
    
    if (select != null) {
        for (var i = 0; i < select.options.length; i++) {
            if (value == select.options[i].value) {
                select.selectedIndex = i;
                if (filter) {
                    filter.set('html', $('label_' + select.get('name')).get('html') + ": " + select.options[i].text);
                }
                break; // Break out to stop at the first value
            }
        }
    }
}

function refreshSelectItems(el, event, pagina) {
    var FilterS = $(document.body).getElement('a.SegmentFilter');
    var FilterK = $(document.body).getElement('a.KleurFilter');
    var FilterT = $(document.body).getElement('a.TypeFilter');
    var FilterN = $(document.body).getElement('a.NieuwFilter');
    var FilterQ = $(document.body).getElement('a.qFilter');
    var SelBoxS = $("cmbSegment");
    var SelBoxK = $("cmbKleur");
    var SelBoxT = $("cmbBloemtype");
    var SelBoxN = $("cmbNieuw");
    if (pagina) {
        sessvars.page = '1';
    }
    if (sessvars.segment != '') {
        var segment = sessvars.segment;
    } else {
        var segment = '';
    }

    if (sessvars.kleur != '') {
        var kleur = sessvars.kleur;
    }
    else {
        var kleur = '';
    }

    if (sessvars.type != '') {
        var type = sessvars.type;
    }
    else {
        var type = '';
    }

    if (sessvars.nieuw != '') {
        var nieuw = sessvars.nieuw;
    }
    else {
        var nieuw = '';
    }

    var req = new Request({
        method: 'get',
        url: '/Default.aspx',
        data: {
            'ID': '42',
            'LangID': sessvars.langid,
            'Segment': segment,
            'Kleur': kleur,
            'Type': type,
            'Nieuw': nieuw,
            'bdxslonly': 'true'
        },

        onSuccess: function (response) {
            var result = new Element('div', {
                'class': 'combobox',
                'html': response
            });

            if (result.getElement("div.rows").get('html') != 0) {
			$('results').set('html',result.getElement("div.rows").get('html'));
			new Fx.Reveal($('results')).reveal();
			new Fx.Reveal($('resulttext')).reveal();
			
                var segments = result.getElements('div.segment');
                var colors = result.getElements('div.color');
                var types = result.getElements('div.type');
                var news = result.getElements('div.new');
                if (SelBoxS) {
                    if ((el != SelBoxS) || (segment == '')) {

                        var cb_segment = new Array;
                        cb_segment[0] = new Option($('cmbSegment').options[0].text, "");						

                        segments.each(function (element, index) {
                            var name = element.getElement('div.name').get('html');
                            var value = element.getElements('div.value').get('html');
                            cb_segment[index + 1] = new Option(name, value);

                        });
                        for (i = SelBoxS.options.length; i > 0; i--) {
                            SelBoxS.options[i] = null;
                        }

                        for (i = 0; i < cb_segment.length; i++) {
						if (cb_segment.length > 2){
								SelBoxS.options[i] = cb_segment[i];
								SelBoxS.set('disabled', false);
							}
							else{
							SelBoxS.options[i] = null;
							SelBoxS.options[i] = cb_segment[i];
							SelBoxS.options[i].selected = "1";
								SelBoxS.set('disabled', true);
								}
                            
                        }

                    }
                }
                if (SelBoxK) {
                    if ((el != SelBoxK) || (kleur == '')) {
                        var cb_kleur = new Array;
                        cb_kleur[0] = new Option($('cmbKleur').options[0].text, "");
						
                        colors.each(function (element, index) {
                            var name = element.getElement('div.name').get('html');
                            var value = element.getElements('div.value').get('html');
                            cb_kleur[index + 1] = new Option(name, value);

                        });
                        for (i = SelBoxK.options.length; i > 0; i--) {
                            SelBoxK.options[i] = null;
                        }

                        for (i = 0; i < cb_kleur.length; i++) {
						if (cb_kleur.length > 2){
								SelBoxK.options[i] = cb_kleur[i];
								SelBoxK.set('disabled', false);
								
							}
							else{
								SelBoxK.options[i] = null;
								SelBoxK.options[i] = cb_kleur[i];
								SelBoxK.options[i].selected = "1";
                                SelBoxK.set('disabled', true);
								}
                            
                        }

                    }
                }
                if (SelBoxT) {
                    if ((el != SelBoxT) || (type == '')) {
                        var cb_type = new Array;
                        cb_type[0] = new Option($('cmbBloemtype').options[0].text, "");						

                        types.each(function (element, index) {
                            var name = element.getElement('div.name').get('html');
                            var value = element.getElements('div.value').get('html');
                            cb_type[index + 1] = new Option(name, value);

                        });
                        for (i = SelBoxT.options.length; i > 0; i--) {
                            SelBoxT.options[i] = null;
                        }

                        for (i = 0; i < cb_type.length; i++) {
						if (cb_type.length > 2){
								SelBoxT.options[i] = cb_type[i];
								SelBoxT.set('disabled', false);
							}
							else{
								SelBoxT.options[i] = null;
                                SelBoxT.options[i] = cb_type[i];
								SelBoxT.options[i].selected = "1";
								SelBoxT.set('disabled', true);
								}
                         
                        }

                    }
                }
                if (SelBoxN) {
                    if ((el != SelBoxN) || (nieuw == '')) {
                        var cb_nieuw = new Array;
                        cb_nieuw[0] = new Option($('cmbNieuw').options[0].text, "");
                                              
                        
                        news.each(function (element, index) {
                            var name = element.getElement('div.name').get('html');
                            var value = element.getElements('div.value').get('html');
                            cb_nieuw[index + 1] = new Option(name, value);

                        });
                        for (i = SelBoxN.options.length; i > 0; i--) {
                            SelBoxN.options[i] = null;
                        }

                        for (i = 0; i < cb_nieuw.length; i++) {
						if (cb_nieuw.length > 2){
						SelBoxN.options[i] = cb_nieuw[i];
								SelBoxN.set('disabled', false);
							}
							else{
							SelBoxN.options[i] = null;
							SelBoxN.options[i] = cb_nieuw[i];
							SelBoxN.options[i].selected = "1";
                                SelBoxN.set('disabled', true);
								}
                         
                           
                        }

                    }
                }
                selectByValue(SelBoxT, type, FilterT);
                selectByValue(SelBoxK, kleur, FilterK);
                selectByValue(SelBoxN, nieuw, FilterN);
                selectByValue(SelBoxS, segment, FilterS);

            }
        }
    }).send();
}

window.addEvent('domready', function() {
    
    //sessvars.$.debug(); //Session variable debug
	
    var testTT = $(document.body).getElement('.TooltipData');
    if (testTT) {
        testTT.setStyle('display', 'none');
    }
	if($('langid')){
		var language = $('langid').get('html');
		sessvars.langid = "LANG" + language;
	}

    if ($(document.body).getElement('div.filter')) {
	if (!$('prods')) {
        ComboboxData("all");
		}
        var selects = $(document.body).getElements('select.filter_cmb_box');
        selects.each(function (el) {
            el.addEvent('change', function (event) {
			if (!$('prods')) {
                refreshSelectItems(el, event, '1');
				}
            });

        });
    }

    //Add onclick event filterboxes (Segments)
    var filterboxes = $(document.body).getElements('div.product_image_filter');
    filterboxes.each(function (el) {
        el.addEvent('click', function (event) {
            var groupid = el.get('groupid');
            Reset(false); //reset cookie without a refresh
            setCookie('segment', groupid, '1');
			if (!$('prods')) {
            refreshSelectItems(el, event, '1');
			}
        });
    });

    if ($('form_product_searchform')) {
        $('form_product_searchform').addEvent('submit', function (event) {
            Reset(false);
            $('form_product_searchform').submit();
        });
    }
    var queryGroupID = getURLParam('GroupID');
    var querySearch = getURLParam('q');
	var queryPage = getURLParam('page');
    var query = queryGroupID + querySearch + queryPage;
    if ((query == '')) {
        if ((sessvars.segment != '' && sessvars.segment != null) || (sessvars.kleur != '' && sessvars.kleur != null) || (sessvars.type != '' && sessvars.type != null) || (sessvars.nieuw != '' && sessvars.nieuw != null)) {
            if ($('prods')) {
                ProductsAjax();
            }
        }

    }
    if ($(document.body).getElements('a.icon_pers_sel')) {
        $(document.body).getElements('a.icon_pers_sel').each(function (prod) {
            //als in winkelwagen dan addclass 'disabled'
            $(document.body).getElements('span.cart').each(function (cart) {
                if (prod.get('productid') == cart.get('productid')) {
                    prod.addClass('selected');
                    prod.set('title', '-');
                    productid = "#" + cart.get('productid');
                    var CartCmd = prod.getParent('div.product_item_cat').getParent('div.product_item').getChildren(productid).getElement('input[name=CartCmd]');
                    var key = prod.getParent('div.product_item').getChildren(productid).getElement('input[name=key]');
                    CartCmd.set('value', 'DelOrderLine');
                    var getKey = cart.get('orderline');
                    key.set('value', getKey);
                }
                else {

}
            });
        });
    }
    //store titles and text
    new MooTooltips({
        hovered: '.tipz',
        // the element that when hovered shows the tip
        ToolTipClass: 'TooltipData',
        // tooltip display class
        toolTipPosition: 1,
        // -1 top; 1: bottom - set this as a default position value if none is set on the element
        showDelay: 100,
        sticky: false,
        // remove tooltip if closed
        fromTop: 0,
        // distance from mouse or object
        fromLeft: -55,
        // distance from left
        duration: 300,
        // fade effect transition duration
        fadeDistance: -20 // the distance the tooltip starts the morph
    });

});