/*
 * 	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
 *
 */
 
/*
 *	markup example for $("#slider").easySlider();
 *	
 * 	<div id="slider">
 * 	  <div class="left">
 *		<ul>
 *			<li><img src="images/01.jpg" alt="" /></li>
 *			<li><img src="images/02.jpg" alt="" /></li>
 *			<li><img src="images/03.jpg" alt="" /></li>
 *			<li><img src="images/04.jpg" alt="" /></li>
 *			<li><img src="images/05.jpg" alt="" /></li>
 *		</ul>
 * 	  </div>
 * 	  <div class="right">
 *		<ul>
 *			<li><img src="images/01.jpg" alt="" /></li>
 *			<li><img src="images/02.jpg" alt="" /></li>
 *			<li><img src="images/03.jpg" alt="" /></li>
 *			<li><img src="images/04.jpg" alt="" /></li>
 *			<li><img src="images/05.jpg" alt="" /></li>
 *		</ul>
 * 	  </div>
 *	</div>
 *
 */

(function($) {

	$.fn.doubleSlider = function(options){
	  
		// default configuration properties
		var defaults = {			
			firstEl: 		'left',
			secondEl: 		'right',
			prevText: 		'Previous',
			nextId: 		'nextBtn',	
			nextText: 		'Next',
			controlsShow:	true,
			controlsBefore:	'',
			controlsAfter:	'',	
			controlsFade:	true,
			speed: 			1000,
			auto:			false,
			pause:			4000,
			continuous:		false
		}; 
		
		var options = $.extend(defaults, options);  
		var $clicked = 0;  
		this.each(function() {  
				var obj = $(this);
				var $marginFirst = $("."+options.firstEl, obj);
				var $marginSecond = $("."+options.secondEl, obj);
				var leftylis = $("li",$marginFirst).length;
				var t = 1;
				var ot = 0;
				var ts = leftylis-1;
				var leftytimeout;
				var animated;
				$('li', obj).each(function() { 
					$(this).append('<div class="zoomOverlay"></div>');
					$('img', this).addClass('thumb').clone().removeClass('thumb').removeAttr('alt').prependTo($(this).find('.zoomOverlay'));
					$('.zoomOverlay img', this).attr('src',$('.zoomOverlay img', this).attr('src').replace(".png", "-notes.png"));
				});
				var $originalImgpadding = parseInt($('.thumb', $marginSecond).first().css('left'),10);
				if ($(obj).outerWidth()<406) {
					$('li', $marginFirst).css({
					  marginTop: $('li', $marginFirst).outerHeight() + 'px',
					  opacity: 0,
					  display: 'block'
					});
					$('li', $marginSecond).css({
					  top: -$('li', $marginSecond).outerHeight() + 'px',
					  opacity: 0,
					  display: 'block'
					});
				} else {
					$('li', $marginFirst).css({
					  marginLeft: $('li', $marginFirst).outerWidth() + 'px',
					  opacity: 0,
					  display: 'block'
					});
					$('li', $marginSecond).css({
					  left: -$('li', $marginSecond).outerWidth() + 'px',
					  opacity: 0,
					  display: 'block'
					});
				}
/**/

	window.onorientationchange = function() {
		var orientation = window.orientation;
		$('.click', obj).css({opacity: 1});
		$('.zoomOverlay', obj).css({opacity: 0}).hide();
		obj.find('.thumb').attr('style','');
		$clicked=0;
		clearTimeout(leftytimeout);
		$originalImgpadding = parseInt($('.thumb', $marginSecond).first().css('left'),10);
		if($(obj).outerWidth()<406) {
			$('li', $marginFirst).css({
			  marginTop: $('li', $marginFirst).outerHeight() + 'px',
			  marginLeft: 'auto',
			  opacity: 0,
			  display: 'block'
			});
			$('li', $marginSecond).css({
			  top: -$('li', $marginSecond).outerHeight() + 'px',
			  left: 'auto',
			  opacity: 0,
			  display: 'block'
			});
						if ($clicked==0) {
							leftytimeout = setTimeout(function(){
								animateDouble()
							},0);
						}
		}else{
			$('li', $marginFirst).css({
			  marginTop: '0px',
			  marginLeft: $('li', $marginFirst).outerWidth() + 'px',
			  opacity: 0,
			  display: 'block'
			});
			$('li', $marginSecond).css({
			  top: 'auto',
			  left: -$('li', $marginSecond).outerWidth() + 'px',
			  opacity: 0,
			  display: 'block'
			});
						if ($clicked==0) {
							leftytimeout = setTimeout(function(){
								animateDouble()
							},0);
						}
		}
	}

				function animateDouble(dir){
					if (dir == null) {
						dir = "next";
					}
					animated=true;
					if(t>ts) {t=0; ot=ts;}
					if(ot<=ts) {
						if ($(obj).outerWidth()<406) {
							if (parseInt($('li', $marginFirst).eq(ot).css('marginTop'),10) == 0) {
							  $('li', $marginFirst).eq(ot).animate({ opacity: 0, marginTop:$('li', $marginFirst).eq(ot).outerHeight()},options.speed);
							}
							if (parseInt($('li', $marginSecond).eq(ot).css('top'),10) == 0) {
							  $('li', $marginSecond).eq(ot).animate({ opacity: 0, top:-$('li', $marginSecond).eq(ot).outerHeight()},options.speed);
							}
						} else {
							if (parseInt($('li', $marginFirst).eq(ot).css('marginLeft'),10) == 0) {
							  $('li', $marginFirst).eq(ot).animate({ opacity: 0, marginLeft:$('li', $marginFirst).eq(ot).outerWidth()},options.speed);
							}
							if (parseInt($('li', $marginSecond).eq(ot).css('left'),10) == 0) {
							  $('li', $marginSecond).eq(ot).animate({ opacity: 0, left:-$('li', $marginSecond).eq(ot).outerWidth()},options.speed);
							}
						}
					}
					nexttimeout = setTimeout(function(){
						if ($(obj).outerWidth()<406) {
							  $('li', $marginFirst).eq(t).animate({
								opacity: 1,
								marginTop: parseInt($('li', $marginFirst).eq(t).css('marginTop'),10) == 0 ?
								$('li', $marginFirst).eq(t).outerHeight() : 0
							  },options.speed, function() {
								// Animation complete.
								animated=false;
							  });
							  $('li', $marginSecond).eq(t).animate({
								opacity: 1,
								top: parseInt($('li', $marginSecond).eq(t).css('top'),10) == 0 ?
								-$('li', $marginSecond).eq(t).outerHeight() : 0
							  },options.speed, function() {
								// Animation complete.
								animated=false;
							  });
						} else {
							  $('li', $marginFirst).eq(t).animate({
								opacity: 1,
								marginLeft: parseInt($('li', $marginFirst).eq(t).css('marginLeft'),10) == 0 ?
								$('li', $marginFirst).eq(t).outerWidth() : 0
							  },options.speed, function() {
								// Animation complete.
								animated=false;
							  });
							  $('li', $marginSecond).eq(t).animate({
								opacity: 1,
								left: parseInt($('li', $marginSecond).eq(t).css('left'),10) == 0 ?
								-$('li', $marginSecond).eq(t).outerWidth() : 0
							  },options.speed, function() {
								// Animation complete.
								animated=false;
							  });
						}
					  	// set original element
						ot = t;	
					  	// set next or prev element
						t = dir=="next" ? t+1 : t-1;
						leftytimeout = setTimeout(function(){
							animateDouble()
						},options.pause);
					},options.speed-200);
				}
				if ($(obj).outerWidth()<406) {
					$('li', $marginFirst).eq(0).css({display:"none",opacity: 1,marginTop:0}).fadeIn('slow');
					$('li', $marginSecond).eq(0).css({display:"none",opacity: 1,top:0}).fadeIn('slow');
				} else {
					$('li', $marginFirst).eq(0).css({display:"none",opacity: 1,marginLeft:0}).fadeIn('slow');
					$('li', $marginSecond).eq(0).css({display:"none",opacity: 1,left:0}).fadeIn('slow');
				}
				leftytimeout = setTimeout(function(){
					animateDouble()
				},options.pause);
				
				/*
				$("li",obj).click(function(){		
					clearTimeout(leftytimeout);
				});
				*/

				//click event for the image : 
				//show the overlay
				obj.find('.thumb').bind('click',function(){
					if (!animated) {
						clearTimeout(leftytimeout);
						$clicked = $clicked+1;
						var $elem	= $(this);
						var $title	= $(this).parent().parent().parent().find('.click');
						var $image	= $(this);
						var $owidth = $image.outerWidth();
						var $nwidth = $image.outerWidth()/1.2;
						var $oheight = $image.outerHeight();
						var $nheight = $image.outerHeight()/1.2;
						if ($.browser.msie && parseInt($.browser.version)<9) {
							$image.stop(true)
								  .animate({
									width	: $nwidth,
									height	: $nheight,
									bottom	: ($oheight-$nheight)/2
								
								  },250);
						}else{
							$image.stop(true)
								  .animate({
									width	: $nwidth,
									height	: $nheight,
									bottom	: ($oheight-$nheight)/2,
									right	: $image.parent().parent().parent().hasClass(options.firstEl) && $(obj).outerWidth()>406 ?
												parseInt($image.css('right'),10)+($owidth-$nwidth)/2 : 'auto',
									left	: $image.parent().parent().parent().hasClass(options.secondEl) || $(obj).outerWidth()<406 ?
												parseInt($image.css('left'),10)+($owidth-$nwidth)/2 : 'auto'
								
								  },250);
						}
						//the overlay is the next element
						
						var opacity	= 1;
						/*	*/
						if($.browser.msie)
							opacity	= 0.5
					
						$elem.next()
							 .stop(true)
							 .animate({
								'opacity'	: opacity
							},250,function(){
								//fade in the annotations
								$(this).fadeIn();
							});
						if ($.browser.msie && parseInt($.browser.version)<9) {
						}else{
							$title.stop(true)
								  .animate({
									'opacity'	: 0.2
								  },250);
						}
						/*	  */
					}
				});
				
				//click event for the overlay :
				//show the image again and hide the overlay
				obj.find('.zoomOverlay').bind('click',function(){
					if (!animated) {
						$clicked = $clicked-1;
						var $elem	= $(this);
						var $image	= $elem.prev();
						var $title	= $(this).parent().parent().parent().find('.click');
						//hide overlay
						$elem.hide()
							 .end()
							 .stop(true)
							 .animate({
								'opacity'	:0
							 },125,function(){
								//hide overlay
								$(this).hide();
							 });
													
						//show image	 
						if ($.browser.msie && parseInt($.browser.version)<8) {
							$image.stop(true)
								  .animate({
									width	: $image.width()*1.2,
									height	: $image.height()*1.2,
									bottom	: 0
								  },250);
						}else{
							$image.stop(true)
								  .animate({
									width	: $image.width()*1.2,
									height	: $image.height()*1.2,
									bottom	: 0,
									right	: $image.parent().parent().parent().hasClass(options.firstEl) && $(obj).outerWidth()>406 ?
												$originalImgpadding : 'auto',
									left	: $image.parent().parent().parent().hasClass(options.secondEl) || $(obj).outerWidth()<406 ?
												$originalImgpadding : 'auto'
								  },250);
						}
						$title.stop(true)
							  .animate({
								'opacity'	:1
							  },250);
						if ($clicked==0) {
							leftytimeout = setTimeout(function(){
								animateDouble()
							},options.pause);
						}
					}
				});


				  
		});
	};

})(jQuery);