function validationShow() {
    var cp = $("#validationPanel");
    cp.modal({ 
        onShow: function() {
            // center container
            var mc = $("#modalContainer");            
            var wd = cp.width();
            var ht = cp.height();
            var lt = ($(window).width() - wd) / 2;
            
            var tp = $(window).height() / 3 + $(window).scrollTop();            
            mc.css({ position: 'absolute', left: lt + 'px', top: tp + 'px', width: wd + 'px', height: ht + 'px' });
        }
    });
}


function brandsSelected() {		
        var selectedValues =  brandSelector.value();
        if (selectedValues=='') {
	        modelSelector.disable();	        
        }
        else
        {
            $.getJSON("/brochure/getModelsByBrands2", { brandIds : selectedValues }, function(data) {
	        	modelSelector.loadData(data);
	        	modelSelector.enable();	                
	        }); 
        }        
}
function modelsSelected() {
}

function validationClose() {
    $.modal.close();
}

function submit(){
    $("form").get(0).submit();
}

$(document).ready(function() {
    brandSelector = new FancySelector();
    brandSelector.init('merk', brandsSelected, 'brandIds', 'enhanced');
    modelSelector = new FancySelector();
    modelSelector.init('model', modelsSelected, 'modelIds', 'simple',false,4,3);
     
    brandIds = $(":hidden[name='brandIds']").val(); 
    modelIds = $(":hidden[name='modelIds']").val();    
    brandsSelected();
});
/*
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;
    
    this.init = function(control, selectionChangeHandlerParam, valueHolderField, mode){
        this.mode = mode;
        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");
        
        $(buttonDiv).bind('click', function() {
            fsOpen();
        });
        $(buttonDiv+'Close').bind('click', function() {
            fsClose();
        });
        
        $(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();
        }
    }
    
    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' });
            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>");
                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++) {
            s+='<td style="text-align: left; vertical-align: top; padding: 4px;">';
            $(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();
    }
    
    function fsDisable() {
        
    }
    
    function fsSetShort(val) {
        fsShort = val;
    }
    
    this.open = function(){
        fsOpen();
    }
    
    function fsOpen() {
        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();
        mpan.bind('mouseenter', function() {
            mpan.bind('mouseleave', fsClose);
        });
        selectedValueOnOpen=jQuery.trim(valueHolder.val());
    }
    function fsClose() {
        $(buttonDiv).unbind('click');
        $(buttonDiv).bind('click', fsOpen);
        fsWrite();
        fsRead();
        $(panelDiv).slideUp('fast');
        $(frame).hide();
        selectedValueOnClose=jQuery.trim(valueHolder.val());
        if(selectedValueOnOpen!=selectedValueOnClose) {
            fsSelectionChanged();
        }
    }
    
    this.getBrandIds=function() {
        return valueHolder.val();
    }
    
    function fsSelectionChanged()
    {
        selectionChangeHandler(jQuery.trim(valueHolder.val()), true);
    }
        
    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 lt = mbut.offset().left;
        var tp = mbut.offset().top + ht + 1;
        mpan.css({ 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(','));
    }
    
    function fsSelectAll() {
       $(panelDiv+' .'+controlName).addClass(selectionCssClass);                        
    }

    function fsUnselectAll() {
       $(panelDiv+' .'+controlName).removeClass(selectionCssClass);                        
    }
    
    this.clicked= function(){
        fsClicked();
    }
    
    function fsClicked() {
    	// check number of selected items
    	if (!$(this).hasClass(selectionCssClass)) {
	    	var sel = "#" + controlName + "DataContainer" + " div." + selectionCssClass;
	    	if ($(sel).size() == 3) {
	    		alert(brochureMaxModelCount);
	    		return;
	    	}    
    	}
        var sid = $(this).attr('id');
        var id = sid.substring(controlName.length + 1);
        $('#'+controlName+'a' + id).toggleClass(selectionCssClass);                
        $('#'+controlName+'b' + id).toggleClass(selectionCssClass);                        
    }
}  
*/
$(function() {
    //logoTopMargin();
    //$(window).bind('resize', logoTopMargin);        
});