/* jQuery functions for SLASH2 - March 2010 - SLASH2.nl */

$(document).ready(function() {
	
	$("#result_slider").easySlider({ numeric: true});
	$("#page_tabs").tabs();
	$("#page_sub_tabs").tabs();
	$(".ui-tabs .ui-tabs-panel > ul > li").prepend("» ");
	$("#default > ul > li").prepend("» ");
	$(".panel > ul > li").prepend("» ");
	
	$("#project_slider #items").roundabout();

	$(document).keydown(function(e){ 
		if (e.keyCode == 39) {  
		   $('#project_slider > #items').roundabout_animateToNextChild(); 
		   return false; 
		} 
	}); 
	$(document).keydown(function(e){ 
		if (e.keyCode == 37) {  
		   $('#project_slider > #items').roundabout_animateToPreviousChild(); 
		   return false; 
		} 
	}); 

	var newHeight = Number($(".scrollContainer div:eq(0)").height()+40);
	
	$('.scroll').animate({
		height: newHeight
	}, 500);
		
		
	$("#content > #default > p:eq(0)").addClass("big");
	var current_down; 
	
	$("a.large").click(function(){
		var box = $(this).attr("href");
		if(!current_down){
			//slide box down
			$(box).slideDown("slow");
			//add active class to link
			$("#"+this.id).addClass("active");
			//rotate image down
			$(box+"_arrow").attr("src", "/images/arrow_down.png");
			//set current_down
			current_down = box;			
		} else {
			if(current_down != box){
				//slide current_down up and new down
				$(current_down).slideUp("slow", function(){
					
					//slide box down
					$(box).slideDown("slow");
					//add active class to link
					$(box+"_link").addClass("active");
					//rotate image down
					$(box+"_arrow").attr("src", "/images/arrow_down.png");
				});
				//remove active from currentdown link
				$(current_down+"_link").removeClass("active");
				$(current_down+"_arrow").attr("src", "/images/arrow_right.png");
				current_down = box;
			} else {
				$(current_down).slideUp("slow");
				$(current_down+"_link").removeClass("active");
				$(current_down+"_arrow").attr("src", "/images/arrow_right.png");
				current_down = null;
			}
		}
	});
	
	//var tipid;
	
	$(".module_item").mouseover(function(){
		$(this).toggleClass("highlight");		
	}).mouseout(function(){
		$(this).toggleClass("highlight");
	});
	
	$(".showtooltip").tooltip({ 
		relative: true,
		offset: [170, 10],
		effect: 'slide'				 
	});
	

	
	var $panels = $('#content_slider .scrollContainer > div');
    var $container = $('#content_slider .scrollContainer');
	
	if($panels.length > 0){
		// if false, we'll float all the panels left and fix the width 
		// of the container
		var horizontal = true;
	
		// float the panels left if we're going horizontal
		if (horizontal) {
			$panels.css({
				'float' : 'left',
				'position' : 'relative' // IE fix to ensure overflow is hidden
			});
	
			// calculate a new width for the container (so it holds all panels)
			$container.css('width', $panels[0].offsetWidth * $panels.length);
		}
	
		// collect the scroll object, at the same time apply the hidden overflow
		// to remove the default scrollbars that will appear
		var $scroll = $('#content_slider .scroll').css('overflow', 'hidden');
	
	   
	
		// handle nav selection
		function selectNav() {
			$(this)
				.parents('ul:first')
					.find('a')
						.removeClass('selected')
					.end()
				.end()
				.addClass('selected');
		}
	
		$('#content_slider .navigation').find('a').click(selectNav);
	
		// go find the navigation link that has this target and select the nav
		function trigger(data) {
			var el = $('#content_slider .navigation').find('a[href$="' + data.id + '"]').get(0);
			selectNav.call(el);
	
			var newHeight = Number($("#"+data.id).height()+40);
	
			$('.scroll').animate({
				height: newHeight
			}, 500);
	
	
		}
	
		if (window.location.hash) {
			trigger({ id : window.location.hash.substr(1) });
		} else {
			$('ul.navigation a:first').click();
		}
	
		// offset is used to move to *exactly* the right place, since I'm using
		// padding on my example, I need to subtract the amount of padding to
		// the offset.  Try removing this to get a good idea of the effect
		var offset = parseInt((horizontal ? 
			$container.css('paddingTop') : 
			$container.css('paddingLeft')) 
			|| 0) * -1;
	
	
		var scrollOptions = {
			target: $scroll, // the element that has the overflow
	
			// can be a selector which will be relative to the target
			items: $panels,
	
			navigation: '.navigation a',
	
			// selectors are NOT relative to document, i.e. make sure they're unique
			prev: 'img.left', 
			next: 'img.right',
	
			// allow the scroll effect to run both directions
			axis: 'xy',
	
			onAfter: trigger, // our final callback
	
			offset: offset,
	
			// duration of the sliding effect
			duration: 500,
	
			// easing - can be used with the easing plugin: 
			// http://gsgd.co.uk/sandbox/jquery/easing/
			easing: 'swing'			
			
		};
	
		// apply serialScroll to the slider - we chose this plugin because it 
		// supports// the indexed next and previous scroll along with hooking 
		// in to our navigation.
		$('#content_slider').serialScroll(scrollOptions);
	
		// now apply localScroll to hook any other arbitrary links to trigger 
		// the effect
		$.localScroll(scrollOptions);
	
		// finally, if the URL has a hash, move the slider in to position, 
		// setting the duration to 1 because I don't want it to scroll in the
		// very first page load.  We don't always need this, but it ensures
		// the positioning is absolutely spot on when the pages loads.
		scrollOptions.duration = 1;
		
		$.localScroll.hash(scrollOptions);
	}

	var currentMonth = 0;

	$("#slider").slider({
			animate: true,
			min: 0,
			max: $('#news > ul > li').length-1,
			value: 0,
			stop: function(event, ui) {
				//animate the total news
				$("#news > ul").animate({marginTop: "-"+ui.value*1000 }, { duration: 1500});
			}
	});

	$("#months > ul > li").click(function() {
		var index = $("#months > ul > li").index(this);
		$("#slider").slider("value", index);
		$("#news > ul").animate({marginTop: "-"+index*1000 }, { duration: 1500});
	});

	$("#case_img_picker > ul > li").click(function() {
		var index = $("#case_img_picker > ul > li").index(this);
		$("#case_img_picker > ul > li > img").removeClass("active");
		$("#case_img_picker > ul > li:nth-child("+(index+1)+") img").addClass("active");
		$("#case_img_holder > ul").animate({marginLeft: "-"+index*604 }, { duration: 1000});
	});


	
	/*FORM VALIDATION*/
	
	var default_message_empty = "Er is geen {value} ingevuld.";
	var default_message_empty_plural = "Er zijn geen {value} ingevuld.";
	var default_message_notvalid = "Er is geen geldig {value} ingevuld.";
	var default_message_user_exists = "De gekozen {value} is al in gebruik.";
	
	//FORM CHECK FUNCTION
	
	$(".check").blur(function(){
		validate_field(this.id);	
	});
	
	
	$(".button").click(function(){
		
		var form = $(this).parents("form").attr("id");
		var form_class = $(this).parents("form").attr("class");

		var valid;		
		var return_form = true;
		
		//check form		
		$(".check").each(function(){
			//check for each field in the form with the class check			
			validate_field(this.id);
			
			valid = validate_field(this.id);
			
			if(!valid) {
				return_form = false;
			}	
		});
		
		//submit the form
		if(return_form) {
			$(".error_form").remove();
			$("#"+form).submit();
		} else {
			if($("#error_form_msg").length == 0) {
				$("#"+form).prepend("<label id=\"error_form_msg\" class=\"error_form\">Het formulier is niet verstuurd, controleer de gearceerde velden:</label>");	
			}			
		}
		
	});
	
	var form_valid = true;
	
	function validate_field(check_field){

		//REGEXP
		var email_regexp = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
		var phone_regexp = /(^\+[0-9]{2}|^\+[0-9]{2}\(0\)|^\(\+[0-9]{2}\)\(0\)|^00[0-9]{2}|^0)([0-9]{9}$|[0-9\-\s]{10}$)/;
		var zipcode_regexp = /^[1-9]{1}[0-9]{3}\s?[a-zA-Z]{2}$/;
		var url_regexp = /(((ht|f)tp(s?):\/\/)|(www\.[^ \[\]\(\)\n\r\t]+)|(([012]?[0-9]{1,2}\.){3}[012]?[0-9]{1,2})\/)([^ \[\]\(\),;&quot;'&lt;&gt;\n\r\t]+)([^\. \[\]\(\),;&quot;'&lt;&gt;\n\r\t])|(([012]?[0-9]{1,2}\.){3}[012]?[0-9]{1,2})/
		var bank_regexp = /^[0-9]{7,}$/;
		var file_regexp = /^.*\.(jpg|JPG)$/;
		var amount_regexp = /^[0-9]{0,7}\,[0-9]{0,2}$/;
		
		var field_type = $("#"+check_field).attr("type");
		var field_value = document.getElementById(check_field).value;
				
		//generate the error message with the label
		var name = $("label[for='"+check_field+"']").text();
		var name_strip = name.replace("Uw", "");

		var message = default_message_empty.replace("{value}", name_strip.toLowerCase());
		var message_plural = default_message_empty_plural.replace("{value}", name_strip.toLowerCase());
		var message_notvalid = default_message_notvalid.replace("{value}", name_strip.toLowerCase());
		var message_userexists = default_message_user_exists.replace("{value}", name_strip.toLowerCase());
		
		var message_selector = "#"+check_field+" + .error";
	
		//default check
		if(!field_value) {
			//check if message already is set
			if($(message_selector).length == 0) {
				//append the message for this id
				$("#"+check_field).addClass("error");
				if(check_field == "initials"){
					$("#"+check_field).after("<label class=\"error\">"+message_plural+"</label>");						
				} else {
					$("#"+check_field).after("<label class=\"error\">"+message+"</label>");	
				}
			}
			
			form_valid = false;
			
		} else {
			//remove the default message
			$("#"+check_field).removeClass("error");
			$(message_selector).remove();			
			form_valid = true;
		}
		
		//check if there is a different field to check
		switch(check_field){
			case "zipcode":
				//check zipcode
				if(zipcode_regexp.test(field_value)){
					$("#"+check_field).removeClass("error");
					$(message_selector).remove();
					form_valid = true;
				} else {
					if($(message_selector).length == 0) {
						$("#"+check_field).addClass("error");
						$("#"+check_field).after("<label class=\"error\">"+message_notvalid+"</label>");
					}
					form_valid = false;
				}
				break;
			case "emailaddress":
				//check email
				if(email_regexp.test(field_value)){
					$("#"+check_field).removeClass("error");
					$(message_selector).remove();
					form_valid = true;
				} else {
					if($(message_selector).length == 0) {
						$("#"+check_field).addClass("error");
						$("#"+check_field).after("<label class=\"error\">"+message_notvalid+"</label>");
					}
					form_valid = false;
				}
				break;
			case "phone":
				//check checkbox
				if($("#contact_box").is(":checked")){
					//check phone
					if(phone_regexp.test(field_value)){
						$("#"+check_field).removeClass("error");
						$(message_selector).remove();
						form_valid = true;
					} else {
						if($(message_selector).length == 0) {
							$("#"+check_field).addClass("error");
							$("#"+check_field).after("<label class=\"error\">"+message_notvalid+"</label>");
						}
						form_valid = false;
					}
				} else {
					$("#"+check_field).removeClass("error");
					$(message_selector).remove();			
					form_valid = true;
				}
				break;
					
		}
				
		return form_valid;
	}
	



});




/*
 * 	Easy Slider 1.7 - jQuery plugin
 *	written by Alen Grakalic	
 *	http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding
 *
 *	Copyright (c) 2009 Alen Grakalic (http://cssglobe.com)
 *	Dual licensed under the MIT (MIT-LICENSE.txt)
 *	and GPL (GPL-LICENSE.txt) licenses.
 *
 *	Built for jQuery library
 *	http://jquery.com
 *
 */
(function($) {

	$.fn.easySlider = function(options){
	  
		// default configuration properties
		var defaults = {			
			prevId: 		'prevBtn',
			prevText: 		'Previous',
			nextId: 		'nextBtn',	
			nextText: 		'Next',
			controlsShow:	true,
			controlsBefore:	'',
			controlsAfter:	'',	
			controlsFade:	true,
			firstId: 		'firstBtn',
			firstText: 		'First',
			firstShow:		false,
			lastId: 		'lastBtn',	
			lastText: 		'Last',
			lastShow:		false,				
			vertical:		false,
			speed: 			800,
			auto:			false,
			pause:			2000,
			continuous:		false, 
			numeric: 		false,
			numericId: 		'controls'
		}; 
		
		var options = $.extend(defaults, options);  
				
		this.each(function() {  
			var obj = $(this); 				
			var s = $("li", obj).length;
			var w = $("li", obj).width(); 
			var h = $("li", obj).height(); 
			var clickable = true;
			obj.width(w); 
			obj.height(h); 
			obj.css("overflow","hidden");
			var ts = s-1;
			var t = 0;
			$("ul", obj).css('width',s*w);			
			
			if(options.continuous){
				$("ul", obj).prepend($("ul li:last-child", obj).clone().css("margin-left","-"+ w +"px"));
				$("ul", obj).append($("ul li:nth-child(2)", obj).clone());
				$("ul", obj).css('width',(s+1)*w);
			};				
			
			if(!options.vertical) $("li", obj).css('float','left');
								
			if(options.controlsShow){
				var html = options.controlsBefore;				
				if(options.numeric){
					html += '<ol id="'+ options.numericId +'"></ol>';
				} else {
					if(options.firstShow) html += '<span id="'+ options.firstId +'"><a href=\"javascript:void(0);\">'+ options.firstText +'</a></span>';
					html += ' <span id="'+ options.prevId +'"><a href=\"javascript:void(0);\">'+ options.prevText +'</a></span>';
					html += ' <span id="'+ options.nextId +'"><a href=\"javascript:void(0);\">'+ options.nextText +'</a></span>';
					if(options.lastShow) html += ' <span id="'+ options.lastId +'"><a href=\"javascript:void(0);\">'+ options.lastText +'</a></span>';				
				};
				
				html += options.controlsAfter;						
				$(obj).after(html);										
			};
			
			if(options.numeric){									
				for(var i=0;i<s;i++){

					//check for title if exists make it
					var title = $("li > img:eq("+i+")", obj).attr("title");
					
					if(title) {
						title = title;
					} else {
						title = (i+1);
					}

					$(document.createElement("li"))
						.attr('id',options.numericId + (i+1))
						.html('<a rel='+ i +' href=\"javascript:void(0);\">'+ title +'</a>')
						.appendTo($("#"+ options.numericId))
						.click(function(){							
							animate($("a",$(this)).attr('rel'),true);
						}); 												
				};							
			} else {
				$("a","#"+options.nextId).click(function(){		
					animate("next",true);
				});
				$("a","#"+options.prevId).click(function(){		
					animate("prev",true);				
				});	
				$("a","#"+options.firstId).click(function(){		
					animate("first",true);
				});				
				$("a","#"+options.lastId).click(function(){		
					animate("last",true);				
				});				
			};
			
			function setCurrent(i){
				i = parseInt(i)+1;
				$("li", "#" + options.numericId).removeClass("current");
				$("li#" + options.numericId + i).addClass("current");
			};
			
			function adjust(){
				if(t>ts) t=0;		
				if(t<0) t=ts;	
				if(!options.vertical) {
					$("ul",obj).css("margin-left",(t*w*-1));
				} else {
					$("ul",obj).css("margin-left",(t*h*-1));
				}
				clickable = true;
				if(options.numeric) setCurrent(t);
			};
			
			function animate(dir,clicked){
				if (clickable){
					clickable = false;
					var ot = t;				
					switch(dir){
						case "next":
							t = (ot>=ts) ? (options.continuous ? t+1 : ts) : t+1;						
							break; 
						case "prev":
							t = (t<=0) ? (options.continuous ? t-1 : 0) : t-1;
							break; 
						case "first":
							t = 0;
							break; 
						case "last":
							t = ts;
							break; 
						default:
							t = dir;
							break; 
					};	
					var diff = Math.abs(ot-t);
					var speed = diff*options.speed;						
					if(!options.vertical) {
						p = (t*w*-1);
						$("ul",obj).animate(
							{ marginLeft: p }, 
							{ queue:false, duration:speed, complete:adjust }
						);				
					} else {
						p = (t*h*-1);
						$("ul",obj).animate(
							{ marginTop: p }, 
							{ queue:false, duration:speed, complete:adjust }
						);					
					};
					
					if(!options.continuous && options.controlsFade){					
						if(t==ts){
							$("a","#"+options.nextId).hide();
							$("a","#"+options.lastId).hide();
						} else {
							$("a","#"+options.nextId).show();
							$("a","#"+options.lastId).show();					
						};
						if(t==0){
							$("a","#"+options.prevId).hide();
							$("a","#"+options.firstId).hide();
						} else {
							$("a","#"+options.prevId).show();
							$("a","#"+options.firstId).show();
						};					
					};				

					//animate arrow
										
					$("#arrow").animate({marginLeft: 15+(t*225)}, speed);

					if(clicked) clearTimeout(timeout);
					if(options.auto && dir=="next" && !clicked){;
						timeout = setTimeout(function(){
							animate("next",false);
						},diff*options.speed+options.pause);
					};
			
				};
				
			};
			// init
			var timeout;
			if(options.auto){;
				timeout = setTimeout(function(){
					animate("next",false);
				},options.pause);
			};		
			
			if(options.numeric) setCurrent(0);
		
			if(!options.continuous && options.controlsFade){					
				$("a","#"+options.prevId).hide();
				$("a","#"+options.firstId).hide();				
			};				
			
		});
	  
	};

})(jQuery);