EM.ModelSearch = {

    /* init is automatically called by the EM.init function */
    init: function() {
        this.filters = {};
        this.dndInitialized = false;
        this.root = EM.root;
        this.modelHandler = 'pages/v2/ModelHandler.ashx';
        this.modelSearchHandler = 'pages/v2/SearchHandler.ashx';
        this.modelTooltipHandler = 'pages/v2/ModelTooltip.ashx';

        //modify lightbox for drag & drop

        var me = this;

        $(window).bind('resize', function() {
            me.refreshModelList();
        });

        //onSelectedValuesChanged: should run in the scope of the 
        // dropdown/select/input field
        this.onSelectedValuesChanged = function() {
            //console.log(this.className);
            var parent = $(this).parents('.sf_option');
            //  $(this).parents('.sf_option').find('.sf_activate').not('.sf_activate_active').click();  
            if (me.activatedOptions[parent.attr('data-specid')] !== true) {
                parent.find('.sf_activate').not('.sf_activate_active').click();
                me.activatedOptions[parent.attr('data-specid')] = true;
            }

            me.selectedValuesChanged();
        };
        if (EM.msie) {
            $('.modellist').addClass('msie ie' + EM.msieVersion);
        }
        this.placeholder = $('.modellist .first').detach();

        this.moreModelsButton = $('#show_more_models');
        this.initFilters();
        this.initModels();
        this.moreModelsButton.click(function() {
            EM.ModelSearch.nextPage();
        });
        EM.cufonModelSearch();

    },
    refreshComboboxFont: function() {
        Cufon.replace('#searchFilters .combobox .sf_label, #searchFilters .cb_options_panel div');
        if (typeof (setFooterPosition) !== 'undefined') {
            setFooterPosition();
        }
    },
    refreshSlidersFont: function() {
        Cufon.replace('.slider .sf_value');
        if (typeof (setFooterPosition) !== 'undefined') {
            setFooterPosition();
        }
    },
    initDND: function() {
        if (this.dndInitialized) {
            setTimeout(function() {
                //refresh drag & drop
                EM.ModelSearch.DND.refresh();
            }, 0);
        } else {
            this.dndInitialized = true;
            setTimeout(function() {
                //initialize drag & drop
                EM.ModelSearch.DND.init();
            }, 0);
        }
    },
    initModels: function() {
        var me = this;
        EM.loadJson(me.modelHandler, { 'action': 'load' }, function(data, status, xhr) {
            me.models = data.models;
            me.page = 0;
            me.drawModels(true);
            me.moreModelsButton.show();
            if (typeof (setFooterPosition) !== 'undefined') {
                setFooterPosition();
            }
        });
        //        $.ajax({
        //            type: 'GET',
        //            dataType: 'json',
        //            data: { 'action': 'load' },
        //            cache: true,
        //            url: EM.root + me.modelHandler,
        //            success: function(data, status, xhr) {
        //                me.models = data.models;
        //                me.page = 0;
        //                me.drawModels(true);
        //                me.moreModelsButton.show();
        //            }
        //        });
    },
    nextPage: function() {
        this.page++;
        this.drawModels(false, true);
    },
    refreshModelList: function() {
        var p = this.page;
        this.page = 0;
        this.drawModels(true, true);
        for (var i = 0; i < p; i++) {
            this.nextPage();
        }
    },
    drawModels: function(clearAll, keepFirst) {
        if (this.models) this._drawModelsImpl(clearAll, keepFirst);
        else {
            var me = this;
            var delayDraw = function() {
                if (me.models) me._drawModelsImpl(clearAll, keepFirst);
                else setTimeout(delayDraw, 100);
            };
            delayDraw();
        }

        var parent = $('.modellist');
        var modelWidth = 130 + 10;
        var rowsPerPage = 5;
        var rows = rowsPerPage * (this.page + 1);
        var w = parseInt(parent.width(), 10);
        var modelsPerRow = Math.floor(w / modelWidth);
        var visibleModels = (modelsPerRow * rows) - 1;
        return visibleModels;
    },
    _drawModelsImpl: function(clearAll, keepFirst) {
        //models
        var rowsPerPage = 5;

        var modelWidth = 130 + 10;
        var rows = rowsPerPage * (this.page + 1);

        var offset = 0;
        var parent = $('.modellist');
        if (clearAll) {
            //empty cache
            EM.tooltipCache = {};

            if (keepFirst) {
                parent.children('.model,.clear').not('.first').remove();
            } else {
                parent.children('.model,.clear').remove();
            }
        }
        var w = parseInt(parent.width(), 10);
        var modelsPerRow = Math.floor(w / modelWidth);
        var visibleModels = (modelsPerRow * rows) - 1;
        if (!clearAll) {
            offset = Math.max(0, (modelsPerRow * rowsPerPage * this.page) - 1);
            //no placeholder, so we can add an extra model            
            //visibleModels++;
        } else {
            if (!keepFirst) {
                //append placeholder
                this.placeholder.clone().appendTo(parent);
            }
        }
        var data = [];
        for (var i = offset; i < this.models.length && i < visibleModels; i++) {
            data.push(this.models[i]);
        }

        //append models
        $('#allmodels_tmpl').tmpl({
            root: this.root,
            models: data
        }).appendTo(parent);

        $('<div />', { 'class': 'clear' }).appendTo(parent);

        if (visibleModels < this.models.length) {
            this.moreModelsButton.show();
        } else {
            this.moreModelsButton.hide();
        }
        if (!keepFirst) {
            this.initDND();
        }
        return visibleModels;
    },
    selectedValuesChanged: function() {
        if (this.disableAutoSearch) {
            return;
        }
        this.refreshSlidersFont();

        //clear previous timeout
        if (this.searchByFiltersTimeout) {
            clearTimeout(this.searchByFiltersTimeout);
        }
        var me = this;
        //introduce a slight delay so we can keep modifying the sliders 
        // without being interrupted
        this.searchByFiltersTimeout = setTimeout(function() {
            me.searchByFilters();
        }, 150);
    },
    searchByModel: function(modelId) {

        var me = this;
        me.disableAutoSearch = true;
        var modelsDrawn = false;
        var specsSet = false
        /*
        EM.loadJson(me.modelSearchHandler, {
        'action': 'search',
        modelId: modelId
        }, function (data, status, xhr) {
        //search was successfull
        me.models = data.models;
        me.page = 0;
        me.drawModels(true, true);
        me.moreModelsButton.show();
        if (specsSet) {
        setTimeout(function () {
        me.disableAutoSearch = false;
        //me.selectedValuesChanged();
        }, 200);
        }
        modelsDrawn = true;
        });
        */
        EM.loadJson(this.modelTooltipHandler, { id: modelId, json: 1, score: 0, version: EM.siteVersion }, function(dataArr) {
            me.disableAutoSearch = true;
            //setup filters to match the model
            var data = {};
            if (dataArr) {
                for (var i = 0; i < dataArr.length; i++) {
                    data[dataArr[i].specificationId.toUpperCase()] = dataArr[i];
                }
            }

            $('.sf_option').each(function() {
                var s = $(this);
                //console.warn("\"" + s.attr('data-specid') + "\"");

                var specId = '' + s.attr('data-specid');
                specId = specId.toUpperCase();
                var spec = data[specId];
                if (!spec) return;

                if (spec.specificationIsNumeric) {
                    spec.specificationsPerModelStringValue = spec.specificationsPerModelIntValue;
                }
                //console.log("SET " + spec.specificationId + ' // ' + specId + " to " + spec.specificationsPerModelStringValue);

                if (s.hasClass('combobox')) {
                    //combobox 
                    var select = s.find('select');
                    select.val(spec.specificationsPerModelStringValue);

                    /********************************* */

                    if (select.get(0).selectedIndex != -1) {
                        var lbl = select.get(0).options[select.get(0).selectedIndex].text;
                        s.find('.sf_label').text(lbl);
                        me.onSelectedValuesChanged.call(select);
                    }

                } else if (s.hasClass("slider")) {
                    var el = s.find('.sf_slider');
                    if (spec.specificationsPerModelStringValue != null) {
                        el.slider('values', 0, spec.specificationsPerModelStringValue);
                        el.slider('values', 1, spec.specificationsPerModelStringValue);

                        var text = '' + spec.specificationsPerModelStringValue + ' - ' + spec.specificationsPerModelStringValue;
                        if (spec.specificationId.toLowerCase() == 'b7a5b495-af2e-40c5-9e6b-e443d75d3273') {
                            var tmp = parseInt(spec.specificationsPerModelStringValue, 10) / 100;
                            var tmp2 = parseInt(tmp, 10);
                            var tmp3 = parseInt((tmp - tmp2) * 100, 10);
                            if (tmp3 < 10) tmp3 = '0' + tmp3;
                            text = tmp2 + ',' + tmp3;
                            text += ' - ' + text;
                        }
                        //alert(spec.specificationsPerModelStringValue);
                        s.find('.sf_value').text(text);

                        me.onSelectedValuesChanged.call(el.get(0));

                    }
                    //el.slider('value', spec.specificationsPerModelStringValue);

                }
            });
            EM.ModelSearch.refreshComboboxFont();
            EM.ModelSearch.refreshSlidersFont();
            specsSet = true;
            me.searchByFilters(modelId, function() {
                me.disableAutoSearch = false;
            });
            //            if (modelsDrawn) {
            //                setTimeout(function () {
            //                    me.disableAutoSearch = false;
            //                    //me.selectedValuesChanged();
            //                }, 200);
            //            }
        });


    },
    searchByFilters: function(ignoreModelWithId, callback) {

        var emptyId = '00000000-0000-0000-0000-000000000000';
        var idTest = /(\d|-)+/;
        /* sf_value / sf_element //spec */
        var root = $('#searchFilters .sf_option');
        var me = this,
            activatedOptions = this.activatedOptions;
        var params = [];
        root.each(function() {
            var opt = $(this);
            var id = opt.attr('data-specid');
            if (activatedOptions[id] === true) {
                //active, find value
                var v = opt.find('.sf_value');
                var isId = idTest.test(id);
                if (v.length > 0) {
                    v = v.text();

                    //params[id] = v.text();
                } else {
                    //params[id] = opt.find('input.sf_element, select.sf_element').val();
                    v = opt.find('input.sf_element, select.sf_element').val();
                }
                if (v) {
                    params.push({
                        id: (isId ? id : emptyId),
                        name: (isId ? '' : id),
                        value: v
                    });
                }
            }
        });
        if (params.length > 0) {
            var requestParams = { 'action': 'search', filters: $.toJSON(params) };

            if (ignoreModelWithId) {
                requestParams['ignoreModelId'] = ignoreModelWithId;
            }
            $('body').css('cursor', 'wait');
            EM.loadJson(me.modelSearchHandler, requestParams, function(data, status, xhr) {
                //search was successfull
                $('body').css('cursor', '');
                if (data) {
                    me.models = data.models;
                    me.page = 0;
                    var keepFirst = true;
                    me.drawModels(true, keepFirst);
                    me.moreModelsButton.show();
                }
                if (callback) {
                    callback.call(this);
                }
            });
        }
        //console.dir(params);
    },
    activatedOptions: {},
    initFilters: function() {
        var self = this;
        var root = $('#searchFilters');
        var specs = window.specificationData;


        this.filterCounter = 0;

        //add the filters
        //type
        this.addFilter(specs, root, false, '80029204-25F3-4DA1-84F6-F9170D4C236E', 'type');
        //geslacht
        this.addFilter(specs, root, false, 'gender', 'Geslacht');
        this.addFilter(specs, root, false, 'leeftijd', 'Leeftijd');

        this.addFilter(specs, root, false, 'B7A5B495-AF2E-40C5-9E6B-E443D75D3273', 'Lengte');

        this.addFilter(specs, root, false, 'B91111D1-B981-4367-957E-123B25B7FBEE', 'haarkleur');
        //this.addFilter(specs, root, true, 'B91111D1-B981-4367-957E-123B25B7FBEE', 'haarkleur');
        this.addFilter(specs, root, false, '164FC354-60D7-443C-BDEF-CDE833E75194', 'afkomst');

        this.addFilter(specs, root, false, 'A71962E8-5A69-4EF0-9E80-6340733B0CB2', 'kleur ogen');

        //new specs
        this.addFilter(specs, root, false, '4365EC90-7C59-4778-B32F-B48C25E51857', 'Kledingmaat boven');
        this.addFilter(specs, root, false, '099BA702-A309-4D97-B89D-91849EDC54AD', 'Kledingmaat onder');
        this.addFilter(specs, root, false, 'C78635D7-0EE0-4F1A-BB22-C4A43C187C45', 'Schoenmaat');
        this.addFilter(specs, root, false, 'A63F00F6-62E5-4C65-BC4A-95BE2F8B0D7D', 'BH maat');
        this.addFilter(specs, root, false, 'A45447BE-255F-4EBB-965D-D85FF0CBBEA8', 'Borst');

        this.addFilter(specs, root, false, '5D8F878C-0909-4609-B472-7E58F01D72F4', 'Taille');
        this.addFilter(specs, root, false, '93F37533-0010-4CF2-A14B-48624AF018D6', 'Heup');

        this.addFilter(specs, root, false, 'voornaam', 'Voornaam');


        //enable buttons
        var self = this;
        var specOpenState = {};
        var activatedState = this.activatedOptions = {};
        // handle clicks on the open/close links.
        root.delegate('.sf_openclose', 'click', function() {
            var me = $(this);
            var parent = me.parents('.sf_option');
            var id = parent.attr('data-specid');
            if (specOpenState[id] === true) {
                //close
                me.removeClass('sf_openclose_opened');
                specOpenState[id] = false;
                parent.find('.sf_body').hide();
            } else {
                specOpenState[id] = true;
                me.addClass('sf_openclose_opened');
                parent.find('.sf_body').show();

            }
            if (typeof (setFooterPosition) !== 'undefined') {
                setFooterPosition();
            }

        });

        // handle clicks on the activeate/deactivate links.
        root.delegate('.sf_activate', 'click', function() {
            var me = $(this);
            var parent = me.parents('.sf_option');
            var id = parent.attr('data-specid');
            if (activatedState[id] === true) {
                //close
                activatedState[id] = false;
                me.removeClass('sf_activate_active');
            } else {
                activatedState[id] = true;
                me.addClass('sf_activate_active');
            }
            if (!self.disableAutoSearch) {
                self.searchByFilters();
            }
        });





        //create combobox UI - and handle open/close differently
        $('#searchFilters select').parents('.sf_option').find('.sf_openclose').click(function(e) {
            e.preventDefault();
            e.stopImmediatePropagation();
            e.stopPropagation();
            //cb_options_panel

            var me = $(this);
            var optionParent = me.parents('.sf_option');
            //custom dropdown
            var select = optionParent.find('select').hide();
            if (me.data('select-visible') == 'true') {
                //close
                if (this.panel) {
                    this.panel.detach();
                }
                me.data('select-visible', 'false');
            } else {


                me.data('select-visible', 'true');
                var optOnClick = function() {
                    var val = $(this).data('value');
                    if (val != '') {
                        select.val(val);
                        //programmatically changing the value of a select doesn't fire the change event
                        // so we need to manually set it.
                        self.onSelectedValuesChanged.call(select);
                    }

                    var lbl = $(this).text();
                    optionParent.find('.sf_label').text(lbl);
                    me.data('select-visible', 'false');
                    me.get(0).panel.detach();

                    EM.ModelSearch.refreshComboboxFont();
                };

                if (this.panel) {
                    //re-attach panel
                    this.panel.appendTo(optionParent);

                } else {
                    var panel = $('<div />', { 'class': 'cb_options_panel' }).css({
                        'background-color': '#474747',
                        'padding-left': '40px'
                    });
                    this.panel = panel;
                    var opts = select.get(0);

                    //"root" item
                    /*
                    $('<div />').data('value', '')
                    .text(optionParent.find('.sf_label').text())
                    .appendTo(panel);
                    */
                    for (var i = 0; i < opts.options.length; i++) {
                        //alert(opts.options[i].value);
                        //alert(opts.options[i].text);
                        $('<div />', { 'class': 'cb_option' }).data('value', opts.options[i].value)
                            .text(opts.options[i].text)
                        .appendTo(panel);

                    }

                    panel.appendTo(optionParent);
                    setTimeout(function() {
                        EM.ModelSearch.refreshComboboxFont();
                    }, 0);
                }
                //handle the onclick for the options
                var allOptions = this.panel.find('div.cb_option');
                allOptions.bind('click', optOnClick);

                /* start modify select based on gender */
                if (select.attr('id') != 'specgender') {
                    //var genderSelect = $('div.combobox[data-specid=gender]').find('select');
                    var genderSelect = $('#specgender');
                    var selectedGender = genderSelect.val();
                    var genderFilterActive = genderSelect.parents('.sf_option').find('.sf_activate').hasClass('sf_activate_active');
                    if (!genderFilterActive) {
                        //gender select is not activated,
                        // but we still need to make sure all options are visible
                        selectedGender = 'NO FILTER';
                    }
                    if (selectedGender) {
                        var opts = optionParent.find('.cb_option');
                        if (selectedGender == 'M' || selectedGender == 'V') {
                            //hide options starting with "Man-" or "Vrouw-" based upon the selected gender
                            (function(hideText) {
                                opts.each(function() {
                                    var me = $(this);
                                    if (me.text().toLowerCase().indexOf(hideText) == 0)
                                        me.hide();
                                    else
                                        me.show();
                                });
                            })(selectedGender == 'M' ? 'vrouw-' : 'man-');
                        } else {
                            //no filter, show all items
                            opts.show();
                        }
                    }
                }
                /* end modify select based on gender */

            }



            if (typeof (setFooterPosition) !== 'undefined') {
                setFooterPosition();
            }
            return false;
        });




        this.refreshSlidersFont();
    },

    addFilter: function(specs, root, sendIndex, id, friendlyName) {


        if (!friendlyName) { friendlyName = id; }
        var data = specs[id] || { name: friendlyName },
            nr = this.filterCounter++,
            v = data.v,
            me = this,
            i;
        data.cssClass = data.e || data.id;
        switch (id) {
            case 'voornaam':
                data.e = 'voornaam';
                data.cssClass = 'textfield';
                break;
            case 'gender':
                //override data.e
                data.e = 'geslacht';
                data.cssClass = 'combobox';
                break;
            case 'leeftijd':
                data.e = 'leeftijd';
                data.cssClass = 'slider';
                break;
            case 'B7A5B495-AF2E-40C5-9E6B-E443D75D3273':
                data.e = 'length';
                data.cssClass = 'slider';
                break;
            case '5D8F878C-0909-4609-B472-7E58F01D72F4': /* taille */
            case 'A45447BE-255F-4EBB-965D-D85FF0CBBEA8': /* borst */
            case '93F37533-0010-4CF2-A14B-48624AF018D6': /* heup */
                data.e = 'cmslider';
                data.cssClass = 'slider';
            case 'A63F00F6-62E5-4C65-BC4A-95BE2F8B0D7D':
                //cup
                break;
            default:
                break;
        }
        var el;
        switch (data.e) {
            case 'combobox':
                el = $('<select />', {
                    'id': 'spec' + id,
                    'class': 'sf_element'
                });
                //                if (id == 'B91111D1-B981-4367-957E-123B25B7FBEE')
                //                    console.dir(v);
                for (i = 0; i < v.length; i++) {
                    var val = v[i];

                    $('<option />', { value: (sendIndex ? val.i : val.d) }).text(val.dl).appendTo(el);
                }
                el.bind('change', function() {
                    me.onSelectedValuesChanged.apply(this, arguments);
                });
                me.filters[id] = el;
                break;
            case 'voornaam':
                el = $('<input />', {
                    'id': 'spec' + id,
                    'class': 'sf_element textfield'
                });
                el.bind('change', me.onSelectedValuesChanged);
                el.bind('keydown', function(e) {
                    if (e.keyCode == 13 || e.keyCode == 10) {
                        return false;
                    }
                });
                el.bind('keyup', function(e) {
                    if (this.value != this.lv) {
                        this.lv = this.value;
                        me.onSelectedValuesChanged.apply(this, arguments);
                    }
                });
                break;
            case 'geslacht':
                el = $('<select />', {
                    'id': 'spec' + id,
                    'class': 'sf_element'
                });
                $('<option />', { value: 'M' }).text('Man').appendTo(el);
                $('<option />', { value: 'V' }).text('Vrouw').appendTo(el);
                el.bind('change', me.onSelectedValuesChanged);

                break;
            case 'leeftijd':
                el = $('<div />').css('height', '45px');
                $('<div />', { id: 'leeftijd_label', 'class': 'sf_value' }).text('10 - 80').appendTo(el);
                $('<div />', {
                    'id': 'spec' + id,
                    'class': 'sf_element sf_slider'
                }).slider({
                    range: true,
                    min: 1,
                    max: 100,
                    values: [10, 80],
                    slide: function(event, ui) {
                        $("#leeftijd_label").text('' + ui.values[0] + ' - ' + ui.values[1]);
                        //me.selectedValuesChanged();
                        me.onSelectedValuesChanged.call(this);
                    }
                }).appendTo(el);

                break;
            case 'cmslider':
                el = $('<div />', { 'class': 'slider_root' }).css('height', '45px');
                $('<div />', { 'class': 'sf_value' }).text('1 - 200').appendTo(el);
                $('<div />', {
                    'id': 'spec' + id,
                    'class': 'sf_element sf_slider'
                }).slider({
                    range: true,
                    step: 5,
                    min: 1,
                    max: 250,
                    values: [1, 200],
                    slide: function(event, ui) {

                        $(this).parents('.slider_root').find('.sf_value').text('' + (ui.values[0]) + ' - ' + (ui.values[1]));
                        //me.selectedValuesChanged();
                        me.onSelectedValuesChanged.call(this);
                    }
                }).appendTo(el);
                break;
            case 'length':
                el = $('<div />').css('height', '45px');
                $('<div />', { id: 'length_label', 'class': 'sf_value' }).text('1,00 - 2,00').appendTo(el);
                $('<div />', {
                    'id': 'spec' + id,
                    'class': 'sf_element sf_slider'
                }).slider({
                    range: true,
                    step: 5,
                    min: 1,
                    max: 250,
                    values: [100, 200],
                    slide: function(event, ui) {
                        function cmToMeter(nr) {
                            var nr = parseInt(nr, 10);
                            var begin = parseInt(nr / 100, 10);
                            var end = nr - (begin * 100);
                            if (end < 10) {
                                end = '0' + end;
                            }
                            //console.log(begin + ',' + end); 
                            return begin + ',' + end;
                        }
                        $("#length_label").text('' + cmToMeter(ui.values[0]) + ' - ' + cmToMeter(ui.values[1]));
                        //me.selectedValuesChanged();
                        me.onSelectedValuesChanged.call(this);
                    }
                }).appendTo(el);

                break;
            default:
                break;
        }

        if (el) {
            var html = '';
            html += '<div class="sf_head">';
            html += '<div class="sf_button sf_activate"></div>';
            html += '<div class="sf_label">' + data.name + '</div>';
            html += '<div class="sf_colored_bar sf_colored_bar' + nr + '"></div>';
            html += '<div class="sf_button sf_openclose"></div>';
            html += '</div>';


            var wrap = $('<div />', {
                'class': 'sf_option ' + data.cssClass,
                'data-specid': id
            });
            //            if(sendIndex) {
            //                wrap.addClass('send_index');
            //            }
            $(html).appendTo(wrap);
            var b = $('<div />', { 'class': 'sf_body' });
            el.appendTo(b);
            b.appendTo(wrap);
            wrap.appendTo(root);
        }
    },

    /* renumber all filters */
    renumberFilterPositions: function() {
        $('#searchFilters div.sf_option .sf_colored_bar').each(function(i) {
            this.className = 'sf_colored_bar sf_colored_bar' + i;
        });
    },

    /* empty function */
    noop: EM.noop
};