// Sliding Doors Effect


jQuery(document).ready(function() {
	  jQuery('.box_container').hover(function(){
		  var distance = jQuery(this).outerWidth();
		  jQuery(this).find('.box_image').animate({ left : distance },{queue:false,duration:500});
	  }, function(){
		  jQuery(this).find('.box_image').animate({ left : '0px' },{queue:false,duration:500});
	  });      
	  
	  jQuery('.box_container2').hover(function(){
		  var distance = jQuery(this).outerWidth();
		  jQuery(this).find('.box_image2').animate({ left : '-'+distance },{queue:false,duration:500});
	  }, function(){
		  jQuery(this).find('.box_image2').animate({ left : '0px' },{queue:false,duration:500});
	  });      
	  
	  jQuery('.box_container3').hover(function(){
		  var distance = jQuery(this).outerHeight();
		  jQuery(this).find('.box_image3').animate({ top : distance },{queue:false,duration:500});
	  }, function(){
		  jQuery(this).find('.box_image3').animate({ top : '0px' },{queue:false,duration:500});
	  });      
	  
	  jQuery('.box_container4').hover(function(){
		  var distance = jQuery(this).outerWidth();
		  jQuery(this).find('.box_image4').animate({ top : '-' + distance },{queue:false,duration:500});
	  }, function(){
		  jQuery(this).find('.box_image4').animate({ top : '0px' },{queue:false,duration:500});
	  });      
	  
	  jQuery('.box_container5').hover(function(){
		  var distance = jQuery(this).outerWidth();
		  jQuery(this).find('.box_image5').animate({ top : '-' + distance, left : '-'+distance },{queue:false,duration:500});
	  }, function(){
		  jQuery(this).find('.box_image5').animate({ top : '0px', left : '0px' },{queue:false,duration:500});
	  });      
	  
	  jQuery('.box_container6').hover(function(){
		  var distance = jQuery(this).outerWidth();
		  jQuery(this).find('.box_image6').animate({ top : '-' + distance, left : distance },{queue:false,duration:500});
	  }, function(){
		  jQuery(this).find('.box_image6').animate({ top : '0px', left : '0px' },{queue:false,duration:500});
	  });      
	  
	  jQuery('.box_container7').hover(function(){
		  var distance = jQuery(this).outerWidth();
		  jQuery(this).find('.box_image7').animate({ top : distance, left : '-'+distance },{queue:false,duration:500});
	  }, function(){
		  jQuery(this).find('.box_image7').animate({ top : '0px', left : '0px' },{queue:false,duration:500});
	  });      
	  
	  jQuery('.box_container8').hover(function(){
		  var distance = jQuery(this).outerWidth();
		  jQuery(this).find('.box_image8').animate({ top : distance, left : distance },{queue:false,duration:500});
	  }, function(){
		  jQuery(this).find('.box_image8').animate({ top : '0px', left : '0px' },{queue:false,duration:500});
	  });      
});



// Simple Fading Effect


jQuery(document).ready(function(){
	jQuery(".fade_top").hover(
		function() {
		jQuery(this).stop().animate({"opacity": "0"}, "slow");
	},
		function() {
		jQuery(this).stop().animate({"opacity": "1"}, "slow");
	});
});



// Full Caption Effect


jQuery(document).ready(function() {
	//move the image in pixel
	var move = -15;
	//zoom percentage, 1.2 =120%
	var zoom = 1.2;
	//On mouse over those thumbnail
	jQuery('.full_caption').hover(function() {
		//Set the width and height according to the zoom percentage
		width = jQuery('.full_caption').width() * zoom;
		height = jQuery('.full_caption').height() * zoom;
		//Move and zoom the image
		jQuery(this).find('img').stop(false,true).animate({'width':width, 'height':height, 'top':move, 'left':move}, {duration:200});
		//Display the caption
		jQuery(this).find('div.caption_text').stop(false,true).fadeIn(200);
	},
	function() {
		//Reset the image
		jQuery(this).find('img').stop(false,true).animate({'width':jQuery('.full_caption').width(), 'height':jQuery('.full_caption').height(), 'top':'0', 'left':'0'}, {duration:100});	
		//Hide the caption
		jQuery(this).find('div.caption_text').stop(false,true).fadeOut(200);
	});
});



// Other Caption Effects


(function(jQuery) {
	jQuery.fn.capslide = function(options) {
		var opts = jQuery.extend({}, jQuery.fn.capslide.defaults, options);
		return this.each(function() {
			jQuerythis = jQuery(this);
			var o = jQuery.meta ? jQuery.extend({}, opts, jQuerythis.data()) : opts;
			
			if(!o.showcaption)	jQuerythis.find('.img_caption').css('display','none');
			else jQuerythis.find('.text_caption').css('display','none');
				
			var _img = jQuerythis.find('img:first');
			var w = _img.css('width');
			var h = _img.css('height');
			jQuery('.img_caption',jQuerythis).css({'color':o.caption_color,'background-color':o.caption_bgcolor,'bottom':'0px','width':w});
			jQuery('.overlay',jQuerythis).css('background-color',o.overlay_bgcolor);
			jQuerythis.css({'width':w , 'height':h, 'border':o.border});
			jQuerythis.hover(
				function () {
					if((navigator.appVersion).indexOf('MSIE 7.0') > 0)
					jQuery('.overlay',jQuery(this)).show();
					else
					jQuery('.overlay',jQuery(this)).fadeIn();
					if(!o.showcaption)
						jQuery(this).find('.img_caption').slideDown(500);
					else
						jQuery('.text_caption',jQuery(this)).slideDown(500);	
				},
				function () {
					if((navigator.appVersion).indexOf('MSIE 7.0') > 0)
					jQuery('.overlay',jQuery(this)).hide();
					else
					jQuery('.overlay',jQuery(this)).fadeOut();
					if(!o.showcaption)
						jQuery(this).find('.img_caption').slideUp(200);
					else
						jQuery('.text_caption',jQuery(this)).slideUp(200);
				}
			);
		});
	};
	jQuery.fn.capslide.defaults = {
		caption_color	: 'white',
		caption_bgcolor	: 'black',
		overlay_bgcolor : 'blue',
		border			: '1px solid #fff',
		showcaption	    : true
	};
})(jQuery);


jQuery(function() {
	jQuery("#capslide1").capslide({
		caption_color	: 'white',
		caption_bgcolor	: 'black',
		overlay_bgcolor : 'black',
		showcaption	    : false
	});
	jQuery("#capslide2").capslide({
		caption_color	: 'black',
		caption_bgcolor	: '#f68a21',
		overlay_bgcolor : '#f68a21',
		border			: '',
		showcaption	    : false
	});
	jQuery("#capslide3").capslide({
		caption_color	: 'black',
		caption_bgcolor	: 'white',
		overlay_bgcolor : '#832EA5',
		showcaption	    : true
	});
});