// ############################################################################
// model_redux.js -- model layout and actions
// ============================================================================
// CREATED BY:	Zander Waldman -- zwaldman@organic.com
//				Organic Det
//
// CREATED ON: 04/29/2008
// ############################################################################
var modelList;
var currentID = 0;
var currentModel;
var currentTrim;
var currentView = "exterior";
var modelArray = new Array();
cur_section = "cabs_trims";


// ======================================================
// model_init() - inital call to start things
// ======================================================
function model_init() {
	
	// lay out the model list
	setupModels();
	
	// set the current model id
	setCurrentModel(0);
	
	// resize the div
	//resize();
	
	
	// check deep link and delay long enough to let page settle
	// also fades first model in
	// this method also handles the initial page mlc if not deep linked
	checkDeepLink.delay(1000);
	
	
	
}

// ======================================================
// setupModels() - lay out the models in rotation
// ======================================================
function setupModels() {
	
	// get the list of models
	modelList = $$('#model_list .model');
	var navList = $$("#model_nav_list li");
	
	// --------------------------------------------------
	// initialize models amd the nav list
	// --------------------------------------------------
	
	// set links and turn on the first trim details
	for(var i = 0; i < modelList.length; i++) {
		
		if(modelList[i]) {
			
			// set the id
			modelList[i].setProperty('id', i);
			navList[i].setProperty('id', i + "_thumbnail");
			
			navList[i].addEvent('click', function() {

				setModel(this.id.slice(0, this.id.lastIndexOf("_")));

			});
			
			navList[i].addEvent('mouseover', function() {

				this.addClass('over')

			});
			
			navList[i].addEvent('mouseout', function() {

				this.removeClass('over')

			});
			
			// create the simple class to keep track of state
			var modelName = $$('#' + i + ' .model_content')[0].getProperty('id');
			var trim = $$('#' + modelName + ' .trim_features_list')[0].getProperty('id');
			var view = 'exterior';
			var model = new Model(modelName, i, trim, view);
			modelArray.push(model);
			
			// get the list and initial picture and price
			var list = $$('#' + String(i) + ' .trim_features_list')[0];
			
			if(list) {
			
				list.setStyle('display', 'block');
				var asShown = $$('#' + String(i) + ' .as_shown')[0].getText();
				var startingAt = $$('#' + String(i) + ' .starting_at')[0].getText();
				//shownName is now used for image caption
				//var shownName = $$('#' + String(i) + ' .trim_name')[0].getText();
				var shownName = $$('#' + String(i) + ' .trim_image_caption')[0].getText();
				$$('#' + String(i) + ' .as_shown_price')[0].setText(asShown);
				$$('#' + String(i) + ' .starting_at_price')[0].setText(startingAt);
				$$('#' + String(i) + ' .shown_name')[0].setText(shownName);
			
			}
			
			// turn the inital tab on
			var tab = $$('#' + String(i) + ' .trim_list li')[0].addClass('selected');

		}
	}
	
	
}

// ======================================================
// setModel -
// ======================================================
function setModel(id) {
	
	if(id != currentID) {
		
		// turn the exterior back
		//switchView('exterior', true);
			
		// fade out the details
		fadeDetails(currentID, 0)
		
		// set the thumb selected
		$(currentID + "_thumbnail").removeClass('selected');
		
		//remove any visibility on pricing divs to avoid hover conflicts
		$$('#' + String(currentID) + ' .starting_at_text').each(function(item, index) {
			item.setStyle('visibility', 'hidden');
		});
		$$('#' + String(currentID) + ' .starting_at_price').each(function(item, index) {
			item.setStyle('visibility', 'hidden');
		});
		
		// set the currentID
		currentID = id;
		setCurrentModel(id);
		
		togglePriceView();
		
		linkTrack('models_nav', modelArray[currentID].modelName);
		pageTrack(modelArray[currentID].currentTrim + "/" + modelArray[currentID].currentView, modelArray[currentID].currentTrim + "/" + modelArray[currentID].currentView);
		
		// fade in the new details
		fadeDetails(currentID, 1);	
		
	}
	
}

// ======================================================
// fadeDetails() - fade the details in
// ======================================================
function fadeDetails(id, type) {
	
	var details = $$('#' + id)[0];
	
	var animate = new Fx.Style(details, 'opacity', {
		
		duration: 500,
		wait: false
			
	});
	
	animate.start(0,type);
	
}

// ======================================================
// resize() -
// ======================================================
function resize() {

	var modelWrapper = $('model_wrapper');
	
	var animate = new Fx.Style(modelWrapper, 'height', {
		
		duration: 1000,
		wait: false
			
	});
		
	animate.start(modelWrapper.getStyle('height').toInt(), 600);
	
}

// ======================================================
// checkDeepLink() -
// ======================================================
function checkDeepLink() {
	
	// if model
	if(getParameter('model')) {
		
		model = getParameter('model');
		
		// if the ids are the same we do not do the fades
		if(currentID != $(model).getParent().getProperty('id')) {
			
			// fade out the details
			fadeDetails(currentID, 0)
			
		}
		
		// set the thumb selected
		$(currentID + "_thumbnail").removeClass('selected');
			
		// set the currentID
		currentID = $(model).getParent().getProperty('id');
		setCurrentModel($(model).getParent().getProperty('id'));
		
		// fade in the new details
		fadeDetails(currentID, 1);
		
		if(getParameter('trim')) {
			
			trim = getParameter('trim');
			
			selectTrim(trim);
			
			if(getParameter('view') == 'interior') {
				
				var myFunc = function() {
					switchView('interior');
				}
				
				myFunc.delay(500);
				
			} 				
		
			
		} else {
			
				
			pageTrack(modelArray[currentID].currentTrim + "/" + modelArray[currentID].currentView, modelArray[currentID].currentTrim + "/" + modelArray[currentID].currentView);
			
			
		}
	} else {
		
		pageTrack(modelArray[currentID].currentTrim + "/" + modelArray[currentID].currentView, modelArray[currentID].currentTrim + "/" + modelArray[currentID].currentView);
		// fade all in
		fadeIn();
	}
	
	


	
}

// ======================================================
// fadeIn() - fade the page contents in
// ======================================================
function fadeIn() {
	
	var wrapper = $('model_list');		
		
	var animate = new Fx.Style(wrapper, 'opacity', {
		
		duration: 1500,
		wait: false
			
	});
		
	animate.start(0,1);
	
	// fade initial details in
	var details = $$('#0')[0];
	
	var animate = new Fx.Style(details, 'opacity', {
		
		duration: 1000,
		wait: false
			
	});
		
	animate.start(0,1);
	
}

// ======================================================
// selectTrim(id) -
// ======================================================
function selectTrim(id) {
	if(modelArray[currentID].currentTrim) {
		// turn the previous tab off
		$(modelArray[currentID].currentTrim + "_tab").removeClass('selected');
	}
	
	// set the new currentTrim
	currentTrim = currentModel + "_" + id;
	
	// turn the tab on
	$(currentTrim + "_tab").addClass('selected');
	
	var imageType;
	
	// check the view
	modelArray[currentID].currentView == 'exterior' ? imageType = ' .trim_image' : imageType = ' .interior_image';
	
	// change the image
	var newImage = $$('#' + currentTrim + imageType)[0].getText();
	$$('#' + String(currentID) + ' .model_image')[0].setProperty('src', newImage);
	
	//change the image caption
	var newImageCaption = $$('#' + currentTrim + imageType + "_caption")[0].getText();
	$$('#' + String(currentID) + ' .shown_name')[0].setText(newImageCaption);
	
	// setPricing
	setPricing();
	
	// turn all off
	var lists = $$('#' + String(currentID) + ' .trim_features_list');
	
	for(var i = 0; i < lists.length; i++) {
		
		lists.setStyle('display', 'none');

	}
	
	// turn it on
	$(currentTrim).setStyle('display', 'block');
	
	
	modelArray[currentID].currentTrim = currentTrim;
	
	// set var for trilogy
	set_cur_model_trim(currentID);
	
	pageTrack(modelArray[currentID].currentTrim + "/" + modelArray[currentID].currentView, modelArray[currentID].currentTrim + "/" + modelArray[currentID].currentView);

	
}

// ======================================================
// rollTab(id) -
// ======================================================
function rollTab(id) {

	if($(currentModel + "_" + id + "_tab")) {
		// roll the tab on
		$(currentModel + "_" + id + "_tab").addClass('over');
	}
	
}

// ======================================================
// rollTab(id) -
// ======================================================
function rollTabOut(id) {
	
	if($(currentModel + "_" + id + "_tab")) {
		// roll the tab on
		$(currentModel + "_" + id + "_tab").removeClass('over');
	}
	
}

// ======================================================
// togglePriceView(view) -
// ======================================================
function togglePriceView() {
		
		switch(modelArray[currentID].currentView) {
			
			case "exterior":
				$$('#' + String(currentID) + ' p span').each(function(item, index) {
					item.setStyle('visibility', 'visible');
				});
				$$('#' + String(currentID) + ' .starting_at_text').each(function(item, index) {
					item.setStyle('visibility', 'visible');
				});
				$$('#' + String(currentID) + ' .starting_at_price').each(function(item, index) {
					item.setStyle('visibility', 'visible');
				});
				$$('#' + String(currentID) + ' .exterior_interior_button')[0].addClass('selected');
				$$('#' + String(currentID) + ' .exterior_interior_button')[1].removeClass('selected');
				break;
			case "interior":
				$$('#' + String(currentID) + ' p span').each(function(item, index) {
					item.setStyle('visibility', 'hidden');
				});
				$$('#' + String(currentID) + ' .starting_at_text').each(function(item, index) {
					item.setStyle('visibility', 'hidden');
				});
				$$('#' + String(currentID) + ' .starting_at_price').each(function(item, index) {
					item.setStyle('visibility', 'hidden');
				});
				$$('#' + String(currentID) + ' .exterior_interior_button')[0].removeClass('selected');
				$$('#' + String(currentID) + ' .exterior_interior_button')[1].addClass('selected');
				break;
			default:
				break;
			
		}
	
}


// ======================================================
// switchView(view) -
// ======================================================
function switchView(view, suspendTrack) {
	
	if(view != modelArray[currentID].currentView) {
		
		switch(view) {
			
			case "exterior":
				var imageType = ' .trim_image';
				$$('#' + String(currentID) + ' p span').each(function(item, index) {
					item.setStyle('visibility', 'visible');
				});
				$$('#' + String(currentID) + ' .starting_at_text').each(function(item, index) {
					item.setStyle('visibility', 'visible');
				});
				$$('#' + String(currentID) + ' .starting_at_price').each(function(item, index) {
					item.setStyle('visibility', 'visible');
				});
				$$('#' + String(currentID) + ' .exterior_interior_button')[0].addClass('selected');
				$$('#' + String(currentID) + ' .exterior_interior_button')[1].removeClass('selected');
				var newImageCaption = $$('#' + String(currentTrim) + imageType + "_caption")[0].getText();
				$$('#' + String(currentID) + ' .shown_name')[0].setText(newImageCaption);
				break;
			case "interior":
				var imageType = ' .interior_image';
				$$('#' + String(currentID) + ' p span').each(function(item, index) {
					item.setStyle('visibility', 'hidden');
				});
				$$('#' + String(currentID) + ' .starting_at_text').each(function(item, index) {
					item.setStyle('visibility', 'hidden');
				});
				$$('#' + String(currentID) + ' .starting_at_price').each(function(item, index) {
					item.setStyle('visibility', 'hidden');
				});
				$$('#' + String(currentID) + ' .exterior_interior_button')[0].removeClass('selected');
				$$('#' + String(currentID) + ' .exterior_interior_button')[1].addClass('selected');
				var newImageCaption = $$('#' + String(currentTrim) + imageType + "_caption")[0].getText();
				$$('#' + String(currentID) + ' .shown_name')[0].setText(newImageCaption);
				break;
			default:
				break;
			
		}
		
		//var newImage = $$('#' + modelArray[currentID].currentTrim + imageType)[0].getText();
	
		//$$('#' + String(currentID) + ' .model_image')[0].setProperty('src', newImage);
		
		// loop and change all to the interior
		for(var i = 0; i < modelArray.length; i++) {
			var newImage = $$('#' + modelArray[i].currentTrim + imageType)[0].getText();
			$$('#' + String(i) + ' .model_image')[0].setProperty('src', newImage);
		}

		
		modelArray[currentID].currentView = view;
		currentView = view;
		
		if(!suspendTrack) {
			pageTrack(modelArray[currentID].currentTrim + "/" + modelArray[currentID].currentView, modelArray[currentID].currentTrim + "/" + modelArray[currentID].currentView);
		}
		
	}
	
	
}

// ======================================================
// setCurrentModel(id) -
// ======================================================
function setCurrentModel(id) {
	
	modelArray[id].currentView = currentView;
	
	currentModel = $$('#' + id + ' .model_content')[0].getProperty('id');
	
	// set the thumb selected
	$(id + "_thumbnail").addClass('selected');
	
	set_cur_model_trim(id);
	
	
}
// ======================================================
// set_cur_model_trim(id) -
// ======================================================
function set_cur_model_trim(id) {
	
	cur_model_trim = modelArray[id].currentTrim;
	currentTrim = cur_model_trim;
}

// ======================================================
// setPricing() -
// ======================================================
function setPricing() {
	
	// change the pricing
	var asShown = $$('#' + currentTrim + ' .as_shown')[0].getText();
	var startingAt = $$('#' + currentTrim + ' .starting_at')[0].getText();
	var shownName = $$('#' + currentTrim + ' .trim_name')[0].getText();
	
	$$('#' + String(currentID) + ' .as_shown_price')[0].setText(asShown);
	$$('#' + String(currentID) + ' .starting_at_price')[0].setText(startingAt);
	//shown name now used for image caption (set in selectTrim
	//$$('#' + String(currentID) + ' .shown_name')[0].setText('*' + shownName + ' model shown');
	
}

// ======================================================
// Model Class Declaration
// ======================================================
var Model = new Class({
	
	initialize: function(modelName, id, trim, view) {
		this.modelName = modelName;
		this.id = id;
		this.currentTrim = trim;
		this.currentView = view;
	}
	
})

/*// ======================================================
// showFeature(element) -
// ======================================================
function showFeature(element) {
	
	element = $$("#" + currentID + " ." + element)[0];
	
	linkTrack('content', element.getText());
	$('rollover_image').setProperty('src', element.getParent().getNext().getNext().getText())
	$('rollover_title').setText(element.getText());
	$('rollover_description').setText(element.getParent().getNext().getText());
	$('rollover_box').setStyle('display', 'block');

}

// ======================================================
// hideFeature() -
// ======================================================
function hideFeature() {
	
	$('rollover_box').setStyle('display', 'none');

	
}*/