/*
	Hotspot
	June 2007, Shamyl Zakariya
	
	Looks for elements of class "marker", attaches a mouseover to 
	show the element with the source's id + "Info". Attaches a mouseout
	for that element to hide it.	
*/

Window.addEvent( 'domready', function() {

	var duration = window.ie ? 100 : 100;

	// for each pullout
	$$(".pullout").each( function( pullout ) {

		if ( window.ie ) pullout.getElement( "div.info" ).setStyle( "display", "none" );
		
		pullout.getElement( "div.info" ).setStyle( "opacity", 0 ).setStyle( "height", 0 );

		pullout.addEvent( "mouseenter", function( event ) {

			var infoBlock = pullout.getElement( "div.info" );
			var titleBlock = pullout.getElement( "div.title" );

			if ( window.ie )
			{
				infoBlock.setStyle( "display", "block" );

				if ( pullout.fx ) pullout.fx.stop();
				if ( infoBlock.fx ) infoBlock.fx.stop();

				pullout.fx = pullout.effects( {
					duration: duration,
					transitions: Fx.Transitions.quartInOut,
					onComplete: function()
					{
						if ( infoBlock.fx ) infoBlock.fx.stop();
						
						infoBlock.fx = infoBlock.effects( {
							duration: duration / 2,
							transitions: Fx.Transitions.quartInOut
						});
						
						infoBlock.fx.start( {
							'opacity':[0,1]
						});
					}
				});
				
				pullout.fx.start( {
					'width':[130, 500],
					'height':[titleBlock.getSize().size.y, infoBlock.getElement( "div.infoHolder" ).getSize().size.y]
				});	
				
				
			}
			else
			{
				if ( pullout.fx ) pullout.fx.stop();
				if ( infoBlock.fx ) infoBlock.fx.stop();
				
				pullout.fx = pullout.effects( {
					duration: duration,
					transitions: Fx.Transitions.quartInOut,
					onComplete: function()
					{
						if ( infoBlock.fx ) infoBlock.fx.stop();
						
						infoBlock.fx = infoBlock.effects( {
							duration: duration,
							transitions: Fx.Transitions.quartInOut
						});
						
						infoBlock.fx.start( {
							'opacity':[0,1],
							'height':[titleBlock.getSize().size.y, infoBlock.getElement( "div.infoHolder" ).getSize().size.y]
						});
					}
				});
				
				pullout.fx.start( {
					'width':[130, 500]
				});						
				
			}

		});

		pullout.addEvent( "mouseleave", function( event ) {

			/*
				NOTE: Rollout bug occurs when rolling-out before rolling-in finishes!
			*/

			var infoBlock = pullout.getElement( "div.info" );
			var titleBlock = pullout.getElement( "div.title" );
			
			if ( window.ie )
			{
				if ( pullout.fx ) pullout.fx.stop();
				if ( infoBlock.fx ) infoBlock.fx.stop();

				infoBlock.fx = infoBlock.effects( {
					duration: duration,
					transitions: Fx.Transitions.quartIn,
					onComplete: function()
					{
						infoBlock.setStyle( "display", "none" );
						if ( pullout.fx ) pullout.fx.stop();

						pullout.fx = pullout.effects( {
							duration: duration,
							transitions: Fx.Transitions.quartInOut,
							onComplete: function()
							{
								/*
									This is really dirty. IE seems to have re-draw issues
									on the retraction. So, when it's complete, we're
									going to force IE to redraw the page.
								*/
								
								
								//var page = $('page');
								//var width = page.getStyle('width').toInt();
								
								//page.setStyle( 'width', width + 2 );
								//(function() { page.setStyle( 'width', width ); }).delay(1);
								
								
								//$("page").setOpacity( 0.50 );
								//(function() { $("page").setOpacity( 1.0 ); }).delay(1);
								
							}
						});
						
						pullout.fx.start( {
							'width':[500, 134],
							'height':[infoBlock.getElement( "div.infoHolder" ).getSize().size.y, titleBlock.getSize().size.y]
						});						
					}
				});
				
				infoBlock.fx.start( {
					'opacity':[1,0]
				});

			}
			else
			{
				if ( pullout.fx ) pullout.fx.stop();
				if ( infoBlock.fx ) infoBlock.fx.stop();

				infoBlock.fx = infoBlock.effects( {
					duration: duration,
					transitions: Fx.Transitions.quartInOut,
					onComplete: function()
					{
						if ( pullout.fx ) pullout.fx.stop();
						
						pullout.fx = pullout.effects( {
							duration: duration,
							transitions: Fx.Transitions.quartInOut
						});
						
						pullout.fx.start( {
							'width':[500, 130]
						});						
					}
				});
				
				infoBlock.fx.start( {
					'opacity':[1,0],
					'height':[infoBlock.getElement( "div.infoHolder" ).getSize().size.y, titleBlock.getSize().size.y]
				});
			}

		});

	});


	// for each hotspot
	$$(".hotspot").each( function( popup ) {
		
		if ( window.ie )
		{
			// ie doesn't seem to respect the height: 0 style on (.hotspot .info)
			var infoBlock = popup.getElement( "div.info" );
			infoBlock.setStyle( "display", "none" );
		}

		popup.addEvent( "mouseenter", function( event ) {

			var infoBlock = popup.getElement( "div.info" );
			var infoContents = infoBlock.getElement( "div.contents" );
			var plusImg = popup.getElement( ".title h3 img" );
			
			if ( window.ie )
			{
				infoBlock.setStyle( "display", "block" );				
			}
			else
			{
				infoBlock.effects( {
					duration: duration,
					transitions: Fx.Transitions.quartInOut
				}).start( {
					'height':[0, infoContents.getSize().size.y],
					'opacity':[0,1]
				});						
			}

			plusImg.effects( {
				duration: duration,
				transitions: Fx.Transitions.linear
			}).start( {
				'opacity':[1,0]
			});


		});

		popup.addEvent( "mouseleave", function( event ) {

			var infoBlock = popup.getElement( "div.info" );
			var infoContents = infoBlock.getElement( "div.contents" );
			var plusImg = popup.getElement( ".title h3 img" );

			// ie doesn't respect the height: directive, apparently
			if ( window.ie ) 
			{
				infoBlock.setStyle( "display", "none" );
			}
			else
			{
				infoBlock.effects( {
					duration: duration,
					transitions: Fx.Transitions.quartInOut
				}).start( {
					'height':[infoContents.getSize().size.y, 0],
					'opacity':[1,0]
				});						
			}

			plusImg.effects( {
				duration: duration,
				transitions: Fx.Transitions.linear
			}).start( {
				'opacity':[0,1	]
			});

		});

	});

});