var EllipseSet = Class.create();

EllipseSet.prototype = {
	index: 0,

	initialize: function(divObj, json, parent) {
		this.parent = parent;
		this.divObj = divObj;
		this.json = json;
		if (parent.ellipseSetCache[json]) {
			this.processSet(parent.ellipseSetCache[json]);
		}
		else {
			this.ajax = new Ajax.Request(
				json,
				{
					method: 'get',
					onComplete: this.processAjaxRequest.bind(this)
				});
		}
	},

	processAjaxRequest: function(req) {
		this.parent.ellipseSetCache[this.json] = req.responseText;
		this.processSet(req.responseText);
	},

	processSet: function(execText) {
		eval(execText);
		this.nextImg = this.parent.ellipseData.images['nextImg'];
		this.priorImg = this.parent.ellipseData.images['priorImg'];
		this.placeSet();
	},

	placeSet: function(scroll) {
		next = $('nextImg');
		prior = $('priorImg');
		link = $('linkImg');
		header = $('headerImg');
		verbiage = $('linkVerbiage');
		if (!scroll)  {
			next.src = this.nextImg;
			prior.src = this.priorImg;
		}
		infoMap = this.ellipseSetData.list[this.index];
		if (this.ellipseSetData.list.length > 1) {
			next.style.visibility = 'visible';
			new Rico.Effect.FadeTo(next, 0, 0, 1);
			new Rico.Effect.FadeTo(next, 1, 500, 10);
			next.style.left = infoMap.nextX;
			next.style.top = infoMap.nextY;
			prior.style.visibility = 'visible';
			new Rico.Effect.FadeTo(prior, 0, 0, 1);
			new Rico.Effect.FadeTo(prior, 1, 500, 10);
			prior.style.left = infoMap.priorX;
			prior.style.top = infoMap.priorY;
		}
		else {
			next.style.visibility = 'hidden';
			prior.style.visibility = 'hidden';
		}
		link.style.visibility = 'visible';
		new Rico.Effect.FadeTo(link, 0, 0, 1);
		new Rico.Effect.FadeTo(link, 1, 500, 10);
		link.src = infoMap.image;
		link.style.left = infoMap.imageX;
		link.style.top = infoMap.imageY;
		if (infoMap.header) {
			header.style.visibility = 'visible';
			new Rico.Effect.FadeTo(header, 0, 0, 1);
			new Rico.Effect.FadeTo(header, 1, 500, 10);
			header.src = infoMap.header;
			header.style.left = infoMap.headerX;
			header.style.top = infoMap.headerY;
		}
		else {
			header.style.visibility = 'hidden';
		}
		if (infoMap.text) {
			verbiage.style.visibility = 'visible';
			verbiage.update(infoMap.text);
			verbiage.style.left = infoMap.textX;
			verbiage.style.top = infoMap.textY;
			verbiage.style.width = infoMap.textWidth;
		}
		else {
			verbiage.style.visibility = 'hidden';
		}
		next.style.zIndex = 3;
		prior.style.zIndex = 3;
	},

	moveNext: function() {
		if (this.index >= this.ellipseSetData.list.length - 1)
			this.index = 0;
		else
			this.index++;
		this.placeSet(true);
	},

	movePrior: function () {
		if (this.index == 0)
			this.index = this.ellipseSetData.list.length - 1
		else
			this.index--;
		this.placeSet(true);
	}
};

var Ellipse = Class.create();

Ellipse.prototype = {
	ellipseSetCache: {},

	selectedTool: 'nowInFocusImg',
	findCenterImgPulldownInnerHTML: 'var innerText = this.pulldownText();',
	searchImgPulldownInnerHTML: 'var innerText = this.searchText();',

	initialize: function(divObj) {
		this.divObj = divObj;
		this.ajax = new Ajax.Request(
			'json/en-us/ellipsedata.js',
			{
				method: 'get',
				onComplete: this.processEllipse.bind(this)
			});
	},

	processEllipse: function(req) {
		eval(req.responseText);
		this.nextImg = this.ellipseData.images['nextImg'];
		this.nextImgSel = this.ellipseData.images['nextImgSel'];
		this.priorImg = this.ellipseData.images['priorImg'];
		this.priorImgSel = this.ellipseData.images['priorImgSel'];
		new ImagePreloader($H(this.ellipseData.images).values(), this.placeElements.bind(this), true);
	},

	showEllipse: function() {
		$('ellipseImg').style.visibility = 'visible';
		new Rico.Effect.FadeTo('ellipseImg', 0, 0, 1);
		new Rico.Effect.FadeTo('ellipseImg', 1,500,10, {complete:this.showEllipseElements.bind(this)});
	},

	showEllipseElements: function() {
		$('findCenterImg').style.visibility = 'visible';
		$('searchImg').style.visibility = 'visible';
		document.getElementsByClassName('ellipseImg').each (function(element) {
			element.style.visibility = 'visible';
			new Rico.Effect.FadeTo(element, 0, 0, 1);
			new Rico.Effect.FadeTo(element, 1, 500, 10);
		});
		this.ellipseSet = new EllipseSet(this.divObj, this.ellipseData.ellipseSets[this.selectedTool], this);
	},

	hide: function() {
		$('ellipseImg').style.visibility = 'hidden';
		$('findCenterImg').style.visibility = 'hidden';
		$('searchImg').style.visibility = 'hidden';
		document.getElementsByClassName('ellipseImg').each (function(element) {
			element.style.visibility = 'hidden';
		});
		$('findCenterImgPulldown').style.visibility = 'hidden';
		$('searchImgPulldown').style.visibility = 'hidden';
		$('nextImg').style.visibility = 'hidden';
		$('priorImg').style.visibility = 'hidden';
		$('linkImg').style.visibility = 'hidden';
		$('headerImg').style.visibility = 'hidden';
		$('linkVerbiage').style.visibility = 'hidden';
	},

	placeElements: function() {
		placements = {
			findCenterImg:	[278,20],
			searchImg:		[278,210],
			nowInFocusImg: 	[0, 110],
			liveCamsImg:	[22, 175],
			citizensImg:	[87, 270],
			compareImg:		[150, 310]
		};
		$H(placements).keys().each(function(key) {
			$(key).style.top = placements[key][0] + 'px';
			$(key).style.left = placements[key][1] + 'px';
			$(key).style.zIndex = 2;
			if (key == this.selectedTool)
				$(key).src = this.ellipseData.images[key + 'Sel'];
			else
				$(key).src = this.ellipseData.images[key];

		}.bind(this));
		document.getElementsByClassName('ellipseImg').each (function(element) {
			Event.observe(element, 'mouseover', this.onToolMouseOver.bindAsEventListener(this));
			Event.observe(element, 'mouseout', this.onToolMouseOut.bindAsEventListener(this));
			Event.observe(element, 'click', this.onToolClick.bindAsEventListener(this));
		}.bind(this));
		document.getElementsByClassName('pulldown').each (function(element) {
			Event.observe(element, 'click', this.onPulldownClick.bindAsEventListener(this));
		}.bind(this));
		next = $('nextImg');
		prior = $('priorImg');
		Event.observe(next, 'mouseover', this.onNextMouseOver.bindAsEventListener(this));
		Event.observe(next, 'mouseout', this.onNextMouseOut.bindAsEventListener(this));
		Event.observe(next, 'click', this.onNextClick.bindAsEventListener(this));
		Event.observe(prior, 'mouseover', this.onPriorMouseOver.bindAsEventListener(this));
		Event.observe(prior, 'mouseout', this.onPriorMouseOut.bindAsEventListener(this));
		Event.observe(prior, 'click', this.onPriorClick.bindAsEventListener(this));
		Event.observe('linkImg', 'click', this.onLinkClick.bindAsEventListener(this));
		Event.observe('headerImg', 'click', this.onLinkClick.bindAsEventListener(this));
		Event.observe('linkVerbiage', 'click', this.onLinkClick.bindAsEventListener(this));
		new Rico.Effect.FadeTo('loadEllipse', 0, 500, 10, {complete:this.showEllipse.bind(this)});
	},


	onToolMouseOver: function(evt) {
		el = Event.element(evt);
		el.src = this.ellipseData.images[el.id + 'Sel'];
		Event.stop(evt);
	},

	onToolMouseOut: function(evt) {
		el = Event.element(evt);
		if (el.id != this.selectedTool)
			el.src = this.ellipseData.images[el.id];
		Event.stop(evt);
	},

	onToolClick: function(evt) {
		el = Event.element(evt);
		$(this.selectedTool).src = this.ellipseData.images[this.selectedTool];
		this.selectedTool = el.id;
		el.src = this.ellipseData.images[el.id + 'Sel'];
		this.ellipseSet = new EllipseSet(this.divObj, this.ellipseData.ellipseSets[this.selectedTool], this);
		Event.stop(evt);
	},

	onPulldownClick: function(evt) {
		el = Event.element(evt);
		el.src = this.ellipseData.images[el.id + 'Sel'];
		pullDown = $(el.id + 'Pulldown');
		if (pullDown.style.visibility == 'visible') {
			el.src = this.ellipseData.images[el.id];
			$(el.id + 'Pulldown').style.visibility = 'hidden';
		}
		else {
			pullDown.style.visibility = 'visible';
			eval(this[pullDown.id + 'InnerHTML']);
			Element.update(pullDown, innerText);
			Rico.Corner.round(pullDown);
			document.getElementsByClassName('divSelect', pullDown).each (function(element) {
				Rico.Corner.round(element);
			});

			Event.stop(evt);
		}
	},




	pulldownText: function() {
		return  "<br /><br /><br /><span style='position:absolute;top:18px;left:5px'>" + this.ellipseData.chooseCountryText +
			   "</span><div onclick='ellipse.onScienceCenterClick()' class='divSelect' id='selectCenter'  style='position:absolute;top:35px;left:10px;width:110px'>" +
			   "&nbsp;" + this.ellipseData.selectACountry + "&nbsp;<img src='images/selectarrow.gif' /></div><br />";
	},

	searchText: function() {
		return "<br /><br /><br /><br />&nbsp;<input style='position:absolute;top:15px;left:10px' type='text' name='searchText' id='searchText' size='30'/>" +
				"<input style='cursor:pointer;position:absolute;top:10px;left:160px' type='image' src=\'" + this.ellipseData.images.goImg +"\' />" +
				"<input style='cursor:pointer;position:absolute;top:33px;left:10px' type='radio' name='searchFilter' id='chtryscience' checked='checked' value='tryscience' />" +
				"<span onclick='$(chtryscience).checked=true' style='cursor:pointer;position:absolute;top:37px;left:33px'>" + this.ellipseData.justTryScienceText + "</span>" +
				"<input style='cursor:pointer;position:absolute;top:48px;left:10px' type='radio' name='searchFilter' id='challscience' value='allscience' />" +
				"<span onclick='$(challscience).checked=true' style='cursor:pointer;position:absolute;top:52px;left:33px'>" + this.ellipseData.allScienceText ;
	},

	onNextMouseOver: function(evt) {
		el = Event.element(evt);
		el.src = this.nextImgSel;
		Event.stop(evt);
	},

	onNextMouseOut: function(evt) {
		el = Event.element(evt);
		el.src = this.nextImg;
		Event.stop(evt);
	},

	onNextClick: function(evt) {
		el = Event.element(evt);
		this.ellipseSet.moveNext();
		Event.stop(evt);
	},

	onPriorMouseOver: function(evt) {
		el = Event.element(evt);
		el.src = this.priorImgSel;
		Event.stop(evt);
	},

	onPriorMouseOut: function(evt) {
		el = Event.element(evt);
		el.src = this.priorImg;
		Event.stop(evt);
	},

	onPriorClick: function(evt) {
		el = Event.element(evt);
		this.ellipseSet.movePrior();
		Event.stop(evt);
	},

	onLinkClick: function(evt) {
		var href =  this.ellipseSet.ellipseSetData.list[this.ellipseSet.index].url;
		window.location = href;
	},

	onSearchSubmit: function(evt) {
		searchText = $F('searchText');
		if (searchText.replace(/^\s+|\s+$/, '') == '') {
			alert(this.ellipseData.emptySearch);
		}
		else {
			if ($('challscience').checked) {
				window.location = 'http://search.tryscience.org/cgi-bin/query?mss=search&stq=0&pg=aq&q=' + searchText.escapeHTML() +
								  '*&i=allsites&kl=es&uil=esiso&custom2=All'
			}
			else {
				window.location = 'http://search.tryscience.org/cgi-bin/query?mss=search&stq=0&pg=aq&q=' + searchText.escapeHTML() +
								  '*&i=allsites&kl=es&uil=esiso&custom2=tryscience'
			}
		}
	},

	centerOptionMouseOver: function(evt) {
		el = Event.element(evt);
		if (el.innerHTML != '') {
			el.style.backgroundColor = 'yellow';
		}
	},

	centerOptionMouseOut: function(evt) {
		el = Event.element(evt);
		el.style.backgroundColor = 'white';
	},

	centerOptionClick: function(evt) {
		el = Event.element(evt);
		if (el.innerHTML != '') {
			if(el.id != 'United_States') {
				$('selectCenterExpanded').style.visibility = 'hidden';
				window.location = 'http://search.tryscience.org/cgi-bin/query?mss=search&stq=0&pg=aq&i=travelguide&kl=en&uil=esiso&q=country:' + el.id.replace('_', '%20');
			}
			else {
				$('selectCenterExpanded').style.visibility = 'hidden';
				this.onUSSelected();
			}
		}
	},

	stateOptionClick: function(evt) {
		el = Event.element(evt);
		if (el.innerHTML != '') {
			if(el.id == 'All_States') {
				$('selectStateExpanded').style.visibility = 'hidden';
				window.location = 'http://search.tryscience.org/cgi-bin/query?mss=search&stq=0&pg=aq&i=travelguide&kl=en&uil=esiso&q=country:United%20States'
			}
			else {
				$('selectStateExpanded').style.visibility = 'hidden';
				window.location = 'http://search.tryscience.org/cgi-bin/query?mss=search&stq=0&pg=aq&i=travelguide&kl=en&uil=esiso&q=state:' + el.id.replace('_', '%20') + '+';
			}
		}
	},

	centerParentMouseOut: function(evt) {
		el = Event.element(evt);
		related = evt.relatedTarget || evt.toElement;
		if (related.tagName != 'TABLE' && related.tagName != 'TD') {
			$('selectCenterExpanded').style.visibility = 'hidden';
		}
	},

	stateParentMouseOut: function(evt) {
		el = Event.element(evt);
		related = evt.relatedTarget || evt.toElement;
		if (related.tagName != 'TABLE' && related.tagName != 'TD') {
			$('selectStateExpanded').style.visibility = 'hidden';
		}
	},

	reorderOptions: function(centers, columns) {
		var numCenters = $H(centers).keys().length;
		var rows = Math.ceil(numCenters/columns);
		var centerMod = numCenters % columns;
		var buffer = {};
		var columnIndex = 0;
		var rowIndex = 0;
		var numRows = rows;
		$H(centers).keys().each(function(center) {
			if(rowIndex < numRows) {
				if (buffer[columnIndex])
					buffer[columnIndex].push(center);
				else
					buffer[columnIndex] = [center];
				rowIndex ++;
			}
			else {
				rowIndex = 0;
				columnIndex++;
				buffer[columnIndex] = [center];
				numRows = rows - 1;
			}
		});
		var returnArray = [];
		for(var i=0; i < rows; i++) {
			for(var j=0; j < columns; j++) {
				if (i < buffer[j].length)
					returnArray.push(buffer[j][i]);
				else
					returnArray.push('');
			}
		}
		return returnArray;
	},

	onScienceCenterClick: function() {
		var expandElement = $('selectCenterExpanded');
		var centers = this.ellipseData.centers;
		var countryOptions = '';
		var row = 0;
		var rowId1 = '';
		var rowId2 = '';
		var rowDesc1 = '';
		var rowDesc2 = '';
		var rowDesc3 = '';
		this.reorderOptions(centers, 3).each(function(country) {
			if (row == 0) {
				rowId1 = country;
				if (centers[country])
					rowDesc1 = centers[country];
				else
					rowDesc1 = '';
			}
			else if (row == 1) {
				rowId2 = country;
				if (centers[country])
					rowDesc2 = centers[country];
				else
					rowDesc2 = '';
			}
			else {
				if (centers[country])
					rowDesc3 = centers[country];
				else
					rowDesc3 = '';
				countryOptions += '<tr>' +
				'<td id="' + rowId1 + '" class="centOpt">' + rowDesc1 + '</td>' +
				'<td id="' + rowId2 + '" class="centOpt">' + rowDesc2 + '</td>' +
				'<td id="' + country + '" class="centOpt">' + rowDesc3 + '</td>' +
				'</tr>';
			}
			if (row >= 2)
				row = 0;
			else
				row++;
		});
		Element.update(expandElement, '');
		Element.update(expandElement, '<table id="selectCenterParent"><tbody>' +
			countryOptions +
		'</tbody></table>');
		expandElement.style.visibility = 'visible';
		Rico.Corner.round(expandElement);
		document.getElementsByClassName('centOpt').each (function(element) {
			Event.observe(element, 'mouseover', this.centerOptionMouseOver.bindAsEventListener(this));
			Event.observe(element, 'mouseout', this.centerOptionMouseOut.bindAsEventListener(this));
			Event.observe(element, 'click', this.centerOptionClick.bindAsEventListener(this));
		}.bind(this));
		Event.observe($('selectCenterParent'), 'mouseout', this.centerParentMouseOut.bindAsEventListener(this));
	},

	onUSSelected: function() {
		var expandElement = $('selectStateExpanded');
		var states = this.ellipseData.usStates;
		var stateOptions = '';
		var row = 0;
		rowId1 = '';
		rowDesc1 = '';
		rowId2 = '';
		rowDesc2 = '';
		this.reorderOptions(states, 2).each(function(state) {
			if (row == 0) {
				rowId1 = state;
				if (states[state])
					rowDesc1 = states[state];
				else
				  	rowDesc1 = '';
			}
			else {
				if (states[state])
					rowDesc2 = states[state];
				else
					rowDesc2 = '';
				stateOptions += '<tr>' +
				'<td id="' + rowId1 + '" class="stateOpt">' + rowDesc1 + '</td>' +
				'<td id="' + state + '" class="stateOpt">' + rowDesc2 + '</td>' +
				'</tr>';
			}
			if (row >= 1)
				row = 0;
			else
				row++;
		});
		Element.update(expandElement, '');
		Element.update(expandElement, '<table id="selectStateParent"><tbody>' +
			stateOptions +
		'</tbody></table>');
		expandElement.style.visibility = 'visible';
		Rico.Corner.round(expandElement);
		document.getElementsByClassName('stateOpt').each (function(element) {
			Event.observe(element, 'mouseover', this.centerOptionMouseOver.bindAsEventListener(this));
			Event.observe(element, 'mouseout', this.centerOptionMouseOut.bindAsEventListener(this));
			Event.observe(element, 'click', this.stateOptionClick.bindAsEventListener(this));
		}.bind(this));
		Event.observe($('selectStateParent'), 'mouseout', this.stateParentMouseOut.bindAsEventListener(this));
	}
};