// JavaScript Document

(function($) {
	$.fn.wbflip = function(options) {
		var opts = $.extend({}, $.fn.wbflip.defaults, options);
		return this.each(function(i) {
								  
			var $this 				= $(this);
			$this.opts 				= $.extend({}, opts);
			$this.hover(
				function(event){
					clearTimeout($this.opts.to);
					$this.opts.to = null;
					$this.opts.to = setTimeout(function(){ 
						$.fn.wbflip.doflip($this,'front') 						
						clearTimeout($this.opts.to);
						$this.opts.to = null;
					},$this.opts.timeout);
				},
				function(event){
					if($this.opts.to != null){
						clearTimeout($this.opts.to);
						$this.opts.to = null;
					}else{
						$.fn.wbflip.doflip($this,'back');	
					}
				}
			);
			$this.find('img').addClass('original');
			$this.append('<img src="images/block_shadow.gif" class="flipover">');
			$this.find('.flipover').fadeTo(0,0);
			$this.find('img').wrapAll('<div class="flip" />');
			if($this.hasClass('active')){
				$.fn.wbflip.doflip($this,'front');	
			}
			$this.append('<img src="images/spacer.gif" class="clicker">');
		});
	};
	
	$.fn.wbflip.defaults = {
		speed 		: 300, 		// 	HOE SNEL OMSLAAN
		timeout 	: 100,		// 	EVEN WACHTEN VOORDAT DING GAAT DRAAIEN, ANDERS ZO SNEL
		shadow 		: 0.6,		// 	TRANSPARANTIE SHADOW LAYER
		to			: null, 	//  TIMEOUT VARIABELE, NIET AANKOMEN
		flipping 	: false,	//  FLIPPING FLAG, NIET AANKOMEN
		goback 		: false		//  GOBACK FLAG, NIET AANKOMEN
	};
	
	$.fn.wbflip.doflip = function($this,direction){
		if($this.hasClass('active')){  
			direction = 'front';
		}
		if($this.opts.flipping != true){
			$this.opts.flipping = true;
			if(direction == 'front'){
				if(!$this.hasClass('active')) $this.find('.original').css({top:'0px'});
				if(!$this.hasClass('active')) $this.find('.flipover').css({top:'0px'}).animate({opacity:$this.opts.shadow},$this.opts.speed,'easeInCubic');
				$this.find('.flip').animate({width:'0px',left:'50%'},$this.opts.speed,'easeInCubic', function(){
					$this.stop().find('.original').css({top:'-160px'});
					$this.stop().find('.flipover').css({top:'-160px'}).animate({opacity:0},$this.opts.speed,'easeOutCubic');
					$this.stop().find('.flip').animate({width:'160px',left:'0%'},$this.opts.speed,'easeOutCubic', function(){
						$this.opts.flipping = false;
						if($this.opts.gonext == 'back'){
							$this.opts.gonext = false;
							$.fn.wbflip.doflip($this,'back');
						}
					});
				})
			}else{				
				$this.find('.original').css({top:'-160px'});
				$this.find('.flipover').css({top:'-160px'}).animate({opacity:$this.opts.shadow},$this.opts.speed,'easeInCubic');
				$this.find('.flip').animate({width:'0px',left:'50%'},$this.opts.speed,'easeInCubic', function(){
					$this.stop().find('.original').css({top:'0px'});
					$this.stop().find('.flipover').css({top:'0px'}).animate({opacity:0},$this.opts.speed,'easeOutCubic');
					$this.stop().find('.flip').animate({width:'160px',left:'0%'},$this.opts.speed,'easeOutCubic', function(){
						$this.opts.flipping = false;
						if($this.opts.gonext == 'front'){
							$this.opts.gonext = false;
							$.fn.wbflip.doflip($this,'front');
						}										
					});
				})
			}
			
		}else if(direction == 'back'){
			$this.opts.gonext = 'back';	
		}else if(direction == 'front'){
			$this.opts.gonext = 'front';
		}
	};
	
})(jQuery);