(function(){
	
	var $ = jQuery;
	
	
	$(function(){
		
		/* add js-enabled class in case there's
		 * css dependant on the presence of javascript.
		 */
		$("body").addEnvironmentClass();
		
		// google map.
		$(".popup-map").popup({
			width: 1000,
			height: 750
		});

		// belbios popup
		$(".popup-belbios").popup({
			width: 471,
			height: 171,
			scrollbars: "no"
		});
		
		$(".film-carroussel").filmCarroussel();
		
		/* Filters plugin.
		 * 
		 */
		$("div.filters").movieFilters();
		
		/* removes text "Zoek!" on focus and
		 * puts the text "Zoek!" back on blur and when empty.
		 * 
		 */
		$(".search-panel input[type=text]").each(function(){
			
			var original = this.value;
			
			$(this).focus(function(){
				if(this.value == original)
					this.value = "";
			}).blur(function(){
				if(this.value == "")
					this.value = original;
			});
			
		});
		
		$(".side-box input[name=email]").focus(function(){
			if($(this).val() == "E-mail")
				$(this).val("");
		}).blur(function(){
			if($(this).val() == "")
				$(this).val("E-mail");
		});
		
		/* Fix banner adds messing with content components.
		 * CANNOT FIX IE!
		 */
		$("embed")
			.attr("wmode","transparent")
			.parent("div")
			.css("position","relative"); // forces a render.
		
		/* IE6 Hovers for li's.
		 * 
		 */
		$("li").hover(function(){
			$(this).addClass("hover");
		},function(){
			$(this).removeClass("hover");
		});
		
		$(".search-panel h6").click(function(e){
			$(".search-panel .panel:not(.closed)").addClass("closed");
			$(e.target).parent().removeClass("closed");
		});
		
		
		$(".equalize-height .inner").eqHeight();
		
	});
	
	
	
	$.fn.eqHeight = function()
	{
		var max = 0;
		
		this.each(function(){
			max = Math.max(max, $(this).height());
		}).height(max);
	}
	
	/**	Lots of customized code in movieFilters()
	 * 	Not reusable.
	 */
	$.fn.movieFilters = function(settings)
	{
		var settings = $.extend({},settings);
		
		/* Hover enforcer for IE6, since IE6 does not support
		 * :hover on other elements then links (<a>)
		 * Also using this code to set a timeout for
		 * css that implement .hover class.
		 */

		
		// get filter layer if present, otherwise undefined.
		var layer = $(".filter-options-layer");
		
		// set up filter layer if undefined.
		if(!layer.length)
		{
			$("body").append("<div class='filter-options-layer'>.</div>");
			layer = $(".filter-options-layer")
				.css("position","absolute")
				.hide();
		}
		
		var lastEdit, lastDropdown, current;
		
		/* Undo function to restore previous
		 * edit to original state.
		 */ 
		function undoLast()
		{
			if(lastDropdown)
				lastDropdown.removeClass("dropdown").addClass("dropdown-selected");
			if(lastEdit)
				$(lastEdit).show();
			layer.hide();
		}
		
		$(layer).click(function(e){
			if($(e.target).is("input[type=checkbox][value=0]"))
			{
				$("input:[value!=0]", this).attr("checked", e.target.checked);
				// force redraw
				layer[0].className = layer[0].className;
			}
			else if($(e.target).is("input[type=checkbox]:[value!=0]"))
			{
				if(!e.target.checked)
				{
					$("input[type=checkbox][value=0]", this).attr("checked", false);
					// force redraw
					layer[0].className = layer[0].className;
				}
				else if (!$("input[type=checkbox][value!=0]:not(:checked)", this).length)
				{
					$("input[type=checkbox][value=0]", this).attr("checked", true);
				}
			}
		});
		
		// change html of filtercomponents.
		$(".filter-component", this).each(function(){
			
			var form = $("form", this);
			
			if(form.length)
			{
				// Edit control
				
				var html = $(this).clone().removeClass("filter-component").addClass("content");
				
				/* reformat filter-component */
				form.remove();
				var self = $(this);
				
				$(this).prepend("<div class='edit'>aanpassen</div>");
				var edit = $(".edit", this);
				
				$(this).append("<div class='dropdown-selected'><ul /></div>");
				
				$("li.active", html).each(function(){
					var n = $(this).clone();
					$("input", n).remove();
					$(n).html($("label", n).text())
					$("ul", self).append(n);
				});

				/* reformat html for the pop layer. */
				$("ul", html).wrap("<div class='lists' />");
				
				var items = $("li", html);
				
				if(items.length > 10)
				{
					$("ul", html).after("<ul />");
					$("ul+ul", html).append(items.slice(Math.round(items.length / 2)));
				}
				
				/* event handling */
				$(this).click(function(){
					
					// prevent when current is already shown.
					if(current === this)
						return layer.show();
					
					current = this;
					
					// reset last (if applicable) filter component to original state.
					undoLast();
					
					// We need to show the layer or we cannot look up position and dimensions.
					layer.show();
					
					// copy filter html to layer.
					layer.html(html);
					
					var listCount = $("ul", layer).length;
					var layerWidth = (listCount > 1) ? 410 : 226;
					
					$(layer).width(layerWidth);
					
					// now we need to look up current positions and dimensions of
					// relative elements for positioning.
					var parentOffset = $(this).offset();
					var parentHeight = $(this).height();
					var layerHeight = $(layer).height();
					
					// calculate y and x positions. 
					var y = parentOffset.top - ((layerHeight / 2) - (parentHeight/2));
					var x = parentOffset.left - layerWidth - 10;
					
					// position layer
					layer.css({
						top: y,
						left: x
					});
					
					// we dont need to show the edit button anymore.
					$(edit).hide();
					
					// force redraw
					layer[0].className = layer[0].className;
					
					// override some variables for undoLast method
					lastDropdown = null;
					lastEdit = edit;
				});
				
				$(this).css({
					cursor: "pointer"
				});
			}
			
		});
		
	}
	
	jQuery.fn.addEnvironmentClass = function()
	{
		 var classes = ["JS"];
		 
		 if(jQuery.browser.msie)
		 {
			 classes.push("IE" + jQuery.browser.version.slice(0,1));
		 }
		 
		 $(this).addClass(classes.join(" "));
	}
	
	
	jQuery.fn.filmCarroussel = function(settings)
	{
		settings = $.extend({
			time: 5000
		}, settings);
		
		var nodeList = $("li", this),
			len = nodeList.length,
			firstNode = $(nodeList[0]),
			pos = 0,
			posDelta = 1;
		
		firstNode.addClass("active");
		
		var swap = function(){
			nodeList.removeClass("active");

			pos = pos + posDelta;

			if(pos >= len || pos < 0)
			{
				pos = (pos < 0) ? (len - 1) : 0;
			}
			
			$(nodeList[pos]).addClass("active");
			
			var marginDelta = pos <= 4 ? 0 : 0 - ((pos - 4) * 40);
			
			firstNode.stop(true);
			firstNode.animate({
				marginTop: marginDelta
			}, 200);
			
			posDelta = 1;
		}
		
		// timer controls movie swap intervals.
		var timer = {
			id: 0,
			stop: function()
			{
				clearInterval(timer.id);
			},
			play: function()
			{
				clearInterval(timer.id);
				timer.id = setInterval(swap, settings.time);
			}
		}
		
		// only initialize the timer when we have more then 1 listing.
		if(len > 1)
		{
			timer.play();
			
			$(this).hover(function(){
				timer.stop();
			},function(){
				timer.play();
			});
		}
		
		// only add up/down buttons if we have more then 5 listings.
		if(len > 5)
		{
			$(this).append("<div class='controls'><span class='down-button'>down</span><span class='up-button'>up</span></div>");
	
			$(".down-button", this).click(swap);
			
			$(".up-button", this).click(function(){
				posDelta = -1;
				swap();
			});
		}
		
	}
	
	$.fn.popup = function(settings)
	{
		var settings = $.extend({
			width: 550,
			height: 550,
			name: "Onstage",
			scrollbars: "yes"
		},settings);
		
		$(this).click(function(e){
			window.open(this.href, settings.name,"width="+settings.width+",height="+settings.height+",toolbar=no,scrollbars="+settings.scrollbars+",menubar=no,location=no,status=no");
			return false;
		});
	}
	
})();