$(document).ready(function() {
	com.ag.attachOverlayEvents();
});

/**
 * Creates an instance of GameDescOverlay
 * @constructor
 */
com.ag.GameDescOverlay = function(){
	this.overlayDom = {};

	this.getOverlayDom = function() {
		return this.overlayDom;
	};
	this.setOverlayDom = function(dom) {
		this.overlayDom = dom;
	};
	/**
	 * Creates the overlay and positions self to the game
	 * @param {object} fimage DOM element (game) that the overlay is being associated to
	 */
	this.createOverlay = function(fimage){
		var gameId = com.ag.getFimageGameId(fimage);
		var parentObj = this;
		$.ajax({url: '/static/frag/games/layover/'+gameId.substr(3)+'/'+gameId+'-escaped.js', dataType:'json',
		dataFilter:function(data,type) {
			//remove comment filtering
			if(data.substring(0,2) == '/*') data = data.substring(2, data.length - 2);
			return data;

		}, success: function(gameInfo){
				var rating;
				var showRating = false;
				var ratingBomb = '';
				switch(parseInt(gameInfo.rating)){
					case 1: rating = "ALL AGES";
						showRating = true;
						break;
					case 100: rating = "TWEEN+";
						showRating = true;
						break;
					case 200: rating = "TEEN+";
						showRating = true;
						break;
					case 201:
					case 202: rating = "TEEN CAUTION";
						showRating = true;
						ratingBomb='<span class="maturityBomb hideTxt">Mature Content</span>';
						break;
					default:
				}
			parentObj.overlayDom = $('<div></div>').addClass('gameDescOverlay').attr('id', 'gameOverlay'+gameId);
			parentObj.overlayDom.append($('<div></div>').addClass('overlayArrow'));
			var innerContent = $('<div></div>').addClass('overlayContent');
			parentObj.overlayDom.append(innerContent);
			innerContent.append($('<h3>'+gameInfo.title+'</h3>').addClass('gameTitle'));
			innerContent.append($('<p>Launch Date: '+gameInfo.adddate+'</p>'));
			innerContent.append($('<h3>Description:</h3><p>'+gameInfo.description+'</p>'));

			innerContent.append($('<h3>Game Category:</h3><p>'+gameInfo.genres+'</p>'));
			if(showRating) {
				innerContent.append($('<h3 class="maturityInfoTitle">Rating:</h3><span class="maturityInfo">'+rating+ratingBomb+'</span></p>'));
			}
			innerContent.append($('<h3>Tags:</h3>'));
			$.each(gameInfo.filters, function(i, filterImg){
				innerContent.append($('<img/>').attr('src', '/static/images/filters/'+filterImg));
			});
		}, complete: function(){
			parentObj.positionOverlay(fimage);
			$(parentObj.overlayDom).hide();
			$('body').append($(parentObj.overlayDom));
			parentObj.show();
		}});
	};
	/**
	 * Places the overlay to be above or below the picon depending on the scroll position of the screen
	 * @param {object} fimage The dom image that the overlay gets positioned above/below
	 */
	this.positionOverlay = function(fimage) {

		var SCROLL_HEIGHT =  window.pageYOffset || document.documentElement.scrollTop;
		var VIEWPORT_HEIGHT = window.innerHeight || document.documentElement.clientHeight;
		var OVERLAY_HEIGHT = 22 + 330;
		var fimagePosition = $(fimage).offset();

		//84 is 1/2 of the width of the overlay container
		$(this.overlayDom).css('left', fimagePosition.left-84+(.5*$(fimage).width()));

		if ($(fimage).offset().top + OVERLAY_HEIGHT + $(fimage).height() > SCROLL_HEIGHT + VIEWPORT_HEIGHT) {
			//not enough room below--put above
			if(!$(this.overlayDom).hasClass('gameDescOverlayAbove')) $(this.overlayDom).addClass('gameDescOverlayAbove');
			//355 is the height of the arrow pointing at the fimage
			$(this.overlayDom).css('top', fimagePosition.top-345);
		} else {
			//enough room below--put below
			if($(this.overlayDom).hasClass('gameDescOverlayAbove')) $(this.overlayDom).removeClass('gameDescOverlayAbove');
			//22 is the height of the arrow pointing at the fimage
			$(this.overlayDom).css('top', fimagePosition.top+$(fimage).height()+22);
		}
	};
	this.show = function() {
		$(this.overlayDom).show();
	}
};

 /**
 * Attaches the mouse over events to images that will trigger the game description overlay
 *
 */
com.ag.attachOverlayEvents = function(){
	//for use with setTimeout--which is a hack until jQuery 1.4.2 upgrade and we can use hoverintent plugin
	var wait; //TODO: remove hack
	$('img.fimage').live('mouseover', function(event){
		if(wait) { //TODO: remove hack
			clearTimeout(wait);//TODO: remove hack
		   wait = null;
		}//TODO: remove hack
		wait = setTimeout(function() {//TODO: remove hack
			var gameId = com.ag.getFimageGameId(event.target);
			var overlay = new com.ag.GameDescOverlay();
			if ($('#gameOverlay'+gameId).length > 0) {
				overlay.setOverlayDom($('#gameOverlay'+gameId));
				overlay.positionOverlay(event.target);
				overlay.show();
			} else {
				overlay.createOverlay(event.target);
			}
		}, 500);//TODO: remove hack
	});
	$('img.fimage').live('mouseout', function(event){
		if(wait) {//TODO: remove hack
			clearTimeout(wait);//TODO: remove hack
		   wait = null;//TODO: remove hack
		}//TODO: remove hack
		$('#gameOverlay'+com.ag.getFimageGameId($(event.target))).hide();
	});
};

 /**
 * Determines the GameId of a game
 * @param {object} dom Dom  element that has gameId-xxxx as a class
 */
com.ag.getFimageGameId = function(dom) {
	var classSet = $(dom).attr('class').split(' ');
	var gameId;
	for (var i in classSet) {
		if (classSet[i].substr(0, 7) == 'gameId-') gameId = classSet[i].substr(7);
	}
	return gameId;
};