var slideWait=6;
var transitionTime=0.75;
var soundFile="ss-audio-track.mp3";
var imagePrefix="http://villages.millenniumpromise.org/media/images/";

var _nextSlide, _curSlide;
var ystats=new $A();
var yindex=0;
var ydiv;
var showingSlide;
var _xsCount=0;
var playMode=0;

Element.addMethods("img",{
	wrapTable: function(img) {
		var _table=new Element("table", {className: 'iw'});
		var table=$w('t m b').inject(_table, function(tab, trc) {
			var _tr=Builder.node('tr', { className: trc })
			$w('l m r').inject(_tr, function(tre, tdc) {
				var _td=Builder.node('td', {className: tdc})
				if(trc=='m' && tdc=='m') {
					_td=new Element("img", {src: img.src}).wrap('td');
				}
				return tre.insert(_td);
			}.bind(this))
			tab.insert(_tr);
			return tab;
		}.bind(this));
		return table;
		Element.replace(img, table);
	}
})

var XStats=Class.create({
	initialize: function(z) {
		this._id=_xsCount++;
		this.atts=$H($A(z.attributes).inject({}, function(hsh, attr) { hsh[attr.nodeName]=attr.nodeValue; return hsh }));
		this.year=this.atts.unset('year');
		this.quarter=this.atts.unset('quarter');
		this.sectorName=this.atts.unset('area');
		this._imageXY=this.atts.unset('imagexy') || "100,125";
		this._captionXY=this.atts.unset('captionxy') || "300,300";
		this._qXY=this.atts.unset('qxy') || "10,10";
		
		if(this._imageXY) { this.imageXY=this._imageXY.split(",") }
		if(this._captionXY) { this.captionXY=this._captionXY.split(",") }
		if(this._qXY) { this.qXY=this._qXY.split(",") }
		this.toDiv();
		this.present();
	},
	summarize: function() {
		if(!this._summary) {
			this._summary=new Element("div", { className: 'data-summary' }).insert(this.atts.toJSON())
		}
		return this._summary;
	},
	dateSpan: function() {
		if(!this.dateBox) {
			this.dateBox=new Element("span", { className: 'number-box'
			}).insert(" "+this.year+" <span class='q'>Q</span>"+this.quarter).wrap('div').setStyle('float:left');
		}
		return this.dateBox;
	},
	getImage: function() {
		if(!this.image) {
			if(Prototype.Browser.IE) {
				this.image=new Element("img", {src: imagePrefix+this.atts.unset('media'), className: 'nowrap' } );
			} else {
				this.image=new Element("img", {src: imagePrefix+this.atts.unset('media') } ).wrapTable();
			}
		}
		return this.image;
	},
	getCaption: function() {
		if(!this.caption) {
			this.caption=new Element("span").insert(this.atts.unset('caption'));
		}
		return this.caption;
	},
	getSector: function() {
		if(!this.sector) {
			this.sector=new Element("div", {className: 'sector'}).insert(new Element("span", { className: this.sectorName.toLowerCase() }).insert(this.sectorName))
		}
		return this.sector;
	},
	toDiv: function() {
		this._topRow=new Element('div', {className: 'tr'}).insert(
				this.dateSpan()
			).insert(
				this.getSector()
				)
		this._bottomTable=new Element('table', { className: 'slide'}).insert(new Element('tbody').insert(
			new Element('tr').insert(
					new Element('td').insert(this.getImage())
				).insert(
					new Element('td').insert(this.getCaption())
				)
			));
		
		this.div=new Element("div", { className: this.sectorName.toLowerCase()+"-div" }).insert(this._topRow).insert(this._bottomTable).setStyle("display:none");
		return this.div;
		
		this.table=Builder.node('table', { className: 'slide'});
		this.table.insert(Builder.node('tr', { className: 'top-row' }).insert(
			Builder.node('td').insert(this.dateSpan())
			).insert(
			Builder.node('td', { className: 'sector' }).insert(this.getSector())
				)).insert(Builder.node('tr').insert(
					Builder.node('td').insert(this.getImage())
					).insert(
					Builder.node('td').insert(this.getCaption())
						))
		this.div=this.table.wrap('div');//.setStyle("display:none"); //http://villages.millenniumpromise.org/media/images/image001.jpg
		return this.div;
	},
	present: function() {
		$('slidebox').insert(this.div);
	},
	appear: function() {
		_nextSlide=this;
		this.div.appear({
			duration: transitionTime,
			afterFinish: waitThenProceedWithShow.bind(this),
			queue: 'end'
		});
	},
	hide: function() {
		this.div.hide();
	}
});

function waitThenProceedWithShow() {
	if(playMode==1) {
		advanceShow.delay(slideWait); showingSlide.hide(); showingSlide=this;		
	}
}
function showStat(stat, force) {
//	if(playMode==1 || force) {
		stat.appear();
		yindex=stat._id;
//	} else {
//	}
}

function togglePlay(evt) {
	evt.stop();
	if($('play-pause').toggleClassName("off").hasClassName("off")) {
		playMode=1;
	} else {
		playMode=0;
	}
}
function toggleSound(evt) {
	evt.stop();
	if($('sound-onoff').hasClassName("off")) {
		Sound.enable();
		Sound.play(soundFile, { replace: true });
		$('sound-onoff').removeClassName("off");
	} else {
		Sound.enable();
		Sound.play('', { replace: true });
		Sound.disable();
		$('sound-onoff').addClassName("off");
	}
}
function startShow() {
	playMode=1;
	$('next-button').observe('click', function(evt) {
		var _yi=getYindex();
		showStat(ystats[++_yi], true);
	})
	$('prev-button').observe('click', function(evt) {
		var _yi=getYindex()-1;
		showStat(ystats[_yi], true);
	});
	$('sound-onoff').observe('click', toggleSound);
	$('play-pause').observe('click', togglePlay)
	yindex=0;
	showingSlide=ystats.first();
	showingSlide.div.show();
	advanceShow.delay(slideWait);
	Sound.play(soundFile, {
		onEnd: function() { alert('done withs ound') }
	});
}
function getYindex() { return showingSlide._id; }
function advanceShow() {
	if(playMode==1) {
		yindex++;
		showStat(ystats[yindex])
	}
}
var processData=function(dv) {
	ydiv=$('datadiv').down('#years');
	ystats=ydiv.childElements().map(function(ystat) { return new XStats(ystat) });
	startShow(); //data is loaded, show can start
}
var titleRow=function(q,sect) {
	var _row=Builder.node('div', {className: 'title-row' });
	_row.insert(q.setStyle('float:left')).insert(sect.setStyle('float:right'));
	return _row;
}
var downloadData=function() {
	var tt=new Ajax.Updater('datadiv', 'data/uganda-v3.xhtml?23', {
		method: 'get',
		onComplete: function(zz) {
			processData()
		}
	})
	prepShow();
};
function prepShow() {
	$$('img.tw').each(Element.wrapTable);
}