function FancySelector(){
                         
    var dataField='';
    var buttonDiv = '';
    var panelDiv = '';
    var fsShort = 1;
    var selectedBrandIdsOnOpen='';
    var controlName='';
    var inner1='';
    var inner2='';
    var selectionChangeHandler;
    var valueHolder;
    var innerButtonDiv;
    var selectionCssClass='';
    var colcount=4;
    var mode;  
    var opened=false;  
    var singleSelection=false;
    var maxItemsSelected=-1;    
    
    this.init = function(control, selectionChangeHandlerParam, valueHolderField, mode, singleSelect,columns, maxItems){  
        
        this.mode = mode;              
        if (singleSelect != undefined){
            singleSelection = singleSelect;
        }
                   
        if (columns != undefined){            
            colcount = columns;
        }
        
        if (maxItems != undefined){            
            maxItemsSelected = maxItems;
        }
                      
        //valueHolder = $(":hidden[name='" + valueHolderField + "']");
        
        valueHolder = $("#"+valueHolderField);
        if (valueHolder.val()==undefined){
            valueHolder = $(":hidden[name='" + valueHolderField + "']");
        }
                                                                
        selectionChangeHandler = selectionChangeHandlerParam;
        
        controlName = control;                                   
        buttonDiv = '#' + control + 'Button';
                        
        selectionCssClass = control + 'sel';
        innerButtonDiv = '#' + control + 'ButtonInner';
        
        panelDiv = '#' + control + 'Panel';
        frame = '#' + control + 'Frame';
        inner1 = '#' + control + 'Inner1';
        inner2 = '#' + control + 'Inner2';
        
        $(buttonDiv).addClass("vroemmDrop");
        
        fsEnable();
        $(buttonDiv+'Close').bind('click', function() {
            fsClose();
        });
        
        
        $(buttonDiv+'ConfirmSpan').text('bevestigen');        
        $(buttonDiv+'ConfirmSpan').css({"cursor":"pointer"});
        $(buttonDiv+'ConfirmSpan').bind('click', function() {
            fsClose();
        });
        
        $(buttonDiv+'Confirm').css({"vertical-align":"bottom","color":"#12457e","text-align":"right","padding-right":"5px","padding-bottom":"5px"});
        
        
        $(panelDiv+' div.'+controlName).click(fsClicked);                
        
        $(panelDiv+' #'+control+'More').addClass('spanLink');
        $(panelDiv+' #'+control+'More').click(fsMore);
        $(panelDiv+' .'+control+'SelectAll').addClass('spanLink');
       
        $(panelDiv+' .'+control+'UnselectAll').addClass('spanLink');
        $(panelDiv+' .'+control+'SelectAll').click(fsSelectAll);
        $(panelDiv+' .'+control+'UnselectAll').click(fsUnselectAll);
        
        $(buttonDiv).append('<div id="'+control+'ButtonInner" class="vroemmDropInner"></div>');
        
        fsRead();
        //$(panelDiv).append(htmlTemplate);
        if (mode=='simple')
        {
            fsMore();
        }        
        
        if (singleSelection){
            $(panelDiv + ' #'+ control + 'MultiSelect').css({display:'None'})
        }        
    };
    
    this.loadDataSimple = function(json) {
        fsEmpty();        
        var tbody = $("#" + controlName + "DataContainer");        
        jQuery.each(json.list, function(index, item) {            
            var tr = $("<tr>");            
            var td = $("<td colspan=\"" + colcount + "\">");
            td.css({ textAlign: 'left', fontWeight: 'bold', borderBottom: '1px solid gray','line-height':'13px' });
            td.text(item.name);
            tr.append(td);
            tbody.append(tr);
            
            tr = $("<tr>");
            tbody.append(tr);
            
            var rowCount = parseInt(item.subitems.length / colcount);            
            if (item.subitems.length % colcount > 0)
                rowCount++;
              
            for (var i = 0; i < colcount; i++) {
                td = $("<td>");
                if (singleSelection){
                    td.css({ textAlign: 'left', verticalAlign: 'top', padding: '4px 4px 4px 0px' });
                } else {
                    td.css({ textAlign: 'left', verticalAlign: 'top', padding: '4px' });
                }
                tr.append(td);
            }            
            jQuery.each(item.subitems, function(index2, item2) {
                var div = $("<div>");
                div.attr('id', controlName + 'b' + item2.id);
                div.addClass(controlName);
                div.text(item2.name);                
                tr.children().eq(index2 / rowCount).append(div);
            });
        });
        tbody.find("div." + controlName).click(fsClicked);
        fsRead();
    };
    this.loadDataEnhanced = function(json) {
        fsEmpty();
        s='';
        a=$("#"+controlName+"DataContainer");
        rowsPerColumn=parseInt(json.length/colcount);
        if (json.length % colcount!=0 )
            rowsPerColumn++;
            
        for(i=0;i<colcount;i++) {
            if (singleSelection){
                s+='<td style="text-align: left; vertical-align: top; padding: 4px 4px 4px 0px;line-height:13px;">';
            } else {
                s+='<td style="text-align: left; vertical-align: top; padding: 4px;line-height:13px;">';
            }
            $(json).each(function(index, x) {
                if(index>=i*rowsPerColumn && index<(i+1)*rowsPerColumn) {
                    //alert(i*rowsPerColumn+' '+index+' '+(i+1)*rowsPerColumn);                              
                    s+='<div id="'+controlName+'b'+x.id+'" class="'+controlName+'">'+x.label+'</div>';                           
                }
            });            
            s+='</td>';
        }
        a.append(s);
        $(panelDiv+' div.'+controlName).click(fsClicked);
        fsRead();
    };
    this.loadData = function(data) {                
        if (this.mode == 'simple')
            this.loadDataSimple(data);
        else
            this.loadDataEnhanced(data);        
    };
    
    this.clear = function()
    {
        fsClear();
    }; 
    
    function fsEmpty() {
        var a = $("#" + controlName + "DataContainer");
        a.empty();
    }
    
    function fsClear() {
        valueHolder.val('');
        fsUnselectAll();
        fsEmpty();
        fsRead();
    }

    this.value = function()
    {
        return jQuery.trim(valueHolder.val());
    }

    this.disable = function()
    {        
        fsDisable();
    };
    
    function fsDisable() {
        fsClear();
        $(buttonDiv).unbind('click');
        $(buttonDiv).css('background-image','url(/gfx/bg_select_dis2.png)');
    }
    
    this.enable = function()
    {
        fsEnable();
    };
    
    function fsEnable()
    {
        $(buttonDiv).bind('click', fsOpen);
        $(buttonDiv).css('background-image','url(/gfx/bg_select2.png)');
    }
    
    function fsSetShort(val) {
        fsShort = val;
    }
    
    this.open = function(){
        fsOpen();
    };
    
    function fsOpen() {
        opened=true;
        var mpan = $(panelDiv);
        var mbut = $(buttonDiv);
        var mfr = $(frame);
        
        mbut.unbind('click');
        mbut.bind('click', fsClose);
        
        fsRead();
        if (fsShort != 0) {
            $(inner1).show();
            $(inner2).hide();
        }
        else {
            $(inner1).hide();
            $(inner2).show();
        }
        fsPosition();
        mpan.slideDown('fast', function() {
           fsAdjust();
        });
        mfr.show();
        
        //mouse leave close event
        //mpan.bind('mouseenter', function() {
        //    mpan.bind('mouseleave', fsClose);
        //});
        selectedValueOnOpen=jQuery.trim(valueHolder.val());
        
        $("body").bind('scroll',fsPosition);             
    }
    
    this.isOpened = function(){
        return opened;                
    };        
    
    this.close = function(){
        fsClose();
    };
    
    function fsClose() {
        opened=false;
        $(buttonDiv).unbind('click');
        $(buttonDiv).bind('click', fsOpen);
        fsWrite();
        fsRead();
        $(panelDiv).slideUp('fast');
        $(frame).hide();
        selectedValueOnClose=jQuery.trim(valueHolder.val());
        if(selectedValueOnOpen!=selectedValueOnClose) {
            fsSelectionChanged();
        }
        $("body").unbind('scroll');
    }
    
    this.getBrandIds=function() {
        return valueHolder.val();
    };
    
    this.selectionChanche = function(){
        fsSelectionChanged();
    }
    
    function fsSelectionChanged()
    {        
        selectionChangeHandler();
    }
        
    function fsPosition() {                          
        var mpan = $(panelDiv);
        var mbut = $(buttonDiv);
        var mfr = $(frame);
        var wd = mbut.width();
        var ht = mbut.height();
        var fwd = mpan.width();
        var fht = mpan.height();
        if (!jQuery.browser.msie) {
            wd = totalWidth(mbut);
            ht = totalHeight(mbut);
        }
        else {
            fwd = totalWidth(mpan);
            fht = totalHeight(mpan);
        }        
        var fit = 0;
        if (!jQuery.browser.msie){
            fit = 4;
        }
        
        var lt = mbut.offset().left;
        var tp = mbut.offset().top + ht - fit ;//- $(document).scrollTop();
        
        mpan.css({color: 'black', left: lt + 'px', top: tp + 'px' });                
        
        mfr.css({ left: lt + 'px', top: tp + 'px', width: fwd + 'px', height: fht + 'px' }); 
        fsAdjust(); 
    }
    function fsAdjust() {
        var a = $(panelDiv).offset().top + $(panelDiv).outerHeight();
        var b = $(document).scrollTop() + $(window).height();
        if (a > b)
            $(document).scrollTop($(document).scrollTop() + a - b); 
    }        
    
    function fsMore() {
        fsSetShort(0);
        $(inner1).hide();
        $(inner2).show();
        fsPosition();
    }
    
    this.read = function(){
        fsRead();
    };
       
    function fsRead() {
        var s = jQuery.trim(valueHolder.val());
        var ids = s.split(',');
        for (i = 0; i < ids.length; i++) {
            $('#'+controlName+'a' + ids[i]).addClass(selectionCssClass);
            $('#'+controlName+'b' + ids[i]).addClass(selectionCssClass);
        }
        names=[];
        $(inner2 + ' div.'+controlName).each(function (index, item) {
            if ($(item).hasClass(selectionCssClass)) {                                                           
                names.push($(item).text());
            }
        });
        $(innerButtonDiv).text(names.join(', '));
    }
    this.write = function() {
        fsWrite();
       };
    function fsWrite() {
        var ids = [];
        var names = [];
        $(inner2+' div.'+controlName).each(function (index, item) {
            if ($(item).hasClass(selectionCssClass)) {
                var id = $(item).attr('id').substring(controlName.length+1);
                ids.push(id);
                names.push($(item).text());
            }
        });
        valueHolder.val(ids.join(','));
    }
    
    this.selectFirst = function() {
        fsSelectFirst();
       };
       
       function fsSelectFirst() {        
        $(panelDiv+' .'+controlName+':first').addClass(selectionCssClass);
        fsWrite();
        fsRead();
    }
    
    /* old methods for car comparison 
    this.selectCheapest = function() {        
        fsSelectCheapest();
    }
    
    function fsSelectCheapest() {
        var cheapestId = '';
        var cheapestPrice = '';
        $(panelDiv+' .'+controlName).each(function(i){
            if (cheapestId == '' && cheapestPrice ==''){ 
                cheapestId = $(this).attr('id');
                cheapestPrice = fsGetPriceFromTxt($(this).text());
            } else {
                var tempPrice = fsGetPriceFromTxt($(this).text());
                if (tempPrice < cheapestPrice){
                    cheapestId = $(this).attr('id');
                    cheapestPrice = tempPrice;
                }
            }            
        });
                
        $(panelDiv+' #'+cheapestId).addClass(selectionCssClass);
        fsWrite();
        fsRead();
    }
    */
    
    function fsGetPriceFromTxt(text){            
        var separatorIndex = text.indexOf('-');
        var price=0;
        if (separatorIndex==-1){
            price = parseInt(text.substr(text.indexOf('(')+2));
        } else {
            price = parseInt(text.substring(text.indexOf('(')+2,separatorIndex));
        }        
        return price;
    }
    
    function fsSelectAll() {
       $(panelDiv+' .'+controlName).addClass(selectionCssClass);
    }

    function fsUnselectAll() {
       $(panelDiv+' .'+controlName).removeClass(selectionCssClass);
    }
    
    this.clicked= function(){        
        fsClicked();
    };
    
    function fsClicked() {               
        var sid = $(this).attr('id');
        var id = sid.substring(controlName.length+1);
        var currentClass = $(this).attr('class');
                
        var isSelected = currentClass.indexOf(controlName+'sel') != -1;
         
        var selItemsCount=$(inner2+' div.'+selectionCssClass).length;
                
        if (maxItemsSelected != -1 && selItemsCount>=maxItemsSelected && !isSelected){
            alert("You can select max " +maxItemsSelected + " items.");
            return;
        }
                                
        if (singleSelection){
            $(panelDiv+' div.'+selectionCssClass).each(function(){                
                if ($(this).attr('id').substring(controlName.length+1) != id){                    
                    $(this).removeClass(selectionCssClass);
                }
            });            
        }
                
        $('#'+controlName+'a' + id).toggleClass(selectionCssClass);                
        $('#'+controlName+'b' + id).toggleClass(selectionCssClass);                
        paramChanged();
        if (singleSelection){
            fsClose();
        }
    }
}