var TabSet = Class.create();

TabSet.prototype = {
	initialize: function(divObj, json, parent) {
		this.divObj = divObj;
		this.json = json;
		this.parent = parent;
		if (parent.tabSetCache[json]) {
			this.processSet(parent.tabSetCache[json]);
		}
		else {
			$('tabText').style.visibility = 'visible';
			parent.replaceTabText(parent.tabData.loading);
			this.ajax = new Ajax.Request(
				json,
				{
					method: 'get',
					onComplete: this.processAjaxRequest.bind(this)
				});
		}
	},

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

	processSet: function(execText) {
		eval(execText);
		this.destroyCards();
		new ImagePreloader($H(this.tabSetData.images).values(), this.placeCards.bind(this));
		this.parent.placeScrollBar(this.tabSetData);
		if (this.parent.selectedTab == 0)
			$('currentTabLink').href = this.parent.tabData.ex_link;
		else if (this.parent.selectedTab == 1)
			$('currentTabLink').href = this.parent.tabData.ft_link;
		else
			$('currentTabLink').href = this.parent.tabData.ad_link;
	},

	placeCards: function() {
		index = 0;
		$A(this.tabSetData.cards).each(function(card) {
			var id = 'card' + index;
			var style = 'position:absolute;visibility:hidden;width:85px;height:101px;' + 'left:' + card.x + 'px;top:' + card.y + 'px'
			var innerHTML = '<img style="' + style + '"class="card" id="' + id + '" src="' + this.tabSetData.images[card.image]+ '" />';
			new Insertion.Bottom(this.divObj, innerHTML);
			index++;
		}.bind(this));
		document.getElementsByClassName('card').each (function(card) {
			Event.observe(card, 'mouseover', this.onCardMouseOver.bindAsEventListener(this));
		}.bind(this));
		this.showCards();
		$('tabText').style.visibility = 'visible';
		this.parent.replaceTabText(this.parent.tabData.rollover_card);
	},

	destroyCards: function() {
		document.getElementsByClassName('card').each (function(card) {
			Element.remove(card);
		});
	},

	showCards: function() {
		document.getElementsByClassName('card').each (function(card) {
			card.style.visibility = 'visible';
			new Rico.Effect.FadeTo(card, 0, 0, 1);
			new Rico.Effect.FadeTo(card, 1, 500, 10);
		});
	},

	onCardMouseOver: function(evt) {
		el = Event.element(evt);
		var index = parseInt(el.id.replace("card", ""));
		this.cardIndex = index;
		cardObj = this.tabSetData.cards[index];
		$('selectedCard').style.top = cardObj.ly + 'px';
		$('selectedCard').style.left = cardObj.lx + 'px';
		$('selectedCard').src = el.src;
		$('selectedCard').style.visibility = 'visible';
		$('selectedCard').style.zIndex = 19;
		$('tooltip').update(cardObj.toolTip);
		$('tooltip').style.visibility = 'visible';
		$('tooltip').style.top = cardObj.ty + 'px';
		$('tooltip').style.left = cardObj.tx + 'px';
		$('tooltip').style.zIndex = 20;
		//Rico.Corner.round($('tooltip'));
		this.parent.replaceTabText(this.parent.tabData.click_card);
		Event.stop(evt);
	}
};


var TabbedInterface = Class.create();

TabbedInterface.prototype = {
	tabSetCache: {},

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

	processTab: function(req) {
		eval(req.responseText);
		new ImagePreloader($H(this.tabData.images).values(), this.placeElements.bind(this), true);
	},

	selectExperiments: function() {
		$('tabImg').src = this.tabData.images.tab_experiments;
		this.clearActiveCard();
		this.selectedTab = 0;
		this.selectedSet = 0;
		this.applySet();
	},

	selectFieldTrips: function() {
		$('tabImg').src = this.tabData.images.tab_fieldtrips;
		this.clearActiveCard();
		this.selectedTab = 1;
		this.selectedSet = 0;
		this.applySet();
	},

	selectAdventures: function() {
		$('tabImg').src = this.tabData.images.tab_adventures;
		this.clearActiveCard();
		this.selectedTab = 2;
		this.selectedSet = 0;
		this.applySet()
	},

	clearActiveCard: function() {
		$('selectedCard').style.visibility = 'hidden';
		$('tooltip').update('');
		$('tooltip').style.visibility = 'hidden';
	},

	showTab: function() {
		$('tabImg').style.visibility = 'visible';
		new Rico.Effect.FadeTo('tabImg', 0, 0, 1);
		new Rico.Effect.FadeTo('tabImg', 1, 500, 10);
		document.getElementsByClassName('scrollbar').each (function(element) {
			element.style.visibility = 'visible';
			new Rico.Effect.FadeTo(element, 0, 0, 1);
			new Rico.Effect.FadeTo(element, 1, 500, 10);
		}.bind(this));
		this.applySet();
	},

	hide: function() {
		$('tabImg').style.visibility = 'hidden';
		$('tooltip').style.visibility = 'hidden';
		$('selectedCard').style.visibility = 'hidden';
		document.getElementsByClassName('scrollbar').each (function(element) {
			element.style.visibility = 'hidden';
		});
	},

	goForward: function() {
		var tabName = this.tabData.setIndex[this.selectedTab];
		if (this.selectedSet < this.tabData[tabName].length -1) {
			this.selectedSet++;
		}
		else {
			if (this.selectedTab < this.tabData.setIndex.length - 1) {
				this.selectedTab++;
			}
			else {
				this.selectedTab = 0;
			}
			this.selectedSet = 0;
		}
		this.applySet();
	},

	goBack: function() {
		var tabName = this.tabData.setIndex[this.selectedTab];
		if (this.selectedSet > 0) {
			this.selectedSet--;
		}
		else {
			if (this.selectedTab > 0) {
				this.selectedTab--;
			}
			else {
				this.selectedTab = this.tabData.setIndex.length - 1;
			}
			this.selectedSet = this.tabData[this.tabData.setIndex[this.selectedTab]].length -1;
		}
		this.applySet();
	},

	placeElements: function() {
		Event.observe($('right_arrow'), 'mouseover', this.onArrowMouseOver.bindAsEventListener(this));
		Event.observe($('right_arrow'), 'mouseout', this.onArrowMouseOut.bindAsEventListener(this));
		Event.observe($('right_arrow'), 'click', this.onArrowClick.bindAsEventListener(this));
		Event.observe($('left_arrow'), 'mouseover', this.onArrowMouseOver.bindAsEventListener(this));
		Event.observe($('left_arrow'), 'mouseout', this.onArrowMouseOut.bindAsEventListener(this));
		Event.observe($('left_arrow'), 'click', this.onArrowClick.bindAsEventListener(this));
		Event.observe($('selectedCard'), 'mouseout', this.onSelectedCardMouseOut.bindAsEventListener(this));
		Event.observe($('selectedCard'), 'click', this.onSelectedCardClick.bindAsEventListener(this));
		new Rico.Effect.FadeTo('loadTab', 0, 500, 10, {complete:this.showTab.bind(this)});
	},

	getForwardScrollCode: function() {
		var returnValue = 'ex';
		if (this.selectedTab == 0) {
			if (this.selectedSet >= this.tabData.experimentsSets.length - 1)
				returnValue = 'ft';
			else
				returnValue = 'ex';
		}
		else if (this.selectedTab == 1) {
			if (this.selectedSet >= this.tabData.fieldTripsSets.length -1)
				returnValue = 'ad';
			else
				returnValue = 'ft';
		}
		else if (this.selectedTab == 2) {
			if (this.selectedSet >= this.tabData.adventuresSets.length - 1)
				returnValue = 'ex';
			else
				returnValue = 'ad';
		}
		return returnValue;
	},

	getBackwardScrollCode: function() {
		var returnValue = 'ex';
		if (this.selectedTab == 0) {
			if (this.selectedSet == 0)
				returnValue = 'ad_cross';
			else
				returnValue = 'ex';
		}
		else if (this.selectedTab == 1) {
			if (this.selectedSet == 0)
				returnValue = 'ex_cross';
			else
				returnValue = 'ft';
		}
		else if (this.selectedTab == 2) {
			if (this.selectedSet == 0)
				returnValue = 'ft_cross';
			else
				returnValue = 'ad';
		}
		return returnValue;
	},

	onArrowMouseOver: function(evt) {
		el = Event.element(evt);
		if (el.id == 'left_arrow')
			$('left_arrow').src = this.tabData.images['left_arrow_' + this.getBackwardScrollCode() + '_select'];
		else if (el.id == 'right_arrow')
			if(this.progressIndex >= 14)
				$('right_arrow').src = this.tabData.images['right_arrow_full_' + this.getForwardScrollCode() + '_select'];
			else
				$('right_arrow').src = this.tabData.images['right_arrow_empty_' + this.getForwardScrollCode() + '_select'];
		Event.stop(evt);
	},

	onArrowMouseOut: function(evt) {
		el = Event.element(evt);
		if (el.id == 'left_arrow')
			$('left_arrow').src = this.tabData.images['left_arrow_' + this.getBackwardScrollCode()];
		else if (el.id == 'right_arrow')
			if(this.progressIndex >= 14)
				$('right_arrow').src = this.tabData.images['right_arrow_full_' + this.getForwardScrollCode()];
			else
				$('right_arrow').src = this.tabData.images['right_arrow_empty_' + this.getForwardScrollCode()];
		Event.stop(evt);
	},

	onArrowClick: function(evt) {
		el = Event.element(evt);
		if (el.id == 'left_arrow') {
			this.backClicked = true;
			this.goBack();
		}
		else if (el.id == 'right_arrow') {
			this.forwardClicked = true;
			this.goForward();
		}
		Event.stop(evt);
	},

	onSelectedCardMouseOut: function(evt) {
		$('selectedCard').style.visibility = 'hidden';
		$('tooltip').update('');
		$('tooltip').style.visibility = 'hidden';
		this.replaceTabText(this.tabData.rollover_card);
		Event.stop(evt);
	},

	onSelectedCardClick: function(evt) {
		url = this.tabSet.tabSetData.cards[this.tabSet.cardIndex].url;
		window.location = url;
		Event.stop(evt);
	},

	placeScrollBar: function(tabSetData) {
		this.progressIndex = tabSetData.progressIndex;
		document.getElementsByClassName('scrollbar').each(function(element) {
			element.style.visibility = 'visible';
		});
		if (this.backClicked)
			$('left_arrow').src = this.tabData.images['left_arrow_' + this.getBackwardScrollCode() + '_select'];
		else
			$('left_arrow').src = this.tabData.images['left_arrow_' + this.getBackwardScrollCode()];
		divNum = parseInt(this.progressIndex) / 2;
		modNum = parseInt(this.progressIndex) % 2;
		for (var i = 1; i <= 7; i++) {
			if (divNum >= i)
				$('progress' + i).src =  'images/scroll_full.gif';
			else if (modNum == 1 && divNum > i -1)
				$('progress' + i).src = 'images/scroll_half.gif';
			else
				$('progress' + i).src = 'images/scroll_empty.gif';
		}
		if (this.forwardClicked)
			if (this.progressIndex >=14)
				$('right_arrow').src = this.tabData.images['right_arrow_full_' + this.getForwardScrollCode() + '_select'];
			else
				$('right_arrow').src = this.tabData.images['right_arrow_empty_' + this.getForwardScrollCode() + '_select'];
		else
			if (this.progressIndex >=14)
				$('right_arrow').src = this.tabData.images['right_arrow_full_' + this.getForwardScrollCode()];
			else
				$('right_arrow').src = this.tabData.images['right_arrow_empty_' + this.getForwardScrollCode()];
		this.forwardClicked = false;
		this.backClicked = false;
	},

	applySet: function() {
		if (this.selectedTab == 0)
			$('tabImg').src = this.tabData.images.tab_experiments;
		else if (this.selectedTab == 1)
			$('tabImg').src = this.tabData.images.tab_fieldtrips;
		else if (this.selectedTab == 2)
			$('tabImg').src = this.tabData.images.tab_adventures;
		var json = this.tabData[this.tabData.setIndex[this.selectedTab]][this.selectedSet];
		this.tabSet = new TabSet(this.divObj, json, this);
	},

	replaceTabText: function(text) {
		$('tabText').update(text);
		var left = 333 - $('tabText').offsetWidth;
		$('tabText').style.top = '127px';
		$('tabText').style.left = left + 'px';
		$('tabText').style.zIndex = 300
	}
};