/************************************************************
	Title: 	Dashboard Tabs JS
	Author:	AgencyNet
	Date: 	Aug 08
	Desc:		Allows for tabbed navigation.  Custom rollover effects
		applied for the beaches poject.
	
	Requires:
		mootools V 1.1

************************************************************/

var DashBoardTabs = new Class({ 
	options: {
		activeButtonNum : null,
		buttons					: [],
		contents				: []
	},
//~~~~~~~~~~~~~~~~~~~~~~>>>>>><<<<<<~~~~~~~~~~~~~~~~~~~~~~//
	initialize: function(){
		this.setTopUserInfo();
		this.startUpTabs();
		this.setupSubmitTip();
	},
//~~~~~~~~~~~~~~~~~~~~~~>>>>>><<<<<<~~~~~~~~~~~~~~~~~~~~~~//	
	setTopUserInfo: function(){
		this.userName = $('userName');
		this.userGender = $('userGender');
		this.familySize = $('userFamilyCount');
		this.userLocation = $('userLocation');
		//parse user profile info
		var userProfile = unescape(commenter_name);
		var userProfileValues = userProfile.split('|');
		//set values to top of dashboard
		this.userName.setHTML(userProfileValues[0]);
		this.userGender.addClass('gender_'+userProfileValues[1]);
		if(userProfileValues[2] == "8+"){
			userProfileValues[2] = "8";
		}
		this.familySize.addClass('family_'+userProfileValues[2]);
		this.userLocation.setHTML('From: '+userProfileValues[3]);
	},
//~~~~~~~~~~~~~~~~~~~~~~>>>>>><<<<<<~~~~~~~~~~~~~~~~~~~~~~//
	setupSubmitTip: function() {
		//get the 3 catgory buttons (radio buttons)
		this.catButPlanAhead = $('submitPlanAhead');
		this.catButTheVacation = $('submitTheVacation');
		this.catButGettingBack = $('submitGettingBack');
		this.catButtonsAll = [this.catButPlanAhead, this.catButTheVacation, this.catButGettingBack];
		//get 3 category contents
		this.categoryPlanAhead = $('plan_aheadTags');
		this.categoryTheVacation = $('the_vacationTags');
		this.categoryGettingBack = $('getting_backTags');
		this.categoryContentsAll = [this.categoryPlanAhead, this.categoryTheVacation, this.categoryGettingBack];
		//hide/display necessary contents
		this.hideAllTagContainers();
		this.categoryPlanAhead.setStyle('display','block');
		//addEvents to all buttons
		this.catButtonsAll.each(function(el,i){
								
			this.addEventsToCatButtons(el, i);																	
		}.bind(this));
				
		//only take first five tags??
		
		
	},
//~~~~~~~~~~~~~~~~~~~~~~>>>>>><<<<<<~~~~~~~~~~~~~~~~~~~~~~//
	addTagsToHiddenField: function(){
		alert('hell');
	},
//~~~~~~~~~~~~~~~~~~~~~~>>>>>><<<<<<~~~~~~~~~~~~~~~~~~~~~~//
	addEventsToCatButtons: function(el, i){
		//addEvents to the category buttons
		el.addEvent('click', function(){
			//on each click .. should clear all checkboxes
			if(i == 0) {
				this.categoryPlanAhead.setStyle('display','block');
				this.categoryTheVacation.setStyle('display','none');
				this.categoryGettingBack.setStyle('display','none');
			}
			if(i == 1){
				this.categoryPlanAhead.setStyle('display','none');
				this.categoryTheVacation.setStyle('display','block');
				this.categoryGettingBack.setStyle('display','none');
			}
			if(i == 2){
				this.categoryPlanAhead.setStyle('display','none');
				this.categoryTheVacation.setStyle('display','none');
				this.categoryGettingBack.setStyle('display','block');
			}
			//clear all checkboxes
			setAllCheckBoxes('comments_form', 'tag_data', false);
		}.bind(this));
	},
//~~~~~~~~~~~~~~~~~~~~~~>>>>>><<<<<<~~~~~~~~~~~~~~~~~~~~~~//
	hideAllTagContainers: function(){
		this.categoryContentsAll.each(function(el, i) {
			el.setStyle('display','none');																		 
		}.bind(this));
	},
//~~~~~~~~~~~~~~~~~~~~~~>>>>>><<<<<<~~~~~~~~~~~~~~~~~~~~~~//	
	favsAJAXCall: function() {
		getClipps(commenter_id);
	},
//~~~~~~~~~~~~~~~~~~~~~~>>>>>><<<<<<~~~~~~~~~~~~~~~~~~~~~~//
	startUpTabs: function() {
	//Buttons
		this.submitTip = $('submitTip');
	//	this.myTips = $('myTips');
		this.myFavs = $('myFavs');
	//	this.modifyProfile = $('updateAccount'); 
		//this.options.buttons=[this.submitTip, this.myTips, this.myFavs, this.modifyProfile];
		this.options.buttons=[this.submitTip, this.myFavs];
		
		//Content Divs
		this.dashSubmitTip = $('dashSubmitTip');
		//this.dashMyTips = $('dashMyTips');
		this.dashMyFavs = $('dashMyFavs');
		//this.dashModProfile = $('dashModProfile');
		//this.options.contents=[this.dashSubmitTip, this.dashMyTips, this.dashMyFavs, this.dashModProfile];
		this.options.contents=[this.dashSubmitTip, this.dashMyFavs];
		
		//set activeButtonNum
		this.options.activeButtonNum = 0;
		
		//decide what content to show/acive button
		this.setDashboard();
						
		//set up all buttons with hover states/active states.
		this.options.buttons.each(function(el, i){
			el.effect = new Fx.Style(el, 'background-color', {wait:false, duration: 400});
			this.addButtonEvents(el,i);																	 
		}.bind(this));
	},
//~~~~~~~~~~~~~~~~~~~~~~>>>>>><<<<<<~~~~~~~~~~~~~~~~~~~~~~//	
	hideAllContent: function(){
		this.options.contents.each(function(el,i){
			el.setStyle('display','none');																
		}.bind(this));
	},
//~~~~~~~~~~~~~~~~~~~~~~>>>>>><<<<<<~~~~~~~~~~~~~~~~~~~~~~//	
	setDashboard: function(){
		this.hideAllContent();
		
		//decide if there is an anchor in url
		var locationObj = window.location;         //gets URL
		var locationObj = locationObj.toString();  //sets URL to string
		
		// check if strings are anywhere in the URL
		if(locationObj.test("submitTip")) {
			this.setDashButtonsContent(0);
		//}	else if(locationObj.test("myTip")) {
			//this.setDashButtonsContent(1);
		}	else if(locationObj.test("myFavs")) {
			var monkey = new MyFavorites();
			this.setDashButtonsContent(1);
		} //else if(locationObj.test("modifyProfile")) {
			//this.setDashButtonsContent(2); } 
		else {
			this.setDashButtonsContent(0);
		}

	},
//~~~~~~~~~~~~~~~~~~~~~~>>>>>><<<<<<~~~~~~~~~~~~~~~~~~~~~~//	
	setDashButtonsContent: function(number) {
		this.options.activeButtonNum = number;
		this.options.buttons[number].removeClass('inactive');
		this.options.buttons[number].addClass('active');
		this.options.contents[number].setStyle('display', 'block');
	},
//~~~~~~~~~~~~~~~~~~~~~~>>>>>><<<<<<~~~~~~~~~~~~~~~~~~~~~~//
	addButtonEvents: function(button, number){
		
		button.addEvent('click', function(){
			if(button.hasClass('inactive')) {
				button.removeClass('inactive');
				button.addClass('active');
				
				this.options.buttons[this.options.activeButtonNum].setStyle('background-color', '#D9CDC0');
				this.options.buttons[this.options.activeButtonNum].removeClass('active');
				this.options.buttons[this.options.activeButtonNum].addClass('inactive');
				
				this.options.activeButtonNum = number;
				this.hideAllContent();
				this.options.contents[number].setStyle('display','block');
				
				//Special case for myFavs
				if(number == 1)
					var monkey = new MyFavorites();
				}
		}.bind(this));
		
		button.addEvent('mouseover', function(){
			if(button.hasClass('inactive'))
				//button.effect.start('#F7F1E8');
				button.setStyle('background-color', '#F7F1E8');
		}.bind(this));																					
		
		button.addEvent('mouseout', function(){ 
			if(button.hasClass('inactive'))	
				//button.effect.start('#D9CDC0');
				button.setStyle('background-color', '#D9CDC0'); 													
		}.bind(this));
	}
});

DashBoardTabs.implement(new Options);
DashBoardTabs.implement(new Events);


//Just for reference
//window.onDomReady(DashBoardTabs.initialize.bind(DashBoardTabs));