jQuery(document).ready(function($){
	
	var interior = $("#interior");
	var interior_button = $("#interior_button");
	var interior_ticket = $("#interior_ticket");
	interior_button.css({"z-index":0});
	interior_ticket.css({opacity:0.7, "z-index":1});
	interior.hover(function(){
		toggleTicket(interior_ticket, true, 400);
	}, function(){
		toggleTicket(interior_ticket, false);
	});


	var editorial = $("#editorial");
	var editorial_button = $("#editorial_button");
	var editorial_ticket = $("#editorial_ticket");
	editorial_button.css({"z-index":10});
	editorial_ticket.css({opacity:0.7, "z-index":11});
	editorial.hover(function(){
		toggleTicket(editorial_ticket, true, 250);
	}, function(){
		toggleTicket(editorial_ticket, false);
	});
	
	var system = $("#system");
	var system_button = $("#system_button");
	var system_ticket = $("#system_ticket");
	system_button.css({"z-index":20});
	system_ticket.css({opacity:0.7, "z-index":21});
	system.hover(function(){
		toggleTicket(system_ticket, true, 300);
	}, function(){
		toggleTicket(system_ticket, false);
	});
	
});

function toggleTicket(ticket, inOut, ticket_top){
	var BUTTON_WIDTH = 200;
	var TICKET_WIDTH = 200;
	var DURATION = 100;
	
	if(inOut){
		ticket.css({"top":ticket_top + "px", "left":BUTTON_WIDTH + "px"});
		ticket.animate({
			"left":(BUTTON_WIDTH - TICKET_WIDTH) + "px"
		}, DURATION);
	}else{
		ticket.animate({
			"left":BUTTON_WIDTH + "px"
		}, DURATION);
	}
}