arrOwgTracker = new Array();
var iOwgTrackerTimeout = 400;			//Timeout para o mouse out
var objOwgTrackerHover = null;			//Guarda o objecto objMask que estiver aberto

window.onload = function() {
	StartOwgTracker();
}

function StartOwgTracker() {
	var iOffsetHeight = 42;
	var iOffsetWidth = $('.MainTracker A').outerWidth() + 10;
	
	var i = 0
	$('.OwgTracker').each(function() {
		arrOwgTracker[i] = new OwgTracker();
		arrOwgTracker[i].init(this, $('.MainTracker').get(0), iOffsetWidth, iOffsetHeight);
		iOffsetWidth += $(this).find('.OwgTrackerSelf A SPAN').outerWidth() + 30;
		i++
	});

	$(window).bind('resize', function(e) {
		for(i in arrOwgTracker) {
			arrOwgTracker[i].UpdatePosition();
		}
	});
}


function OwgTracker()
{
	var self = this;

	// Objects
	this.objAnchor;
	this.objMask;
	this.objList;
	this.objTop;
	this.objBottom;
	this.objMore;

	// Animation
	this.iInDuration = 500;
	this.iInEasing = 'easeOutSine';
	this.iOutDuration = 700;
	this.iOutEasing = 'easeOutExpo';

	// Dimensions
	this.iMaskHeight = '22';
	this.iMaskHeightHover;
	this.iListHeight;
	this.iListWidth;
	this.iTopHeight;

	// Positions
	this.x;
	this.y;
	this.xAnchor;
	this.yAnchor;
	this.xOffset;
	this.yOffset;
	this.xMask;
	this.yMask;
	this.yMaskHover;
	this.yList;
	this.yListHover;
	this.yMore;


	//-----------------------
	// Event Handlers
	//-----------------------

	this.init = function(obj, objAnchor, xOffset, yOffset) {
		this.xOffset = xOffset;
		this.yOffset = yOffset;

		// Get objects
		this.objAnchor = objAnchor;
		this.objMask = obj;
		this.objList = $(this.objMask).find('.OwgTrackerList').get(0);
		this.objTop = $(this.objMask).find('.OwgTrackerTop').get(0);
		this.objBottom = $(this.objMask).find('.OwgTrackerBottom').get(0);
		this.objMore = $(this.objMask).find('.OwgTrackerMore').get(0);

		this.objMask.objParentTracker = this;
		this.objMore.objParentTracker = this;
		
		// Get dimensions
		this.iListWidth = $(this.objList).outerWidth();
		this.iListHeight = $(this.objList).outerHeight();
		this.iTopHeight = $(this.objTop).outerHeight();
		this.iMaskHeightHover = this.iListHeight;

		// Dimension objects
		$(this.objMask).css({ 'width':this.iListWidth+'px' });
		$(this.objMask).css({ 'height':this.iMaskHeight+'px' });
		$(this.objMore).css({ 'width':this.iListWidth+'px', 'cursor':'pointer' });

		this.UpdatePosition();
		
/*
var iLinkW = $(this.objMask).find('.OwgTrackerSelf A SPAN').outerWidth() + 30;
		var iLinkH = $(this.objMask).find('.OwgTrackerSelf A SPAN').outerHeight();
		var iLinkHtml = $(this.objMask).find('.OwgTrackerSelf').html();
		$('#DEBUG').html('top:'+this.yMask+'px; left:'+this.xMask+'px; width:'+iLinkW+'px; height:'+iLinkH+'px; background-color:#CCC;"')
		$(objAnchor).after('<div class="OwgTrackerSelf" style="position:absolute; top:'+this.yMask+'px; left:'+this.xMask+'px; width:'+iLinkW+'px; height:'+iLinkH+'px;  z-index:999;">'+iLinkHtml+'</div>');
*/

		//Variável que guarda o timeout (se existir) da mask. Nota: Cada mask tem o seu timeout
		this.objMask.iMyTimeOut = null;
		//Função que fecha a mask... pode ser chamada a partir do timeout ou directamente se outra mask for seleccionada
		this.objMask.MouseOut = function() {
			//alert('mouse out');
			objParentTracker = this.objParentTracker;
			$(this).stop();
			$(objParentTracker.objList).stop();

			$(objParentTracker.objMore).hide();
			$(this).animate({ height:objParentTracker.iMaskHeight, top:objParentTracker.yMask }, objParentTracker.iOutDuration, objParentTracker.iOutEasing );
			$(objParentTracker.objList).animate({ top:objParentTracker.yList }, objParentTracker.iOutDuration, objParentTracker.iOutEasing );
			if(objOwgTrackerHover == this) objOwgTrackerHover = null;
		}


		$(this.objMask).bind("mouseenter", function(e) {
			var objParentTracker = this.objParentTracker;
			
			//Se estiver uma Mask aberta, fecha-a logo e cancela o respectivo timeout
			if(objOwgTrackerHover != undefined && objOwgTrackerHover != null && objOwgTrackerHover != this) {
				clearTimeout(objOwgTrackerHover.iMyTimeOut);
				objOwgTrackerHover.MouseOut();
			}
			
			//Guarda na variavel global objOwgTrackerHover a mask que está aberta (this)
			objOwgTrackerHover = this;
			clearTimeout(this.iMyTimeOut);
			
	/*		
			$(this).everyTime(1,function(i) {
				var arrMaskPosition = $(this).position();
				var arrListPosition = $(this.objParentTracker.objList).position();
				var newListTop = this.objParentTracker.yMaskHover - arrMaskPosition.top;
				$(this.objParentTracker.objList).css({top:newListTop});
				$('#DEBUG').html('TESTE: ' + newListTop);
			});
			
*/
			$(this).stop();
			$(objParentTracker.objList).stop();
	
			//$(this).animate({ height:objParentTracker.iMaskHeightHover, top:objParentTracker.yMaskHover }, objParentTracker.iInDuration, objParentTracker.iInEasing );
			$(this).animate({ height:objParentTracker.iMaskHeightHover, top:objParentTracker.yMaskHover }, objParentTracker.iInDuration, objParentTracker.iInEasing);
			$(objParentTracker.objList).animate({ top:objParentTracker.yListHover }, objParentTracker.iInDuration, objParentTracker.iInEasing);
			if(objParentTracker.yMaskHover < 0) {
				//alert(objParentTracker.yMore);
				$(objParentTracker.objMore).css('top', objParentTracker.yMore+'px');
				$(objParentTracker.objMore).fadeIn('slow');
			}
			
			
		}).bind("mouseleave", function(e) {
			var objParentTracker = this.objParentTracker;
			//alert(objParentTracker.id);
			////////////////
			
			//Chama o timeout que vai fechar a mask (mouseout)
			var thisMask = this;			
			clearTimeout(this.iMyTimeOut);	
			this.iMyTimeOut = setTimeout(function() { thisMask.MouseOut();}, iOwgTrackerTimeout);	
			
			////////////////
			
			/*
			$(this).stop();
			$(objParentTracker.objList).stop();
			
			$(objParentTracker.objMore).hide();

			$(this).animate({ height:objParentTracker.iMaskHeight, top:objParentTracker.yMask }, objParentTracker.iOutDuration, objParentTracker.iOutEasing );
			$(objParentTracker.objList).animate({ top:objParentTracker.yList }, objParentTracker.iOutDuration, objParentTracker.iOutEasing );
			*/
		});

		$(this.objMore).click(function(e) {
			var objParentTracker = this.objParentTracker;

			$(this).hide();
			$(objParentTracker.objMask).animate({ top:5 }, 200, 'easeOutExpo' );
		})
		
	}


	//-----------------------
	// Methods
	//-----------------------
	
	this.UpdatePosition = function() {

		// Get positions
		if(this.objAnchor) {
			var arrAnchorPosition = $(this.objAnchor).position();
			this.xAnchor = arrAnchorPosition.left;
			this.yAnchor = arrAnchorPosition.top;
		} else {
			this.xAnchor = 0;
			this.yAnchor = 0;
		}
		
		this.x = this.xAnchor + this.xOffset;
		this.y = this.yAnchor + this.yOffset;

		// Set positions
		this.xMask = this.x;
		this.yMask = this.y;
		this.yMaskHover = this.y - this.iTopHeight;
		this.yList = -this.iTopHeight;
		this.yListHover = 0;
		this.yMore = this.iTopHeight - this.y;

		// Position objects
		$(this.objMask).css({ 'left':this.xMask+'px', 'top':this.yMask+'px' });
		$(this.objList).css({ 'top': this.yList+'px' });
		//$(this.objAnchor).append('<div style="position:absolute; top:0px; left:0px; width:100px; height:100px; background-color:#CCC;"></div>');
	}

}