// JavaScript Document
$(document).ready(function() {
	//Custom settings
	var style_in = 'easeOutQuart';
	var style_out = 'jswing';
	var speed_in = 400;//800;
	var speed_out = 600;//300;

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

	$('.qitem').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.open($(this).find('a').attr('href'));
    return false;
		//window.location = $(this).find('a').attr('href');
	});
});