$(document).ready(function() {

	//Custom settings
	var style_in = 'easeOutBounce';
	var style_out = 'jswing';
	var speed_in = 800;
	var speed_out = 300;	

	//Top and bottom
	var	top = $('.vslide').height() * (-1); 
	var	bottom = $('.vslide').height(); 

	$('.vslide').each(function () {

		//retrieve all the details of the image before removing it
		url = $(this).find('a').attr('href');
		img = $(this).find('img').attr('src');
		alt = $(this).find('img').attr('img');
		width = $(this).width() / 4; 
		height = $(this).height(); 
		
		//remove the image and append 4 div into it
		$('img', this).remove();
		$(this).append('<div class="bar1"></div><div class="bar2"></div><div class="bar3"></div><div class="bar4"></div>');
		
		//set the image as background image to all the bars
		$(this).children('div').css('background-image','url('+ img + ')');

		//Divide the image into 4 bars and rebuild the image
		$(this).find('div.bar1').css({top:0, left:0, width:width, height:height, backgroundPosition:'0 0' });	
		$(this).find('div.bar2').css({top:0, left:width, width:width, height:height, backgroundPosition:(width*-1) + 'px 0' });	
		$(this).find('div.bar3').css({bottom:0, left:width*2, width:width, height:height, backgroundPosition:(width*-2) + 'px 0' });	
		$(this).find('div.bar4').css({bottom:0, left:width*3, width:width , height:height, backgroundPosition:(width*-3) + 'px 0' });

	}).hover(function () {
		
		//Move those bar, 1st and 3rd move upward, 2nd and 4th move downward
		$(this).find('div.bar1').stop(false, true).animate({top:top}, {duration:speed_out, easing:style_out});	
		$(this).find('div.bar2').stop(false, true).animate({top:bottom}, {duration:speed_out, easing:style_out});	
		$(this).find('div.bar3').stop(false, true).animate({top:top}, {duration:speed_out, easing:style_out});	
		$(this).find('div.bar4').stop(false, true).animate({top:bottom}, {duration:speed_out, easing:style_out});	
				
	},
	
	function () {

		//Back to default position
		$(this).find('div.bar1').stop(false, true).animate({top:0}, {duration:speed_in, easing:style_in});	
		$(this).find('div.bar2').stop(false, true).animate({top:0}, {duration:speed_in, easing:style_in});	
		$(this).find('div.bar3').stop(false, true).animate({top:0}, {duration:speed_in, easing:style_in});	
		$(this).find('div.bar4').stop(false, true).animate({top:0}, {duration:speed_in, easing:style_in});	
	
	}).click (function () {
		
		//make the whole box clickable
		window.location = $(this).find('a').attr('href');	
	});

});

$(document).ready(function () {

		// transition effect
		style = 'easeOutQuart';

		// if the mouse hover the image
		$('.photo').hover(
			function() {
				//display heading and caption
				$(this).children('h3').stop(false,true).animate({top:0},{duration:200, easing: style});
				$(this).children('div:last').stop(false,true).animate({bottom:0},{duration:200, easing: style});
			},

			function() {
				//hide heading and caption
				$(this).children('h3').stop(false,true).animate({top:-50},{duration:200, easing: style});
				$(this).children('div:last').stop(false,true).animate({bottom:-50},{duration:200, easing: style});
			}
		);

	});
	

	jQuery(document).ready(function() {
		
		$("#archive-nav li").click(function(){
		    $("#archive-nav li").removeClass("current").addClass("");
		    $(this).addClass("current");
		});
		$("#article-nav li").click(function(){
		    $("#article-nav li").removeClass("current").addClass("");
		    $(this).addClass("current");
		});
	});