(function($) {
	// plugin init
	$.fn.filterFacets = function(options) {
		$.fn.filterFacets.opts = $.extend({}, $.fn.filterFacets.defaults, options);
		
		return this.each(function() {
			var $this = $(this);
			$this.initial_run = true;
			
			// event handling
			$.fn.filterFacets.bind_events($this);
			
			$.fn.filterFacets.load_data($this, $.fn.filterFacets.opts.url, $.fn.filterFacets.build_ui);
		});
	};
	
	// load json data
	$.fn.filterFacets.load_data = function($this, url, callback) {
		// loader...
		//$(".loader").show();
		$("#sort_options").attr("disabled", true);
		$this.find("input[type=checkbox]").attr("disabled", true);
    	$this.find("li").css("color", "grey");
		$("#filter-count").html("<img height=15 width=15 src='https://assets.egypte.nl/site/layout/ajax-loader2.gif' />");

		// build params
		var params = {reistype:$.fn.filterFacets.opts.reistype};
		var facets = $("div.facet");
		
		if($this.initial_run) {
			var query = window.location.search.substring(1); 
			var vars = query.split("&"); 
			for (var i=0;i<vars.length;i++) { 
				var pair = vars[i].split("="); 
				if (pair[0] == "duration") { 
					params["duration"] = pair[1] + " dagen";
				}
				if (pair[0] == "datum") {
					params["datum"] = pair[1]+ "T00:00:00Z";
				} 
			} 
			
            // on request:
            // do not show filteroptions when params are given from the TripSearcher
			/*if(query.length) {
				$("#refine").trigger("click");
			}
            */
		}
		
		for(var i=0; i<facets.length; i++) {
			var facet = $(facets[i]);
			var facet_txt = facet.data("facet-name");
			
			if(facet_txt=="datum") {
				var dep_date = $("#depdate").datepicker("getDate");
				if(dep_date) params[facet_txt] = $.datepicker.formatDate('yy-mm-dd',dep_date)+"T00:00:00Z";
			} else {
				var values = facet.find("input:checked");
				if(values.length) {
					var tmp = [];
					
					for(var j=0; j<values.length; j++) {
						var value = $(values[j]).val().strip();
						tmp.push(value);
					}
					
					params[facet_txt] = tmp.join("|");
				}
			}
		} 
		
		params["sort_options"] = $("#sort_options").val(); 

		var daterange = $("input[name='daterange']:checked").val();
		if(daterange != undefined) {
			params["date-range"] = daterange;
		}
		
		$.getJSON(url, params, function(json_data) {
			$this.data("filter-facets", json_data);
			callback($this);
		});
		
		$this.initial_run = false;
	};
	
	// build filter 'widget'
	$.fn.filterFacets.build_ui = function($this) {
		$this.addClass("filter-facets");
		$this.find("*").remove();
		
		var data = $this.data("filter-facets");
		
		// templates
		var facet_tpl = '<div class="facet"><h1>${facet_title}</h1><ul>{{each values}}{{if value_count>0}}<li class="${(value_count==0)?"zero_results":""}"><input id="${facet_title}_${value_title}" value="${value_title}" ${(value_count==0)?"disabled":""} type="checkbox" {{if checked}}checked="checked"{{/if}}/><label for="${facet_title}_${value_title}"> ${value_title} (${value_count})</label></li>{{/if}}{{/each}}</ul></div>';
		
		
		$.each(data.facets, function(i, value) {			
			if(value.facet_name == 'datum') {
				// availability date array
				var datearr = new Array();
				var selected_date = ""
				for(var i=0; i< value.values.length; i++) {
					if(value.values[i].value_count) datearr.push(value.values[i].value_title);
					if(value.values[i].checked) selected_date = value.values[i].value_title;
				}
				
				var fmt_date = $.datepicker.parseDate('yy-m-d', selected_date.substr(0, 10));
				fmt_date = $.datepicker.formatDate('d-m-yy',fmt_date);
				
				var datefield_tpl = '<div class="facet vertrek" style="float:right;"><h1>Vertrekdatum</h1><input style="padding:3px;" type="text" id="depdate" value="'+fmt_date+'" size="15"/><br/><table><tr><td><input style="margin-left:6px;" type="radio" name="daterange" value="no-range" ' + ((!data.daterange)?('checked="checked"'):('')) + '/></td><td>&nbsp;Zoek op deze datum</td></tr><tr><td><input style="margin-left:6px;" type="radio" name="daterange" value="date-range" ' + ((data.daterange)?('checked="checked"'):('')) + '/></td><td><span>&nbsp;Zoek rond deze datum (+/- 3 dagen)</span></td></tr></table>';
				$(datefield_tpl).data("facet-name", value.facet_name).appendTo($this);
				
                $.datepicker.setDefaults($.datepicker.regional['nl']);
                
                var depdate = $("#depdate");
				
				depdate.datepicker({
					dateFormat: 'd-m-yy',
					onSelect: function () {
						$.fn.filterFacets.load_data($this, $.fn.filterFacets.opts.url, $.fn.filterFacets.build_ui);
					},
					beforeShowDay: function(date) { 
	                    el = new Array();
	                    temp = $.datepicker.formatDate('yy-mm-dd',date)+"T00:00:00Z";
	
                        if(jQuery.inArray(temp, datearr) > -1){ 
	                        el[0] = true;
	                    } else {
	                        el[0] = false;
	                    }            
	                    return el;
	                }
				});
				
				
			} else {
				$this.append($.tmpl(facet_tpl, value).data("facet-name", value.facet_name));
			}

			//$(".loader").hide();
			$("#sort_options").removeAttr("disabled");
			
			
		});
		
		$("#filter-count").text("("+data.results.length+")");
	
		$(".item").hide().removeClass("light").removeClass("dark");
		
		for(var i=0; i<data.results.length; i++) {
			var id = data.results[i].id;
			var price = data.results[i].price;
			var trip = $("#trip_"+id);
			trip.find("a.price span").html("&euro; "+price+",-");
			var parent = trip.parent();
//			
			var bg = ((i%2==0)?"light":"dark");
			var img_src = "https://assets.egypte.nl/site/layout/aanbod/list/photo_frame_" + bg + ".png";
			var trip_img = $("#trip_beeld_"+id);
			trip_img.attr("src", img_src);
//			
			trip.remove().appendTo(parent);
			trip.addClass(bg);
			trip.show();
		}

		
		
		
		// init loader-screen
		var loader = $("<div class='loader'></div>").width($this.width()).height($this.height());
		$this.append(loader);
		
		// clear
		$this.append($("<div style='clear: left;'></div>"));
		
		// refresh
		$.fn.filterFacets.refresh_ui($this);
	};
	
	// bind ui events
	$.fn.filterFacets.bind_events = function($this) {
		$this.find("input[type=checkbox]").live('click.filter-facets', function () {
			$.fn.filterFacets.load_data($this, $.fn.filterFacets.opts.url, $.fn.filterFacets.build_ui);
		});
		
		$this.find("input[type=radio]").live('click.filter-facets', function () {
			$.fn.filterFacets.load_data($this, $.fn.filterFacets.opts.url, $.fn.filterFacets.build_ui);
		});
		
		$("#sort_options").live('change.filter-facets', function () {
			$.fn.filterFacets.load_data($this, $.fn.filterFacets.opts.url, $.fn.filterFacets.build_ui);
		});
		
		$this.find("div.modified h1").live('click.filter-facets', function () {
			$("div.facet").has($(this)).find("input:checked").attr("checked", "");
			$("div.facet").has($(this)).find("input[type=text]").val("");
			$.fn.filterFacets.load_data($this, $.fn.filterFacets.opts.url, $.fn.filterFacets.build_ui);
		});
		
		$("#refine").live('click', function() {
			$("#filter-facets").toggle();
			$("#filter-toggle").toggleClass("toggled");
			$("#filter-toggle").toggleClass("untoggled");

            if($("#filter-toggle").hasClass("toggled")){
                jQuery.scrollTo($("#filter-toggle"));
            }

			return false;
		});
	}
	
	// refresh ui
	$.fn.filterFacets.refresh_ui = function($this) {
		var data = $this.data('filter-facets');		
		
		$this.find(".facet").each(function(i, value) {
			var facet = $(this);
			if(facet.find("input[type=checkbox]:checked").length || (facet.find("#depdate").length && facet.find("#depdate").val().strip())) {
				facet.addClass("modified");
			} else {	
				facet.removeClass("modified");
			}
		});
	}
	
	// plugin defaults
	$.fn.filterFacets.defaults = {
		url: 'http://dipsy.egypte.nl/reisfilter/?callback=?',
		reistype: 5
	};
	
	
})(jQuery);