// JavaScript Document
var blocks = [];
var animationDuration = 400;
var mouseDownHideDuration = 8000;
var mouseDownTimeout;

function InteractionTarget( targetDomElementId, targetCalloutId ) {
	var self = this;
	self.targetId = targetDomElementId;	
	self.domElement = $("#"+self.targetId);
	
	self.calloutId = targetCalloutId;	
	self.calloutDomElement = $("#"+self.calloutId);
	
	self.selected = false;
	
	self.domElement.click( function(event) { 
			event.preventDefault(); 
			return false;
		} );
	if(document.ontouchmove === undefined){
		self.domElement.mouseover( function(event) {
				self.showContent( event );
			}  );
	}else{
		self.domElement.bind('touchstart',function(event) {
				self.showContent( event );
			} );
	}
	
	return self;
}


InteractionTarget.prototype.showContent = function(event) {
	this.animateBackground();
	this.reset();
	this.selected = true;
	this.domElement.removeClass("blockMouseOver").removeClass("blockMouseUp").addClass("blockMouseDown");
	
	
	if ( Modernizr.opacity )
	{
		this.setOpacity( 1.0 );
	}
	else
		this.calloutDomElement.stop(true, false).fadeIn(animationDuration);
		
	clearTimeout( mouseDownTimeout );
	mouseDownTimeout = setTimeout( function( event ){ blocks[0].reset(event, true) }, mouseDownHideDuration );
}

InteractionTarget.prototype.setOpacity = function( value ) {
	var self = this;
	clearTimeout( this.opacityTimeout );
	if ( value >= 1 )
	{
		this.calloutDomElement.css( "display", "inline" );
		this.opacityTimeout = setTimeout( function(){
				self.calloutDomElement.css( "-webkit-opacity", value );
				self.calloutDomElement.css( "-moz-opacity", value );
				self.calloutDomElement.css( "-o-opacity", value );
				self.calloutDomElement.css( "opacity", value );	
			}, 100 );
	}
	else
	{
		self.calloutDomElement.css( "-webkit-opacity", value );
		self.calloutDomElement.css( "-moz-opacity", value );
		self.calloutDomElement.css( "-o-opacity", value );
		self.calloutDomElement.css( "opacity", value );	
		this.opacityTimeout = setTimeout( function(){
				self.calloutDomElement.css( "display", "none" );
			}, 400 );
	}
	
}

InteractionTarget.prototype.reset = function( event, resetAll ) {
	if ( resetAll == undefined || resetAll == null )
		resetAll = false;
	for ( var i = 0; i < blocks.length; i ++ )
	{
		if ( blocks != this || resetAll )
		{
			var block = blocks[i];
			if ( Modernizr.opacity )
			{
				block.setOpacity( 0.0 );
			}
			else
				block.calloutDomElement.stop(true, false).fadeOut(animationDuration);
			block.selected = false;
			block.domElement.removeClass("blockMouseOver").removeClass("blockMouseDown").addClass("blockMouseUp");
		}
	}
	clearTimeout( mouseDownTimeout );
}

InteractionTarget.prototype.animateBackground = function() {
	var leftTarget = this.domElement.attr( "bgLeft" ); 
	var topTarget = this.domElement.attr( "bgTop" ); 
	
	if ( Modernizr.cssanimations )
	{
		var translateString = "translate(" + leftTarget + "px," + topTarget + "px);";
		var bg = $("#interactiveBackground");
		bg.css( "left", leftTarget+"px" );
		bg.css( "top", topTarget+"px" );
	}
	else
	{
		$("#interactiveBackground").stop(true,false).animate({
				left: leftTarget,
				top: topTarget
			}); 
	}
}



$( document ).ready( function( )
{
	var block0 = new InteractionTarget( "block0", "callout0" );
	var block1 = new InteractionTarget( "block1", "callout1" );
	var block2 = new InteractionTarget( "block2", "callout2" );
	var block3 = new InteractionTarget( "block3", "callout3" );
	var block4 = new InteractionTarget( "block4", "callout4" );
	var block5 = new InteractionTarget( "block5", "callout5" );
	
	blocks = [block0, block1, block2, block3, block4, block5];
	
	$("#interactiveOverlay").mousedown( function( event ){ block0.reset(event, true) } );
} );