/**
 * $Id: HitterPage.js,v 1.1.2.10 2010/06/16 05:10:16 ord Exp $
 *
 * Note, currently we're not using AJAX to get the data.
 * Instead we inject a script tag that references a proxy hitter PHP script that returns
 * a javascript string of HTML that we insert into the DOM.
 *
 * March 1, 2009 - Now we can switch to using a dev copy of Hitter simply by passing
 * 'dev=1' to the proxy scripts. There is no need to change the URL to point to the
 * dev copy of the homepage
 */

/**
 * Override function for rendering the calendar month.
 * Note the funky vars. This is because they're declared
 * globally in internal hitter javascript. This should be
 * fixed. Until them, we'll use different names here.
 */
function MyCalendarMonth_render()
{
	var a;
	var b;
	var cellss;
	var cell;
	var rowss;
	var lengthh;
	var hrefNode;

	this.renderOld()

	// Get the rows.
	// Note, this includes the rows of table headers,
	// so they must be skipped.

	// Bugfix: Depending on if there are text nodes the offset can vary.
	// Look for the child node with TBODY instead of guessing it's offset.
	llength = this.tableNode.childNodes.length;
	for(a = 0; a < llength && this.tableNode.childNodes[a].nodeName != "TBODY"; a++){}
	rowss = this.tableNode.childNodes[a].childNodes;

	for(a = 0; a < rowss.length; a++)
	{
		cellss = rowss[a].childNodes;
		for(b = 0; b < cellss.length; b++)
		{
			cell = cellss[b];
			if(cell.nodeName == "TD")
			{
				hrefNode = cell.childNodes[0];
				hrefNode.href = 'javascript::{};';
			}
		}
	}
}


HitterPage =  {

	hitterBaseUri:'http://markord.com/',
	hitterProxyBaseUri:'',

	init:function()
	{
		this.hitterBase = "http://www.markord.com/hitter/phphitter";
		this.hitterProxyBaseUri = "http://www.markord.com/static";

		_this = this;
		var eRefreshRecent = document.getElementById( 'refreshRecent' );
		if(eRefreshRecent)
		{
			this.addEvent( eRefreshRecent, 'click', function(){ _this.refreshRecent(_this) }, false );
		}

		var eControlPanelLink = document.getElementById( 'controlPanelLink' );
		if(eControlPanelLink)
		{
			// Note: This is because the context of 'this' is screwed up when
			// clicking on the link. Need to work out how to do it without YUI.
			var fn = this.control;
			this.addEvent( eControlPanelLink, 'click', function(){fn(document.getElementById( 'controlPanelLink' ));}, false );

			var eControlPanelForm = document.getElementById( 'controlPanelForm' );
			// Initialise the calendar.
			d = new Date();
			currYear = d.getYear();
			if(currYear < 1900 )
			{
				// for ff
				currYear = (d.getYear() + 1900);
			}
			var t = document.getElementById('calendar');
			t.cal = new CalendarMonth(t, 'calendar', currYear, 3, 'tracks', 'day');
			t.cal.renderOld = t.cal.render;
			t.cal.render = MyCalendarMonth_render;
			// This fails in IE.
			try
			{
				t.cal.render()
			}
			catch(e)
			{
			}
			this.initialiseControlPanelForm(eControlPanelForm);
		}
	},

	addEvent:function(e, event, fn, bool)
	{
		if( e.addEventListener )
		{
			e.addEventListener( event, fn, bool );
		}
		else
		{
			e.attachEvent( 'on' + event, fn );
		}	
	},

	/**
	 * Toggles control panel.
	 * Has some 'this' context issues!
	 */
	toggleControlPanel:function()
	{
		var e  = document.getElementById( 'control' );
		this.control(e);	
	},

	control:function(e)
	{
		var controlDiv = document.getElementById( 'control' );
		var textNode = e.childNodes[0];
		if( controlDiv.style.display == 'none' )
		{
			controlDiv.style.display = 'block';
			textNode.nodeValue = "Close Control Panel";
		}
		else
		{
			controlDiv.style.display = 'none';
			textNode.nodeValue = "Open Control Panel";
		}
//		controlDiv.style.position = 'absolute';
	},

	/**
	 * Update date in control panel form
	 * Used when clicking a date in the calendar.
	 * @param element e Calender element
	 */
	updateDate:function(e)
	{
		date = e.date;
		document.forms[0].day.selectedIndex = date.getDate() - 1;
		document.forms[0].month.selectedIndex = date.getMonth();
		document.forms[0].year.selectedIndex = date.getYear() - 106;
		//getHitterTable();
		this.refreshChart(this);
	},

	/**
	 * Initialises control panel form.
	 * Sets dropdowns, sets listeners
	 * @param DOMElement e Form element
	 */
	initialiseControlPanelForm:function(e)
	{
		// Set the submit handler
		this.addEvent( e, 'submit', function(){ _this.refreshChart(_this);}, true );
		
		// Loop through all the selects, and set the handlers
		for(i = 0; i < e.elements.length; i++)
		{
			if( e.elements[i].nodeName == 'SELECT' )
			{
				this.addEvent( e.elements[i], 'change', function(){ _this.refreshChart(_this);}, false);
			}
		}

		// Initialise the form.
		d = new Date();
		var currYear = d.getYear();
		if(currYear < 1900 )
		{
			// for ff
			currYear = (d.getYear() + 1900);
		}
		for(i = 1; i <= 31; i++)
		{
			e.day[i - 1] = new Option(this.padnum(i),this.padnum(i));
		}
		for(i = 1; i <= 12; i++)
		{
			e.month[i - 1] = new Option(this.padnum(i),this.padnum(i));
		}
		for(i = 2006; i <= currYear; i++)
		{
			e.year[i - 2006] = new Option(i,i);
		}
		e.mode.selectedIndex = 2;
		e.year.selectedIndex = currYear - 2006;
		e.month.selectedIndex = d.getMonth();
		e.day.selectedIndex = 0;
		return(true);
	},

	padnum:function(number) { return (number < 10) ? '0' + number : number; },

	refreshRecent:function(obj)
	{
		headID = document.getElementsByTagName("head")[0];
		div = document.getElementById('recent_result');
		div.style.display = 'none';

		newScript = document.createElement('script');
		//				newScript.onload = scriptloaded;
		newScript.src = obj.hitterProxyBaseUri + '/proxy_hitter_recent.php?user=ord';
		// newScript.src += '&dev=1';
		div = document.getElementById('loading_recent');
		div.style.display = 'block';
		headID.appendChild(newScript);
	},

	onUpdateRecent:function(data)
	{
		var e = document.getElementById('recent_result');
		e.innerHTML = data;

		// Remove columns after album
		/*
		var rows = e.childNodes[1].childNodes[1].childNodes[0].childNodes[0].rows;
		var i,j;
		for(i = 0 ; i < rows.length; i++ )
		{
			cells = rows[i].cells;
			for( j = cells.length - 1; j > 2; j-- )
			{
				rows[i].removeChild( cells[j] );
			}
		}
		*/

		var e = document.getElementById('loading_recent');
		e.style.display = 'none';
		e = document.getElementById('recent_result');
		e.style.display = 'block';
	},

	refreshChart:function(obj)
	{
		var form = document.forms[0];
		// Update the calendar
		// It'd be better if the calendar object had a method for this, but until now.
		var dateE = document.getElementById( 'calendar' );
		if( dateE )
		{
			var cal = dateE.cal;
			cal.year = form.year.value;
			cal.month = form.month.value;
			cal.period = form.periods.value;
			cal.tableType = form.table_type.value;
			try
			{
				cal.render();
			}
			catch(e)
			{
			}
		}

		var url = obj.hitterProxyBaseUri + "/proxy_hitter_chart.php?user=ord&mode=" +
				   form.periods.value +
				   form.mode.value +
				   "&limit=" + form.limit.value +
				   "&table_type=" + form.table_type.value +
				   "&start_period=" + form.year.value + form.month.value + form.day.value;
		// url += '&dev=1';
		headID = document.getElementsByTagName("head")[0];
		newScript = document.createElement('script');
		//				newScript.onload = chartLoaded;
		newScript.src = url;
		headID.appendChild(newScript);
		div = document.getElementById('loading');
		div.style.display = 'block';
		// div.nextSibling.nextSibling.style.display = 'block';
		// div.innerHTML = "Loading chart. Please wait...";
	},

	onUpdateChart:function(data)
	{
		var e = document.getElementById('result');
		e.innerHTML = data;
		var e = document.getElementById('loading');
		e.style.display = 'none';
	},

	getRecentPlaysTable:function()
	{
		var xmlHttp;
		try
		{
			// Firefox, Opera 8.0+, Safari
			xmlHttp=new XMLHttpRequest();
		}
		catch (e)
		{
			// Internet Explorer
			try
			{
				xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
			}
			catch (e)
			{
				try
				{
					xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
				}
				catch (e)
				{
					alert("Your browser does not support AJAX!");
					return false;
				}
			}
		}
		xmlHttp.onreadystatechange=function()
		{
			if(xmlHttp.readyState==4)
			{
				div = document.getElementById('result');
				div.innerHTML = xmlHttp.responseText;
				div = document.getElementById('loading');
				div.innerHTML = "";
			}
		}

		url = this.hitterBaseUri + "/ajax-recent.php?user=ord";
		div = document.getElementById('url');
		div.innerHTML = url;
		div = document.getElementById('loading');
		div.innerHTML = "Loading chart. Please wait...";

		try
		{
			xmlHttp.open("GET",url,true);
		}
		catch(e)
		{
			alert( e );
			return(false);
		}
		xmlHttp.send(null);
	},

	getHitterTable:function()
	{
		alert( 'Here' );
		var xmlHttp;
		try
		{
			// Firefox, Opera 8.0+, Safari
			xmlHttp=new XMLHttpRequest();
		}
		catch (e)
		{
			// Internet Explorer
			try
			{
				xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
			}
			catch (e)
			{
				try
				{
					xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
				}
				catch (e)
				{
					alert("Your browser does not support AJAX!");
					return false;
				}
			}
		}
		xmlHttp.onreadystatechange=function()
		{
			if(xmlHttp.readyState==4)
			{
				div = document.getElementById('result');
				div.innerHTML = xmlHttp.responseText;
				div = document.getElementById('loading');
				alert( div.nextSibling.nextSibling );
				div.nextSibling.nextSibling.style.display = 'none';
				div.innerHTML = "";
			}
		}

		url = this.hitterBaseUri + "/ajax.php?user=ord&mode=" +
	       document.forms[0].periods.value +
	       document.forms[0].mode.value +
		      "&limit=" + document.forms[0].limit.value +
		      "&table_type=" + document.forms[0].table_type.value +
		      "&start_period=" + document.forms[0].year.value + document.forms[0].month.value + document.forms[0].day.value;
		div = document.getElementById('url');
		div.innerHTML = url;
		div = document.getElementById('loading');
		div.innerHTML = "Loading chart. Please wait...";

		try
		{
			xmlHttp.open("GET",url,true);
		}
		catch(e)
		{
			alert( e );
			return(false);
		}
		xmlHttp.send(null);
	}
};