/*

		tabGroup.js
		
		Mootools-based class to provide customizable tab functionality
		
		Written by:		Ken Kolodziej
		Created on:		September 26, 2007
		Modified:		November 24, 2007
							- Added support for dynamic tab image control and image swapping

		USAGE:			Instantiate a new TabGroup and pass four arrays in the options object (tab div ids,
						trigger object ids, main image URLs and rollover imageURLs).
						The four arrays MUST be synchronized for the tabs to be effective.
*/

var TabGroup = new Class({
	options: {
		tabs: [],
		divIDs:[],
		triggerObjIDs:[],
		mainImgURLs:[],
		rolloverImgURLs:[],
		upImgURLs:[],
		downImgURLs:[],
		startTabID:'',
		onTabShow:null,
		classPrefixes: []
	},
	initialize: function(options){
		this.setOptions(options);
		
		if(this.options.divIDs.length != this.options.triggerObjIDs.length)
			throw("Array lengths do not match.");
		
		for(var i = 0; i < this.options.divIDs.length; i++) {
			this.options.tabs.push(new TabClass({
				divID:this.options.divIDs[i],
				triggerObjID:this.options.triggerObjIDs[i],
				mainImgURL:this.options.mainImgURLs[i],
				rolloverImgURL:this.options.rolloverImgURLs[i],
				upImgURL:this.options.upImgURLs[i],
				downImgURL:this.options.downImgURLs[i],
				onTabShow:this.options.onTabShow,
				classPrefix: this.options.classPrefixes[i]
			}));
		}
		
		for(var i = 0; i < this.options.tabs.length; i++) {
			this.options.tabs[i].options.theGroup = this;
			
			if(this.options.triggerObjIDs[i] == this.options.startTabID)
				this.options.tabs[i].show();
		}
	},
	hideAll: function(newTab) {
		//console.log(newTab.options.divID);
		for(var i = 0; i < this.options.tabs.length; i++) {
			//console.log(this.options.tabs[i].options.divID);
			if(this.options.tabs[i].options.divID != newTab.options.divID)
				this.options.tabs[i].hide();
		}
	}
});
TabGroup.implement(new Options, new Events);


var TabClass = new Class({
	open:false,
	options: {
		divID:'',
		triggerObjID:'',
		theGroup:null,
		mainImgURL:'',
		rolloverImgURL:'',
		upImgURL:'',
		downImgURL:'',
		onTabShow:null,
		classPrefix: null
	},
	initialize: function(options){
		this.setOptions(options);
		this.theDiv = $(this.options.divID);
		this.triggerObj = $(this.options.triggerObjID);
		
		this.classSuffixes = ['_ro', '_up', '_down'];
		
		// Add cursor:pointer style
		this.triggerObj.setStyle('cursor', 'pointer');
		
		// Add rollover image effect
		this.triggerObj.addEvent('mouseenter', function(e){
			e = new Event(e);
			if(!this.open)
				this.showRolloverImage();
			e.stop();
		}.bind(this));
		this.triggerObj.addEvent('mouseleave', function(e){
			e = new Event(e);
			if(!this.open) {
				if(this.options.upImgURL || this.options.classPrefix != '')
					this.showUpImage();
				else
					this.showMainImage();
			}
			e.stop();
		}.bind(this));
		
		
		this.triggerObj.addEvent('click', function(e){
			e = new Event(e);
			this.show();
			e.stop();
		}.bind(this));
	},
	showRolloverImage: function() {
		if(this.options.classPrefix)
			this.updateClasses('_ro');
		else
			this.triggerObj.setProperty('src', this.options.rolloverImgURL);
	},
	showMainImage: function() {
		if(this.options.classPrefix)
			this.updateClasses('');
		else
			this.triggerObj.setProperty('src', this.options.mainImgURL);
	},
	showUpImage: function() {
		if(this.options.classPrefix)
			this.updateClasses('_up');
		else
			this.triggerObj.setProperty('src', this.options.upImgURL);
	},
	showDownImage: function() {
		if(this.options.classPrefix)
			this.updateClasses('_down');
		else
			this.triggerObj.setProperty('src', this.options.downImgURL);
	},
	updateClasses: function(newClass) {
		for(var i = 0; i < this.classSuffixes.length; i++) {
			this.triggerObj.removeClass(this.options.classPrefix + this.classSuffixes[i]);
		}
		this.triggerObj.addClass(this.options.classPrefix + newClass);
	},
	show: function() {
		this.options.theGroup.hideAll(this);
		this.open = true;
		
		// Show rollover image
		if(this.options.downImgURL)
			this.showDownImage();
		else
			this.showRolloverImage();
		
		//this.theDiv.setStyle('zIndex', '1000');
		this.theDiv.setStyle('display', 'block');
		
		// If there's an onTabShow event, call it
		if(this.options.onTabShow)
			this.options.onTabShow();
	},
	hide: function(e) {
		// Only close if mouse is outside the div area
		this.theDiv.setStyle('display', 'none');
		
		// Reset tab rollover img
		if(this.options.upImgURL)
			this.showUpImage();
		else
			this.showMainImage();
		
		this.open = false;
	}
});
TabClass.implement(new Options, new Events);