window.addEvent('domready', initTips);

function initTips() {
	
	canGameDivs = $$('.canGame').concat($$('.regGame'));
	
	rollovers = [];
	
	for (var i = 0; i < canGameDivs.length; i++) {
		
		curRollover = createTip(canGameDivs[i].id);
		
		rollovers.push(curRollover);
		
		$(canGameDivs[i].id).addEvent('mouseenter',function(item) {
			return function() {hideAllTips();item.show();}
		}(curRollover));
		
		$(canGameDivs[i].id).addEvent('mouseleave',function(item) {
			return function(e) {
				var event = new Event(e);
				
				if(!item.isMouseOver(event)) {
					item.hide();
				}
			}
		}(curRollover));
		
	}
	
}

function hideAllTips() {
	
	for(var i = 0; i < rollovers.length;i++) {
		rollovers[i].hide();
	}
	
}

function createTip(tipID) {
	
	if($$('#' + tipID + ' .predictionX').get('html') == 'X') {
		btnImg = 'editPickSmall';
		btnAlt = 'Edit Pick';
	} else {
		btnImg = 'makePredictBtn';
		btnAlt = 'Make a Prediction';
	}
	
	$(tipID).store('tip:title',games[tipID].team1+" <em>-at-</em> "+games[tipID].team2);
	$(tipID).store('tip:text',games[tipID].date + ' - <span style="font-weight:normal">' + games[tipID].time + '</span><br><a href="#" onclick="return initPredictFlow(' + tipID + ",'init');\"><img src=\"images/" + btnImg + ".gif\" alt=\"" + btnAlt + "\"></a>");

	return new Rollover($(tipID),{'className':'predictTip','fixed':'true','offsets':{'x':-100,'y':30}});
}

var Rollover = new Class({
	
		initialize: function(trigElement,options) {
			this.options = options;
			this.trigElement = trigElement;
			this.container = {};
			
			this.createSelf();
		},
		
		createSelf: function() {
			
			var className = this.options.className || '';
			
			if(this.options.offsets) {
				var offsets = {'x':this.options.offsets.x + this.trigElement.getCoordinates().left,'y':this.options.offsets.y + this.trigElement.getCoordinates().top};
			} else {
				var offsets = {'x':this.trigElement.getCoordinates().left,'y':this.trigElement.getCoordinates().top};
			}
			
			this.container = new Element('div',{'styles':{'visibility':'hidden','top':offsets.y + 'px','left':offsets.x + 'px'}}).set('class',className);
			
			var tipTop = new Element('div').set('class','tip-top');
			
			tipTop.injectInside(this.container);
			
			var tip = new Element('div').set('class','tip');;
			
			tip.injectInside(this.container);
			
			var tipTitle = new Element('div').set('html',this.trigElement.retrieve('tip:title')).set('class','tip-title');
			
			tipTitle.injectInside(tip);
			
			var tipText = new Element('div').set('html',this.trigElement.retrieve('tip:text')).set('class','tip-text');
			
			tipText.injectInside(tip);
			
			var tipBottom = new Element('div').set('class','tip-bottom');
			
			tipBottom.injectInside(this.container);
			
			// add the rollover div to the body
			this.container.injectInside($(document.body));
			
			this.container.set('styles',{'position':'absolute'});
			
			var that = this;
			
			/*this.trigElement.addEvent('mouseenter',function(e) {
				
				that.show();
				
			})*/
			
			this.container.addEvent('mouseleave',function(e) {
				
				that.hide();
				
			})
		},
		
		hide: function() {
			this.container.set('styles',{'visibility':'hidden'});
		},
		
		show: function() {
			this.container.set('styles',{'visibility':'visible'});
		},
		
		isMouseOver: function mouseIsOver(evObj) {
			
			// This function checks to see if the mouse is currently over the rollover div before trying to hide it
			// without this, the rollover would be unusable, if trigger uses mouseleave to hide rollover
			
			itemcoords = this.container.getCoordinates();
			
			if(evObj.page.x < itemcoords.left) {
				return false;
			} else if(evObj.page.x > itemcoords.left + itemcoords.width) {
				return false;
			} else if(evObj.page.y < itemcoords.top) {
				return false;
			} else if(evObj.page.y > itemcoords.top + itemcoords.height) {
				return false;
			} else {
				return true;
			}
			
		}
		
});