/*
 *
 *
 *
 */

var MilieuTool = (function($) {
	
	//var FILTER_HANDLER = 'example/filter-handler.aspx',
	var FILTER_HANDLER = '/',
		
		RESULTS_VIEW = '.results-view', 
		FILTER_VIEW = '.filter-view',
		LOADER_VIEW = '#loader-view',
		INFO_VIEW = '.info-view',
		
		//INFO_VIEW_CONTENT = '<h3>Extra informatie:</h3><dl><dt>Uitvoering:</dt><dd>$type&nbsp;</dd><dt>Emissienorm:</dt><dd>$norm&nbsp;</dd><dt>Gewicht</dt><dd>$weight&nbsp;</dd><dt>Roet emissie</dt><dd>$soot&nbsp;</dd><dt>NOx emissie</dt><dd>$nox&nbsp;</dd><dt>Verbruik</dt><dd>$efficiency&nbsp;</dd></dl>';
		INFO_VIEW_CONTENT = '<h3>Extra informatie:</h3><dl><dt>Uitvoering:</dt><dd>$type&nbsp;</dd></dl>';
		
		REL_TOGGLE_FILTER = /toggle-filter/,
        REL_PAGINATE_RESULTS = /page/,		
		REL_PRINT_RESULTS = /print-/,

		INPUT_CHECKBOX = 'input[type=checkbox]',
		
		EVENT_MOUSELEAVE = 'mouseleave',
		EVENT_MOUSEMOVE = 'mousemove',
		EVENT_CLICK = 'click',
		EVENT_CHANGE = 'change',
		EVENT_BLUR = 'blur';
		
	var View = function(container) {
		this.container = $(container);
	};
	
	View.prototype = {
		constructor: View,
		render: function(e) {
			throw Error('No render method defined');
		},
		bind: function(event, callback) {
			this.container.bind(event, callback);
		}
	};
	
	var FilterView = new View(FILTER_VIEW);
	FilterView.show = true;
	FilterView.render = function(e) {
		
		var slider = $('<span class="slider"><span class="range"></span><a class="control min"></a><a class="control max"></a></span>');
		var min = slider.find('.min');
		var max = slider.find('.max');
		var range = slider.find('.range');
		
		var inputMin = $('.emmission-min');
		var inputMax = $('.emmission-max');
				
		var posMax = 134;
		var posMin = 134;
		
		var valMin = parseInt($('.emmission-range-min').val(), 10);
		var valMax = parseInt($('.emmission-range-max').val(), 10);
		
		var curMin = valMin;
		var curMax = valMax;
				
		var tick = (valMax - valMin) / 134;
		
		var tock = 134/(valMax - valMin);
		var current = parseInt(inputMax.val(), 10);
		var pos = (valMax - current) * tock;
		max.css({ right: pos });
		range.css({ width: 137 - pos });

	/*	min.mousedown(function(e) {
			e.preventDefault();
			var x = slider.offset().left + (min.width()/2);
			slider.bind(EVENT_MOUSEMOVE, function(e) {
				var left = e.pageX - x;
				left = (left < 0) ? 0 : left;
				left = (left > posMax) ? posMax : left;
				min.css({ left: left });
				posMin = 122 - left;
				if (inputMin.val() != Math.round(valMin + (left * tick))) {
					inputMin.val(Math.round(valMin + (left * tick)));
				}
			});
		});*/

		min.hide();
		
		inputMax.keydown(function(e) {
			var help = $('.help','.emmission')
			help.fadeIn();
			var evt = e || window.event;
			
			if(evt.keyCode == 13){
				evt.preventDefault();
				if (inputMax.val() > valMax) {
					inputMax.val(valMax);
				} else if (inputMax.val() < valMin) {
					inputMax.val(valMin);
				}
				var current = parseInt(inputMax.val(), 10);
				var pos = (valMax - current) * tock;
				max.css({ right: pos });
				range.css({ width: 137 - pos });
				help.fadeOut();
				inputMax.trigger(EVENT_CHANGE);
			}
		});
		
		max.mousedown(function(e) {
			e.preventDefault();
			var x = slider.offset().left + slider.width() - (max.width()/2);
			slider.bind(EVENT_MOUSEMOVE, function(e) {
				var right = x - e.pageX;
				right = (right < 0) ? 0 : right;
				right = (right > posMin) ? posMin : right;
				max.css({ right: right });
				posMax = 122 - right;
				if (inputMax.val() != Math.round(valMax - (right * tick))) {
					inputMax.val(Math.round(valMax - (right * tick)));
				}

				range.css({width: posMax + 15});
			});
		});
				
		slider.mouseup(function(e) {
			slider.unbind(EVENT_MOUSEMOVE);
			if (curMin !== parseInt(inputMin.val())) {
				inputMin.trigger(EVENT_CHANGE);
				curMin = parseInt(inputMin.val());
			}
			if (curMax !== parseInt(inputMax.val())) {
				inputMax.trigger(EVENT_CHANGE);
				curMax = parseInt(inputMax.val());
			}
		}).mouseleave(function(e) {
			slider.unbind(EVENT_MOUSEMOVE);
			if (curMin !== parseInt(inputMin.val())) {
				inputMin.trigger(EVENT_CHANGE);
				curMin = parseInt(inputMin.val());
			}
			if (curMax !== parseInt(inputMax.val())) {
				inputMax.trigger(EVENT_CHANGE);
				curMax = parseInt(inputMax.val());
			}
		});
				
		this.container.find('.emmission .thin').eq(0).after(slider);
		
		var lists = this.container.find('fieldset ul:not(.no-collapse)');
		lists.each(function(){
			var list = this;
			var items = $('li', list);
			var l = items.length;
			if(l > 4) {
				for(var i=4; i<l; i++) {
					items.eq(i).addClass('more');
				}
				$(this).append('<li><a class="toggle-more" href="#">Meer</a></li>');
				var link = $('a.toggle-more', list);
				link.click(function (e) {
					e.preventDefault();
					$(list).toggleClass('show-more');
					
					this.innerHTML = (this.text == "minder") ? "meer" : "minder";
					
					FilterView.updateGUI();
				});
			}
		});

		var energy = $('fieldset.energy div.switch');
		if(energy.length) {
			var select = $('fieldset.energy select')[0];
			var colors = energy.find('div.colors');
			var mask = energy.find('div.mask-colors');
			var energylabel = 0;
			var currentLabel = -1;

			var index = select.selectedIndex;
			var init = index * 32;
			mask.css({
				'background-position': init + 'px 0'
			});
			
			colors.mousedown(function(e) {
				var mx = colors.offset().left;
				var tx = e.clientX;
				var left = tx - mx;
				left = Math.min(Math.max(left, 0), 220);
				var pw = mask[0].offsetWidth;
				var step = 32;
				var mod = left - (left % step);
				energylabel = Math.round(mod / 32);
				mask.css({
					'background-position': mod + 'px 0'
				});

				if(energylabel != currentLabel) {
					select.selectedIndex = energylabel;
					currentLabel = energylabel;
					$(select).trigger(EVENT_CHANGE);
				}
			});
		}
		
		// IE (6,7,8) won't trigger change on radio/check until it's blurred; force it
		if(/msie/i.test(navigator.userAgent)) {
			var elements = this.container.find('input:radio, input:checkbox')
			elements.bind(EVENT_CLICK, function(){
				var input = $(this);
				input.trigger(EVENT_CHANGE);
				input.trigger(EVENT_BLUR);
			});
		}
	};
	
	FilterView.toggle = function(e) {
		
		var container = this.container;
		var show = this.show;
		
		var w = show ? 8 : 280;
		this.show = show ? false : true;

		FilterView.container.stop().animate({ width: w }, 750, 'easeOutExpo', function(){
			FilterView.updateGUI()
		});
		
		if (e && e.preventDefault) {
		    e.preventDefault();
		}
	};
	
	/*
	* function to close the view if it's open (used with setTimeout)
	*/
	FilterView.close = function(e) {
		if (this.show) {
			this.toggle(e);
		}
	};
	
	FilterView.bind = function(event, callback) {
		var elements = this.container.find('input, select');
		elements.bind(event, callback);
	};
	FilterView.updateGUI = function() {
		var filter = $('form.filter-options');
		var content = $('div.content').eq(0);
		content.css({
			'min-height': 620
		});
		
		var h = filter.height() + 50;
		var c = content.height();
		var mh = Math.max(c, h);
		content.css({
			'min-height': mh
		});
	};
	
	var LoaderView = new View(LOADER_VIEW);
	LoaderView.toggle = function(show) {
		
		var container = this.container;
		if (show) container.fadeIn();
		else container.fadeOut();
		
	};
	
	var ResultsView = new View(RESULTS_VIEW);
	ResultsView.render = function(e, data, callback) {
		
		var container = this.container;
		LoaderView.toggle(true);
		
		$.ajax({
			type: 'get',
			url: FILTER_HANDLER,
			dataType: 'text/html',
			data: LBi.Forms.serialize(FilterView.container) + (data || ''),
			success: function(response) {

				container.empty();
				container.append(response);

                try {
    				var checkboxSelectionQuery = $.trim($('#applicable-filter-ids', container).html());
    				if (checkboxSelectionQuery && checkboxSelectionQuery.length > 0) {
				        // disable all checkboxes
				        FilterView.container.find(':checkbox').attr({disabled: true});
				        FilterView.container.find(checkboxSelectionQuery).attr({disabled: false});
				        FilterView.container.find(':checkbox:disabled').attr({checked: false});
				        // open collapsables if the first 4 options are *all* disabled
				        var ul = null;
				        // loop thru relevant ULs
				        FilterView.container.find('fieldset ul:not(.show-more) li:nth-child(4)').parent().each(function() {
				            ul = $(this);
				            // loop thru checkboxes, if one is enabled we skip to next UL
				            $(this).find(':checkbox').each(function(i) {
    				            if (!this.disabled) {
    				                return false;
    				            }
    				            if (i==3) {
    				                // we got here, so all 4 are disabled: show all options
    				                ul.find('a.toggle-more').click();
    				                return false;
    				            }
				            });
				        });
	    			}
                } catch(e) {}
				
				LoaderView.toggle(false);
				
				if (callback) { callback.apply(); };
				
			}
		});
	};
	
	var InfoView = new View(INFO_VIEW);
	InfoView.content = new LBi.Template(INFO_VIEW_CONTENT);
	InfoView.row = '';
	InfoView.render = function(e) {
		
		var container = this.container;
		var content = this.content;
		var row = this.row;

		var o = $(e.target).closest('td');
		if (!o.get(0) || $(o).hasClass('skip')) {
			container.hide();
			return false;
		} else {
			container.show();
		}
	
		var r = o.closest('tr');
		

		var cell = r.find('td:nth-child(2)');
		var cnt = $('div.content').offset();
		var offset = cell.offset();
		var height = cell[0].offsetHeight
		container.css({
			top: offset.top - cnt.top + height + 8,
			left: offset.left - cnt.left
		});

		if (row === r) {
			return false;
		} else {
			row = r;
		}
	
		var d = {};
		d.type = row.find('.type').html();
		d.norm = row.find('.norm').html();
		d.weight = row.find('.weight').html();
		d.soot = row.find('.soot').html();
		d.nox = row.find('.nox').html();
		d.efficiency = row.find('.efficiency').html();
	
		var html = content.parse(d)
		container.html(html);
	};
	
	var Controller = (function() {
		
		var open = false;
		
		var UserControls = new LBi.LinkRelations();
		UserControls.subscribe(REL_TOGGLE_FILTER, function(e) { FilterView.toggle(e); });
		UserControls.subscribe(REL_PAGINATE_RESULTS, function(e) { 
		    e.preventDefault();
    	    window.scroll(0,0);
    		LoaderView.toggle(true);
		    $.ajax({
			    type: 'get',
			    url: e.target.href, // URL is OK
			    dataType: 'text/html',
			    success: function(response) {
				    ResultsView.container.empty();
				    ResultsView.container.append(response);
				    LoaderView.toggle(false);
			    }
		    });
		});
		
		UserControls.subscribe(REL_PRINT_RESULTS, function(e) { e.preventDefault();
			var type = $(e.target).attr('rel').replace(REL_PRINT_RESULTS, '');
			
			
			switch (type) {
				case 'current' :
					window.print();
					break;
				case 'all' :
            	    window.scroll(0,0);
					LoaderView.toggle(true);
					ResultsView.render(e, 'paging=false', function() { 
    					LoaderView.container.hide();
					   	window.print();
					});
					break;
			}
			
		});
		
		FilterView.render();
		
		ResultsView.bind(EVENT_MOUSEMOVE, function(e) {
			InfoView.render(e);
		});
		
		FilterView.bind(EVENT_CHANGE, function(e) {
			ResultsView.render(e);
		});
		
	})();
	
	return {
	    FilterView: FilterView
	}
	
})(jQuery);

jQuery(function() {
	$('body').addClass('DOM-enabled');
	// close filter after 2secs
	window.setTimeout(MilieuTool.FilterView.close.bind(MilieuTool.FilterView), 2000);
});