/**
 * Hide and Seek javascript widget (wg_HandS.js)
 * 
 * @author Craig Nagy
 * @version 1.0
 * @requires jQuery The jQuery library
 *
 */
if (typeof ROGERS == "undefined" || !ROGERS) { var ROGERS = {}; }
ROGERS.tools = ROGERS.tools || {};
ROGERS.tools.HandS = ROGERS.tools.HandS || {};

/**
 * HandS variables
 */
// Data storage object
ROGERS.tools.HandS.data = {};
// state tracking
ROGERS.tools.HandS.state = ROGERS.tools.HandS.STATE_NORMAL;
// URL of the HandS service and support files
ROGERS.tools.HandS.host = "http://tools.rogersradio.ca";
// Debug flag
ROGERS.tools.HandS.debug = false;

ROGERS.tools.HandS.preloadNumber = 0;
ROGERS.tools.HandS.preloadCount = 0;

/**
 * After the document loads, the HandS data will be
 * retrieved asychronously with a request for a JSON
 * resource.
 */
if(typeof jQuery == 'function')
$(function(){
	$.getJSON(ROGERS.tools.HandS.host+"/HandS/?jsoncallback=?",
	          ROGERS.tools.HandS.load);	
});

/**
 * Confirm the data loaded
 */
ROGERS.tools.HandS.isReady = function()
{
	return ROGERS.tools.HandS.data != null;
};

/**
 * Function to inject the appropriate Hide and Seek
 * HTML into the page DOM and preload the images.
 */
ROGERS.tools.HandS.load = function(data)
{

	ROGERS.tools.HandS.data = data;
	ROGERS.log(ROGERS.tools.HandS.data);
	
	if(!ROGERS.tools.HandS.isReady()) return;
	if(ROGERS.tools.HandS.isClosed()) return;

	$(function(){

		var HandS = ROGERS.tools.HandS;

		var template = [];
		template.push("<div id='",HandS.ID,"' class='hands-box'>");
		template.push("<div id='",HandS.CLICK_ID,"' class='hands-click'></div>");
		template.push("<div id='",HandS.ICON_ID,"' class='hands-icon'></div>");
		template.push("</div>");

		$('body').append(template.join(''));

		$(HandS.SELECTOR).css({
			"position" : "absolute",
			"width" : "auto",
			"height" : "auto",
			"cursor" : "pointer",
			"top" : 0,
			"left" : 0,
			"right" : "auto",
			"bottom" : "auto"
		});
		
		$(HandS.CLICK_SELECTOR).css({
			"position" : "absolute",
			"width" : "auto",
			"height" : "auto",
			"cursor" : "pointer",
			"top" : 0,
			"left" : 0,
			"z-index" : 1,
			"background" : "url("+ROGERS.tools.HandS.host+"/HandS/images/pixel.gif)"
		});
		
		// Preload the icons and then initialize the widget
		$.each(HandS.data.icon,function(e) {
			ROGERS.tools.HandS.preloadNumber++;
			$(new Image()).load(function() {
				//alert($(this).attr('src') + 'has loaded!');
				ROGERS.tools.HandS.preloadCount++;
				if(ROGERS.tools.HandS.preloadNumber == ROGERS.tools.HandS.preloadCount)
					ROGERS.tools.HandS.init();
			}).attr('src',this);
		});

	});

};

/**
 * Initialize the state of this widget
 */
ROGERS.tools.HandS.init = function()
{
	ROGERS.log("ROGERS.tools.HandS.init");
	var HandS = ROGERS.tools.HandS;
	HandS.setState(HandS.STATE_NORMAL);
	HandS.setPosition();
	HandS.addClose();
	HandS.bindHandlers();
}


/**
 * Adds a small close button to the top right of
 * the rendered widget.
 */
ROGERS.tools.HandS.addClose = function()
{
	var HandS = ROGERS.tools.HandS;
	
	if(!HandS.data.closable) return;
	
	$(HandS.SELECTOR).prepend(["<a id='",HandS.CLOSE_ID,"' title='Close'></a>"].join(''));
	
	$(HandS.CLOSE_SELECTOR).css({
		"position" : "absolute",
		"display" : "block",
		"width" : "8px",
		"height" : "8px",
		"cursor" : "pointer",
		"top" : "2px",
		"right" : "2px",
		"z-index" : 2,
		"background" : "url("+HandS.host+"/HandS/images/close.gif) no-repeat 0 0"
	});
	
	$(HandS.CLOSE_SELECTOR).click(ROGERS.tools.HandS.hide);
	
};

/**
 * Remove the Hide and Seek player
 */
ROGERS.tools.HandS.hide = function()
{
	var HandS = ROGERS.tools.HandS;
    $(HandS.SELECTOR).fadeOut();
    ROGERS.utils.createCookie("HandS_"+HandS.data.id,"HIDE",5);
};

/**
 * Check if the user has already closed this
 * player previously.
 */
ROGERS.tools.HandS.isClosed = function()
{
	return null != ROGERS.utils.readCookie("HandS_"+ROGERS.tools.HandS.data.id);
};


/**
 * Move the Hide and Seek container to the location
 * specified in the data.
 */
ROGERS.tools.HandS.setPosition = function()
{
    var HandS = ROGERS.tools.HandS;
	var doc_height = $(document).height();
	var doc_width = $(document).width();
	var HandS_height = $(HandS.SELECTOR).height();
	var HandS_width = $(HandS.SELECTOR).width();
	var v_offset = (HandS.data.position.v_offset) ? parseInt(HandS.data.position.v_offset,10) : 0;
	var h_offset = (HandS.data.position.h_offset) ? parseInt(HandS.data.position.h_offset,10) : 0;
	
	$(HandS.CLICK_SELECTOR).css("height",HandS_height);
	$(HandS.CLICK_SELECTOR).css("width",HandS_width);
	
	switch(HandS.data.position.vertical)
	{
		case ROGERS.tools.HandS.POS_RDM:
			var rdm = Math.floor(Math.random()*(doc_height-HandS_height));
			$(HandS.SELECTOR).css("top",rdm+"px");
			break;
		case ROGERS.tools.HandS.POS_BOT:
			$(HandS.SELECTOR).css("top","auto");
			$(HandS.SELECTOR).css("bottom",(0+v_offset)+"px");
			break;
		case ROGERS.tools.HandS.POS_TOP:
			$(HandS.SELECTOR).css("top",(0+v_offset)+"px");
			break;
		case ROGERS.tools.HandS.POS_MID:
			var mid = Math.floor(doc_height/2)-Math.floor(HandS_height/2);
			$(HandS.SELECTOR).css("top",mid+"px");
			break;		
	}
	
	switch(HandS.data.position.horizontal)
	{
		case ROGERS.tools.HandS.POS_RDM:
			var rdm = Math.floor(Math.random()*(doc_width-HandS_width));
			$(HandS.SELECTOR).css("left",rdm+"px");
			$(HandS.SELECTOR).css("right","auto");
			break;
		case ROGERS.tools.HandS.POS_LFT:
			$(HandS.SELECTOR).css("left",(0+h_offset)+"px");
			$(HandS.SELECTOR).css("right","auto");
			break;
		case ROGERS.tools.HandS.POS_RGT:
			$(HandS.SELECTOR).css("left","auto");
			$(HandS.SELECTOR).css("right",(0+h_offset)+"px");
			break;
		case ROGERS.tools.HandS.POS_CTR:
			var ctr = Math.floor(doc_width/2)-Math.floor(HandS_width/2);
			$(HandS.SELECTOR).css("left",ctr+"px");
			$(HandS.SELECTOR).css("right","auto");
			break;		
	}
	
	
};

/**
 * Attach handlers for mouse events to the Hide
 * and Seek container.
 */
ROGERS.tools.HandS.bindHandlers = function()
{
	var HandS = ROGERS.tools.HandS;
	
	$(HandS.CLICK_SELECTOR).click(function(){
		var HandS = ROGERS.tools.HandS;
		HandS.setState(HandS.STATE_CLICKED);
	});

	$(HandS.CLICK_SELECTOR).mouseover(function(){
		var HandS = ROGERS.tools.HandS;
		HandS.setState(HandS.STATE_HOVER);
	});	

	$(HandS.CLICK_SELECTOR).mouseout(function(){
		var HandS = ROGERS.tools.HandS;
		HandS.setState(HandS.STATE_NORMAL);
	});

	$(window).resize(function(){
		ROGERS.tools.HandS.setPosition();
	});	

};

/**
 * Set the current state of the Hide and Seek object
 * and make any respective updates to the display.
 */
ROGERS.tools.HandS.setState = function(state)
{
	ROGERS.log("HandS::setState",state);
	
	var HandS = ROGERS.tools.HandS;
	var path = HandS.data.icon.normal;
	
	// Icon stays the same if it's been clicked once 
	// (e.g. it's been found!) or is already in the
	// state being set.
	if( (HandS.state == HandS.STATE_CLICKED) ||
		(state == HandS.STATE_HOVER && HandS.state == HandS.STATE_HOVER) ||
		(state == HandS.STATE_NORMAL && HandS.state == HandS.STATE_NORMAL))
			return;
	
	if(state == HandS.STATE_HOVER)
	{
		if(HandS.data.icon.hover)
			path = HandS.data.icon.hover;
	}
	else if(state == HandS.STATE_CLICKED)
	{
		if(HandS.data.icon.clicked)
			path = HandS.data.icon.clicked;
		HandS.state = HandS.STATE_CLICKED;
		HandS.setClickThru();
		HandS.displayCode();
	}
	
	HandS.state = state;
	
	if(path.indexOf(".gif") != -1 || path.indexOf(".jpg") || path.indexOf(".png"))
	{		
		if($(HandS.ICON_SELECTOR + " img").length)
			$(HandS.ICON_SELECTOR + " img").attr("src",path);
		else
		{
			var icon = new Image();
			icon.src = path;
			
			$(HandS.ICON_SELECTOR).css("height", icon.height);
			$(HandS.ICON_SELECTOR).css("width", icon.width);
			//$(HandS.ICON_SELECTOR).css("border", "1px solid red");
			
			if(path.indexOf(".png") > -1 && $.browser.msie && $.browser.version < 7)
			{
				$(HandS.ICON_SELECTOR).css("filter","progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=scale,src='"+path+"'");
			}
			else
			{
				$(HandS.ICON_SELECTOR).append(icon);
			}
		}
			
		
	}

};

/**
 * Set the Click Thru URL
 */
ROGERS.tools.HandS.setClickThru = function()
{
    var HandS = ROGERS.tools.HandS;
    $(HandS.CLICK_SELECTOR).unbind("click");
	$(HandS.CLICK_SELECTOR).click(function(){
		window.location = ROGERS.tools.HandS.data.clickthru;
	});
};

/**
 * Show the bonus code associated with this Hide
 * and Seek player.
 */
ROGERS.tools.HandS.displayCode = function()
{
	var HandS = ROGERS.tools.HandS;
	ROGERS.log("HandS::displayCode",HandS.data.code);
	
	var height = $(HandS.SELECTOR).height();
	var width = $(HandS.SELECTOR).width();
	var half_height = Math.floor(height/2);
	$(HandS.SELECTOR).append(["<p>",HandS.data.code,"</p>"].join(''));
	var half_code_height = Math.floor($(HandS.CODE_SELECTOR).height()/2);

	$(HandS.CODE_SELECTOR).css({
		"position" : "absolute",
		"text-align" : "center",
		"top" : (half_height-half_code_height) + "px",
		"width" : width+"px",
		"padding" : 0,
		"margin" : 0,
		"font" : HandS.data.font,
		"color" : HandS.data.colour
	});
	
};


/**
 * Constants
 */
ROGERS.tools.HandS.ID = "HandS_container";
ROGERS.tools.HandS.SELECTOR = "#"+ROGERS.tools.HandS.ID;
ROGERS.tools.HandS.ICON_ID = "HandS_icon";
ROGERS.tools.HandS.ICON_SELECTOR = "#"+ROGERS.tools.HandS.ICON_ID;
ROGERS.tools.HandS.CLICK_ID = "HandS_click";
ROGERS.tools.HandS.CLICK_SELECTOR = "#"+ROGERS.tools.HandS.CLICK_ID;
ROGERS.tools.HandS.CODE_SELECTOR = ROGERS.tools.HandS.SELECTOR + " p";
ROGERS.tools.HandS.CLOSE_ID = "HandS_close";
ROGERS.tools.HandS.CLOSE_SELECTOR = "#"+ROGERS.tools.HandS.CLOSE_ID;
ROGERS.tools.HandS.POS_RDM = "RDM";
ROGERS.tools.HandS.POS_LFT = "LFT";
ROGERS.tools.HandS.POS_RGT = "RGT";
ROGERS.tools.HandS.POS_TOP = "TOP";
ROGERS.tools.HandS.POS_BOT = "BOT";
ROGERS.tools.HandS.POS_CTR = "CTR";
ROGERS.tools.HandS.POS_MID = "MID";
ROGERS.tools.HandS.STATE_NORMAL = 0;
ROGERS.tools.HandS.STATE_HOVER = 1;
ROGERS.tools.HandS.STATE_CLICKED = 2;


/**
 * Logging function
 * 
 * @requires FireBug
 */
ROGERS.log = function() {
	if( ROGERS.tools.HandS.debug && window.console )
		console.debug.apply( console, arguments );
};

/**
 * Cookie Helpers
 */
ROGERS.utils = ROGERS.utils || {};

ROGERS.utils.createCookie = function(name,value,days)
{
	if (days) {
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();
	}
	else var expires = "";
	document.cookie = name+"="+value+expires+"; path=/";
};

ROGERS.utils.readCookie = function(name)
{
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for(var i=0;i < ca.length;i++) {
		var c = ca[i];
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return null;
};

ROGERS.utils.eraseCookie = function(name)
{
	createCookie(name,"",-1);
};

if(document.location.href.indexOf('test') != -1 ||
document.location.href.indexOf('dev.') != -1)
{
	ROGERS.tools.HandS.debug = true;
	ROGERS.log("HandS Debug Mode On");
}
 
/* End of file lib_HandS.js */
/* Location: js/lib_HandS.js */