/**
* home - used for draggin the car in the home page
* Copyright (c) 2008 urbanINFLUENCE. All rights reserved.
*/


/** -------------------------------------------------------------------
* TOP-LEVEL-VARIALBES
* Vars used in the home page interactions
* ------------------------------------------------------------------- */

var sliderControl;
var miles = 0;
var shownCaption = false;
var isSliderActivated = false;
var toggledCaptionHide = false;
var selected_state = null;
var MILEAGE_MAX = 100000;


/** -------------------------------------------------------------------
* MAP-METHODS
* Functions used for state selctions. Some of this code is old Lowpro logic
* which was needed for previous versions of Prototype. This can be refactored
* at a later date but is left this way for now
* ------------------------------------------------------------------- */

// onclick => (html_options[:onclick] ? "#{html_options[:onclick]}; " : "") + "#{function}; return false;"
	var MapAreaLink = Behavior.create({
		initialize : function(){
			this.area = null;
			this.caller = null;
			this.label = null;
		},
			onmouseover : function(e) { 
				this._setCaller(e);
				$(this.label).addClassName("mapHighlighted");
			},
			onmouseout : function(e) { 
				this._setCaller(e);
				$(this.label).removeClassName("mapHighlighted");
			},
			_setCaller :function(e) {
				this.caller = Event.element(e);
				if(this.caller.id.substr(0, 3) == "lbl") {
					this.label = this.caller;
					this.area = $(this.caller.id.substr(4));
				} else {
					this.area = this.caller;
					this.label = "lbl_" + this.caller.id;
				}
			}
	});

	Event.addBehavior({
		'area.maparea, #map label' : MapAreaLink()
	});

	/**
	* Intializes the area tags used in the state image map
	*/
	function initMapStateLinks() {
		var areaTags = $$('#map area.maparea');
		var labelTags = $$('#map label');
		areaTags.each(function(el, index) {
			$(el).observe('click', onMapAreaTagClick);
		});
		
		labelTags.each(function(el, index) {
			$(el).observe('click', onMapLabelTagClick);
		});
	}
	
	/**
	 * Click handler for user selecting state on map. Currently only used for US map as Canadian content is disabled
	 * @param		event		the prototype event object
	 */
	function onMapAreaTagClick(event) {
		var areaTag = $(event.target);
		var stateId = areaTag.readAttribute('id').replace('map_', '');		
		onStateClick(stateId);
	}
	
	function onMapLabelTagClick(event) {
		var labelTag = $(event.target);
		var stateId = labelTag.readAttribute('id').replace('lbl_map_', '');
		onStateClick(stateId);
	}
	
	/**
	 * Handles clicks from label or area tags and performs AJAX call to return the next page in the walkthrough
	 * @param	stateId
	 * 	the id of the state as it exists in the database
	 * @return JS
	 * 	a javascript command returned from the /en/home/get_mileage/[STATE_ID]
	 */
	function onStateClick(stateId) {
		if (!stateId) {
			alert('[home.js::onStateClick()]: State id is required.');
			return;
		}
		var url = "/en/home/get_mileage/" + stateId;
		new Ajax.Request(url, { evalJS: true });
	}
	


/** -------------------------------------------------------------------
* VEHICLE-SLIDER-METHODS
* Used for step 2 of the walkthrough map
* ------------------------------------------------------------------- */

	/**
	* Starts the slider control
*/
	function startDrag() {
		if(miles > 0) {
			sliderControl = new Control.Slider('car', 'track', {sliderValue: milesToPercent(miles)});
		} else {
			sliderControl = new Control.Slider('car', 'track');
		}
		sliderControl.options.onSlide = updateMileage;
	}

	/**
	* Updates the odometer
	* @param	value		a decimal percentage of mileage amount
*/
	function updateMileage(value) {
		if($('mileageCaptionBubble').style != "display") {
			toggledCaptionHide = true;
			$('mileageCaptionBubble').visualEffect("fade", {duration: 0.5, delay:0.2});
		}
		miles = roundMileage(percentToMiles(value));
		arr = miles.toString().split("").reverse();
		for(var i = 1; i <= 6; i++) {
			var id = "od" + parseInt(i);
			if(!arr[6-i]) {
				$(id).innerHTML = 0;
			} else {
				$(id).innerHTML = arr[6-i];			
			}
		}
	}

	/**
	* Returns a number of miles
	* @params	decimal
	*/ 
	function percentToMiles(decimal, base) {
		if (!base) var base = MILEAGE_MAX;
		return Math.round(decimal*base);
	}

	/**
	* Returns the mileage rounded to the nearest 1,000 miles
	* @param		miles			number of miles
	* @returns	Integer		rounded approximate mileage
*/
	function roundMileage(miles) {
		rounded = Math.round(miles/1000);
		return rounded * 1000;
	}

	/**
	* Returns a decimal number of miles
	* @params miles
*/
	function milesToPercent(miles, base) {
		if(!base) var base = MILEAGE_MAX;
		return (miles/base);
	}

	/**
	* Resposible for transitioning screens in the walkthrough
	* @param		from_id		The id of the div which is being transitioned out
	* @param		to_id			The id of the div which is being transitioned in
	* @param		onFinish	function to be executed upon completion
*/
	function transition(from_id, to_id, onFinish) {
		$(from_id).visualEffect("fade", {duration:0.25});
		$(to_id).visualEffect("appear", {duration: 0.25, delay: 0.25, afterFinish : eval(onFinish)});
	}

	/**
	* Special instructions for mileage slide
*/
	function initMileageSlide() {
		if(!shownCaption) {
			shownCaption = true;
			$('mileageCaptionBubble').visualEffect("appear", {duration: 0.35, delay: 0.75});
		} else $('mileageCaptionBubble').hide();
	
		if(!isSliderActivated) {
			isSliderActivated = true;
			startDrag();
		}
	}

	function resetMileageCounter() {
		$('od1').innerHTML = $('od2').innerHTML = $('od3').innerHTML = $('od4').innerHTML = $('od5').innerHTML = $('od6').innerHTML = 0;
	}


/** -------------------------------------------------------------------
* VEHICLE-SELECT-METHODS
* Used for step 3 of the walkthrough map
* ------------------------------------------------------------------- */

	function walkthroughMakeSelected() {
    if ($('walk_make_id').value == "") return false ;
    var index = $('walk_make_id').selectedIndex;
    $('walk_model_id').update();
    var options = $('walk_model_id').options;
    options.length = 1;
    makes[index-1][2].each(function(vehicle) {
    	options[options.length] = new Option(vehicle[1], vehicle[0]);
    });
	}

	// Event.addBehavior({
	//     'select#walk_make_id': DynamicSelect(function(h) { walkthroughMakeSelected(h); } )
	// });

	/**
	* Validate the user input on the last slide for vehicle data
	* @return		Array 	fields containing errors
	*/
	function hasErrors() {
    var errorFields = new Array();
    var selectBoxes = new Array('walk_year', 'walk_make_id', 'walk_model_id');
    var frm = $('form_walk_find_vehicle');	
    selectBoxes.each(function(item, index) {
    	var fld = $(selectBoxes[index]);
    	if(fld.value == '') errorFields.push(fld);
    });
    return (errorFields.length == 0) ? false : errorFields;
	}

	function update_form_search() {
    //$('walk_country_id').value = selected_country;
    $('walk_state_id').value = selected_state;
    $('walk_mileage').value = miles;
	}

	/**
	* Responsible for collecting input variables and posting to a plan search
	*/
	function submitWalkthrough() {
    var errorFields = hasErrors();
    if (!errorFields) {
    	// Construct the request variables
    	var form = $('form_walk_find_vehicle');
    	form.submit();
    } else {
    	errorFields.each(function(item, index) {
    		new Effect.Highlight($(item), {startcolor : '#990000', duration: 0.5});
    	});
    }
	}

/** -------------------------------------------------------------------
* HELPER-METHODS
* Utility functions used between steps
* ------------------------------------------------------------------- */

	function initWalkthroughElements() {
		$('form_walk_find_vehicle').reset();
	}

	/**
	 * Assigns click behavior to forward/previous navigation used to transition between screens in the walkthrough slides
	 */
	function initJSNavLinks() {
		
		$('step1_mileage').observe('click', function() {
			transition('map', 'mileage', 'initMileageSlide');
		});
		
		$('step1_vehicle').observe('click', function() {
			transition('map', 'vehicleScreen');
		});
		
		$('step2_location').observe('click', function() {
			transition('mileage', 'map');
		});		
		
		$('step2_mileage').observe('click', function() {
			transition('mileage', 'mileage');
		});
		
		$('step2_vehicle').observe('click', function() {
			transition('mileage', 'vehicleScreen', 'update_form_search');
		});
		
		$('step2_previous').observe('click', function() {
			transition('mileage', 'map');
		});
		
		$('step2_next').observe('click', function() {
			transition('mileage', 'vehicleScreen', 'update_form_search');
		});
		
		$('walk_make_id').observe('click', function() {
			walkthroughMakeSelected();
		});
		
		$('step3_location').observe('click', function() {
			transition('vehicleScreen', 'map');
		});		
		
		$('step3_mileage').observe('click', function() {
			transition('vehicleScreen', 'mileage', 'initMileageSlide');
		});
		
		$('step3_previous').observe('click', function() {
			transition('vehicleScreen', 'mileage');
		});
		
		$('step3_submit').observe('click', function() {
			update_form_search();
			submitWalkthrough();
		});
		
		
	}



/** -------------------------------------------------------------------
* MAIN-INITIALIZERS
* Top-level functions assigning behavior
* ------------------------------------------------------------------- */

document.observe("dom:loaded", function() {
	initJSNavLinks();
	initMapStateLinks();
	initWalkthroughElements();
});