var ithousevallist = [
	{'id':'house_dem','styles':{'background':'url(\'/indepth/uselections2008/images/demograt-vert-house.gif\')'}},
	{'id':'house_gop','styles':{'background':'url(\'/indepth/uselections2008/images/republican-vert-house.gif\')'}} 
	//{'id':'house_oth', 'styles': { 'background': 'gray' } }
];

var ithousedelay = 60000;
var ithouseurl = "/indepth/uselections2008/xml/congress.xml";
var ithouselasttxt = "";

var ithousestartpos = 0; // Specify the width of the tick area
var ithousebarspacing = 0.95; // Spacing between bars as percentage

var ithousetotalseats = 435;

var ithouseratio;

window.addEvent( 'domready', function() {
	ithousesetupgraph( ithousevallist );
	ithousegetdata();
});

function ithousegetdata() {
  var request = new XHR({
    method: 'get',
    onSuccess: function(txt, xml) {

      if (ithouselasttxt == txt) {
				ithouseloaded();
        window.setTimeout("ithousegetdata();", ithousedelay);
        return;
      }
      ithouselasttxt = txt;

			var vallist = {};

      var xmldoc = xml.documentElement;
      var itemlist = xmldoc.getElementsByTagName('item');
      for(var i=0; i<itemlist.length; i++) {
				var record = {};

				var node = itemlist[i].getElementsByTagName('id');
				record['id'] = node[0].childNodes[0].nodeValue;
				node = itemlist[i].getElementsByTagName('name');
				record['name'] = node[0].childNodes[0].nodeValue;
				node = itemlist[i].getElementsByTagName('seats');
				record['seats'] = node[0].childNodes[0].nodeValue;
				node = itemlist[i].getElementsByTagName('existingseats');
				if ( node[0] ) {
					record['existingseats'] = node[0].childNodes[0].nodeValue;
				}

				vallist[ record.id ] = record;
      }

			ithousevallist.each( function(item) {
				if (vallist[ item.id ]) {
					item.seats = vallist[ item.id ].seats;
				}
			});

			ithouseloaddata( ithousevallist );
	
			ithouseloaded();

      window.setTimeout("ithousegetdata();", ithousedelay);
    }
  });
	
	$('ithouseloading').setStyle( 'display', 'block' );
	new Fx.Style($('ithousegraph'), 'opacity' ).start( 0.2 ).chain( function() {
		new Fx.Style($('ithouseloading'), 'opacity').start( 1 ).chain( function() {
			request.send( ithouseurl + "?ts=" + (new Date()).getTime() );
		});
	});
}

function ithousesetupgraph (ithousevallist) {
	var gw = $('ithousegraphwrapper');
	var gwidth = gw.getStyle( 'width' ).toInt();
	var gheight = gw.getStyle( 'height' ).toInt();

	var offset = (gwidth - ithousestartpos) / ithousevallist.length;

	ithouseratio = ( gheight > ithousetotalseats ? ithousetotalseats / gheight : gheight / ithousetotalseats );

	// Center the loading icon
	var loading = $('ithouseloading');
	var lwidth = loading.getStyle( 'width' ).toInt();
	var lheight = loading.getStyle( 'height' ).toInt();

	loading.setStyle( 'top', (gheight/2) - (lheight/2));
	loading.setStyle( 'left', (gwidth/2) - (lwidth/2));

	if (ithousestartpos == 0) {
		ithousestartpos = gwidth - (gwidth * ithousebarspacing);
		ithousestartpos /= 4;
	}

	ithousevallist.each( function (item, i) {

		var el = new Element('div',
			{ 'id': item.id, 'class': 'vbar', 'styles': item.styles }
		);
	
		el.setStyle( 'width', Math.round( offset * ithousebarspacing ) );
	
		var left = ithousestartpos;
		if (i > 0) {
			left += offset * i;
		}
		el.setStyle( 'left', left.toInt() );
	
		el.injectInside( $('ithousegraph') );
	});
	
	// TODO Do ticks using min-max range?
	/*
	for(var pos=25;pos<=250;pos+=25) {
		var tick = new Element('div',
			{ 'class': 'tick', 'styles': { 'bottom': pos+'px' } }
		);
		tick.setHTML( pos*2 );
		tick.injectInside( $('graph') );
	}
	*/
}

function ithouseloaddata( vallist ) {
	vallist.each( function (item, i) {
		var el = $( item.id );
		el.setText( '' );
		new Fx.Style(el, 'height' ).start( 0, (item.seats*ithouseratio)+10 ).chain(
			function() {el.setText( item.seats );}
		);
	});
}


function ithouseloaded() {
	new Fx.Style($('ithouseloading'), 'opacity').start( 0 );
	new Fx.Style($('ithousegraph'), 'opacity').start( 1 );
}