// JavaScript Document

//var $j = jQuery.noConflict();


$j(document).ready(function(){

		
		
		$j("#infobutton").hover(function(){
				if(	$j(this).hasClass('infobuttonhover') ) {
					$j("#infobutton").removeClass('infobuttonhover');
				} else {
					$j("#infobutton").addClass('infobuttonhover');
				}
		});
		
		
	
	
		$j("#infobutton").click(function(){
		
				
	  
	  			if(	$j("#infobox").hasClass('infoboxopen') ) {
					
					
					closebox();
					
						 
				} else {
					
					
					
					$j("#boxcursor").removeAttr("style");
					
					$j("#boxcursor").show();
					
					$j("#smallbox1").removeAttr("style");
					$j("#smallbox2").removeAttr("style");
					$j("#smallbox3").removeAttr("style");
					
					$j("#infobox").animate({
					  height:202, width:202
					}, 1000, "easeOutExpo", function(){ playani(); });
					
					
					
				}
				
				
				function closebox() {
					
					
					
					$j("#infobox").animate({
					  height:14, width:14
					}, 1000, "easeOutExpo", function(){ 
					
						$j(this).removeClass("infoboxopen"); 
						$j("#boxcursor").removeAttr("style");
						$j("#smallbox1").removeAttr("style");
						$j("#smallbox2").removeAttr("style");
						$j("#smallbox3").removeAttr("style");
						
						$j("#boxcursor").hide();
						
						
					});
					
					
					$j("#boxcursor").queue("testQueue", []);
      				$j("#boxcursor").stop();
					
					//$j("#infobox").fadeIn('slow', function() {});
					
				}
				
				
				
				
				function playani() {
					
							$j("#infobox").addClass("infoboxopen");
							
							
							var position_2box = $j("#smallbox2").position();
							var position_3box = $j("#smallbox3").position();
							//boxcursor
							var versatz = 10;
							
						
							var para = $j("#boxcursor");
							
							
						/*	var zin_b = $j("#infobutton").css('zIndex');
							var zin_c = $j("#boxcursor").css('zIndex');
							$j("#infobutton").css('zIndex', zin_c);
							$j("#boxcursor").css('zIndex', zin_b);
							
							*/
							
							
							//para.css({'z-index' : '100'}); 
							
							
							
							para.queue(
								"testQueue",
								function( next ){
																 
									$j("#boxcursor").animate({
									  top:		position_2box.top + versatz, 
									  left:		position_2box.left + versatz
									}, {duration: 1000, queue: true, "easing":"easeOutExpo"});
									next();
								}
							);
							
							// Delay the queue for a bit.
							para.delay( 1000, "testQueue" );
							 
							// Add the next queue item.
							para.queue(
								"testQueue",
								function( next ){
									
									$j("#smallbox2").animate({
									  top:		position_2box.top+53, 
									  left:		position_2box.left
									}, {duration: 1000, queue: true, "easing":"easeOutExpo"});
									
									$j("#boxcursor").animate({
									  top:		position_2box.top + 53 + versatz, 
									  left:		position_2box.left + versatz
									}, {duration: 1000, queue: true, "easing":"easeOutExpo"});
									
									
									next();
								}
							);
							
							// Delay the queue for a bit.
							para.delay( 1000, "testQueue" );
							
							para.queue(
								"testQueue",
								function( next ){
									
																
									$j("#boxcursor").animate({
									  top:		position_3box.top + versatz, 
									  left:		position_3box.left + versatz
									}, {duration: 1000, queue: true, "easing":"easeOutExpo"});
									
									
									next();
								}
							);
							
							// Delay the queue for a bit.
							para.delay( 1000, "testQueue" );
							 
							// Add the next queue item.
							para.queue(
								"testQueue",
								function( next ){
									
									$j("#smallbox3").animate({
									  top:		position_3box.top, 
									  left:		position_3box.left+53
									}, {duration: 1000, queue: true, "easing":"easeOutExpo"});
									
									$j("#boxcursor").animate({
									  top:		position_3box.top + versatz, 
									  left:		position_3box.left + 53 + versatz
									}, {duration: 1000, queue: true, "easing":"easeOutExpo"});
									
									
									next();
								}
							);
							
							
							// Delay the queue for a bit.
							para.delay( 1000, "testQueue" );
							 
							// Add the next queue item.
							para.queue(
								"testQueue",
								function( next ){
																	
									
									$j("#boxcursor").animate({
									  top:		$j("#boxcursor").position().top-25, 
									  left:		$j("#boxcursor").position().left-40
									}, {duration: 2000, queue: true, "easing":"easeOutExpo"});
									
								//	$j("#boxcursor").fadeOut({duration: 2000});
									
									
									next();
								}
							);
							
							
							
						/*	para.delay( 500, "testQueue" );
							 
							// Add the next queue item.
							para.queue(
								"testQueue",
								function( next ){
																	
									
									$j("#boxcursor").fadeOut({duration: 1000});
									
									
									next();
								}
							);
					*/
					
							para.delay( 3000, "testQueue" );
							
							
							para.queue(
								"testQueue",
								function( next ){
									
									closebox();
									
								}
							);
							
							
							para.dequeue( "testQueue" );
					
							
					
					
				
				}
			 
			 
			 
	   });
							


});