// Note: all images are put in a specific filepath dependant on the mode & item selected. We use .htaccess to set 404 files for the individual folders
// This allows us to set "default" fallback images without complicated javascript

//Mootools is used throughout.



//All room data is passed in from the calling page.

if ( rooms != '' && indexes != ''){

	var currentId = 0;
	var mode = 'picture';
	var item = 'object1';
	var unit = 'imperial';
	var overwrite = 0;
	var itemUnit = null;
	var action = 'space';
	var showAll = 0;
	var roomCount = indexes.length;

function nextRoom(){ //next button clicked

	var id = currentId + 1;
	
	//if there is another to go to
	if(id < roomCount) {

		updateRoomByID(id);

	}

}

function updateActiveRoomSize(size){

	var myRequest = new Request({method: 'get', url: '/ajax/process/class/Application_Models_UserData/method/setRoomData/arg0/' + store + '/arg1/' + size});
		myRequest.send();

}

function setUnit(){

	if(unit=='metric'){

		unit = 'imperial';

		var myRequest = new Request({method: 'get', url: '/ajax/process/class/Application_Models_UserData/method/saveVar/arg0/unit/arg1/imperial'});
		myRequest.send();

		$('convert').innerHTML = 'Convert to metric';

	}else {

		unit = 'metric';

		var myRequest = new Request({method: 'get', url: '/ajax/process/class/Application_Models_UserData/method/saveVar/arg0/unit/arg1/metric'});
		myRequest.send();

		$('convert').innerHTML = 'Convert to imperial';

	}

	updateRoomByID(currentId);
}

function previousRoom(){

	var id = currentId - 1;

	if ( currentId > 0 ){//if the user has not reached the end


			updateRoomByID(id);



	}

}

function updateRoomByID(id){
	
	var theRoom = indexes[id];

	if(action == 'space'){

		updateRoom(theRoom);

	} else {

		updateEstimate(theRoom);
	}


}

function getNearest(size){	
	
	var difference = size;
	var closest = 0;

		if(size == 0){

			closest = indexes[0];

		} else {

			indexes.each(function(item , index){

				var subDifference = Math.abs(size - item);

				if(difference > subDifference){

					difference = subDifference;
					closest = item;

				}

			});
		}

		//updateRoom(closest);

		if(action == 'space'){

			updateRoom(closest);

		} else {

			updateEstimate(closest);
		}

}

function updateRoom (size) {
	
	var id = indexes.indexOf(size);
	
	//check if room size is avail, if not, find the nearest roomsize
	if(id == -1){

		getNearest(size);

	} else {

		currentId = id;
		
		updateButtons(currentId); //enable and disable next & prev buttons as needed
		
		var theRoom = rooms[size];
		
		if ($('roomSize') != null) 		{ $('roomSize').value		= size;}
		if ($('room_select') != null) 	{ $('room_select').value	= size;}
		
		// Title		
		var display_name	= theRoom['display_name'];
		if (display_name == null) {
			if (unit == 'metric') 	{ display_name = toMetersSq(theRoom['size']) + ' sq m';} 
			else 					{ display_name = theRoom['size'] + ' sq ft';}
		}
		if ($('name') != null) { $('name').innerHTML = display_name;}
		
		var display_size	= theRoom['size'] + ' sq ft';
		if ($('room_size') != null) { $('room_size').innerHTML = display_size;}		
		
		var display_title	= 'block';
		if (theRoom['hide_title'] == true){ display_title = 'none';}
		if ($('room_title') != null) { $('room_title').style.display = display_title;}
		
		// Dimensions
		var room_height = theRoom['height'];
		var room_width 	= theRoom['width'];
		var room_depth 	= theRoom['depth'];
		
		if (unit == 'metric') {
			room_height	= toMeters(room_height) + ' m';
			room_width	= toMeters(room_width) + ' m';
			room_depth	= toMeters(room_depth) + ' m';
			
		} else {
			room_height	= room_height + ' ft';
			room_width	= room_width + ' ft';
			room_depth	= room_depth + ' ft';	
		}
		
		if ($('height') != null)	{ $('height').innerHTML	= room_height;}
		if ($('width') != null)		{ $('width').innerHTML	= room_width;}
		if ($('depth') != null)		{ $('depth').innerHTML	= room_depth;}
		
		if(theRoom['hide_dimensions'] == true){
			if ($('dimensions') != null)	{ $('dimensions').style.display 	= 'none';}
			if ($('convert') != null)		{ $('convert').style.display 		= 'none';}
			
		}else{
			if ($('dimensions') != null)	{ $('dimensions').style.display 	= 'block';}
			if ($('convert') != null)		{ $('convert').style.display 		= 'inline';}
		}
		
		// Description Details 
		if ($('desc') != null) { $('desc').innerHTML = theRoom['desc'];}
		
		var display_description	= 'block';
		if (theRoom['hide_description'] == true){ display_description = 'none';}
		if ($('room_description') != null) { $('room_description').style.display = display_description;}
		
		if ($('deal') != null) { $('deal').innerHTML = theRoom['fromPrice'];}
		
		// Image Options
		if ($('option1') != null) {
			for (i=1; i<=3; i++) {
				
				if (theRoom['option'+i] != ''){
					
					$('option'+i).style.display = 'inline';
					$('object'+i).innerHTML = theRoom['option'+i];
					
				} else {
					$('option'+i).style.display = 'none';
					$('object'+i).innerHTML = '';
				}
			}
		}

		if (theRoom['default'] == 'wine') {
			
			item = 'wine';
			
			if ($('3d') != null) 			{ $('3d').style.display 			= 'none';}
			if ($('image_options') != null)	{ $('image_options').style.display	= 'none';}
			if ($('todaysDeal') != null)	{ $('todaysDeal').style.display		= 'none';}
			
		} else {
			
			//check if the user has specifically set an item
			if (overwrite == 0) { // no item has been set, use the defaults

				item = theRoom['default'];
				itemUnit = theRoom[item];

				if ($(item) != null) { $(item).checked = 'checked';}


			} else if ((theRoom[item] != itemUnit && overwrite == 1)){//item has been set but is no longer avail on the product
				
				item = theRoom['default'];
				itemUnit = theRoom[item];
				
				if ($(item) != null) { $(item).checked = 'checked';}
				
				overwrite = 0;

			} else if (overwrite == 2){//user has just set the item
				
				itemUnit = theRoom[item];
				overwrite = 1;
			}
		}
		
		if ($('roomNumber') != null) { $('roomNumber').innerHTML = parseInt(id + 1);}

		if (mode == 'picture') { //if in picture mode, display picture, else display 3d box builder
			
			if (item == 'option1') { //find which picture to display
				
				$('image').src = '/assets/images/estimator/rooms/option1/' + theRoom['imagename'] + '.jpg';
				
			} else if(item == 'option2') {
				
				$('image').src = '/assets/images/estimator/rooms/option2/' + theRoom['imagename'] + '.jpg';
				
			} else if (item == 'option3') {
				
				$('image').src = '/assets/images/estimator/rooms/option3/' + theRoom['imagename'] + '.jpg';
				
			} else if (item == 'wine') {
				
				$('image').src = '/assets/images/estimator/rooms/wine/' + theRoom['imagename'] + '.jpg';
			}

		} else {

			$('image').src = '/assets/images/estimator/3d/' + theRoom['imagename'] + '.jpg';

		}
		
		var room_features = '';
		var featuresLength = theRoom['features'].length;
		var indicator = 1;

		for( var i = 0; i < featuresLength; i++ ){

			if(indicator == 1){

				room_features += '<li class="col1">'+ theRoom['features'][i] +'</li>';

				indicator = 0;

			}else{

				room_features += '<li class="col2">'+ theRoom['features'][i] +'</li>';

				indicator = 1;

			}

		}
		
		if(showAll == 0){

			window.addEvent('domready', function() {

			$('body').getElements('.dealItem').each(

			function( item, ind ){

				item.style.display = 'none';
			}

			);

			var num = 0;

			for(var i = (currentId+1); i < ((currentId+1) + 5);i++){

				if(indexes[i] != null && $('room_' + indexes[i]) != null){

					$('room_' + indexes[i]).style.display = 'block';

					num ++;
				}

			}

			});

		}
		
		if ($('room_features') != null) { 
			$('room_features').innerHTML = '<ul class="features tick">' + room_features + '</ul>';
		}
		
		// special code to change submit button in order to redirect users to request a quote page for larger room sizes
		if($('nextButton') != null){
			
			var IE = /*@cc_on!@*/false; // Check to see if Browser is IE
			var submit_value = "";
			
			if ((size > 149) || (size == 'WS')) {
				// Show the Large Room Notification text - currently disabled
				//if ($('largeRoomCopy') != null) { $('largeRoomCopy').setStyle('display', 'block');}
				
				switch ($('estimateMode').get('value')) {
				
					case 'estimate': 	submit_value = 'Request a quote';	break;
					case 'quote':		submit_value = 'Request a quote'; 	break;
					case 'reserve':		submit_value = 'Request a quote'; 	break;
					case 'mobile':		submit_value = 'Next'; 		    	break;
				}
				
			} else {
				// Hide the Large Room Notification text
				if ($('largeRoomCopy') != null) { $('largeRoomCopy').setStyle('display', 'none');} 
				
				switch ($('estimateMode').get('value')) {
					
					case 'estimate': 	submit_value = 'Get rough cost';	break;
					case 'quote':		submit_value = 'Get a quote'; 		break;
					case 'reserve':		submit_value = 'Find offers'; 		break;
					case 'mobile':		submit_value = 'Next'; 		    	break;
				}
			}
			
			// Update the Element Details
			$('nextButton').childNodes[0].innerHTML = submit_value;
			if (!IE) { $('nextButton').value = submit_value;}
		}
		
	}

}


function updateEstimate(size){

	var showPriceRange = true;
	
	if ((size > 149) || (size == 'WS')) {

		showPriceRange = false;

		$('onlineQuoteLinkCopy').set('html', 'Click the button below to request an accurate quote.');
		$('onlineQuoteLinkButton').set('href', '/requestroomquote/index/roomSize/' + size + '/store/' + store);
		$$('#onlineQuoteLinkButton span').set('html','Request quote');
		$$('#onlineQuoteLinkButton span').setStyle('padding-right', '37px');

		// insertion of additional copy block disabled at this time
		//var largeSpaceHtml = '<h3>Need large space?</h3>' +
		//					 '<p>Due to the large capacity of this room, we suggest that you contact one of our ' +
		//					 'storage experts on <span style="font-size:14px; font-weight:bold">' + storePhone + '</span> in order to establish your specific ' +
		//					 'requirements. Alternatively, you can request a quote by clicking on the red button</p>';
        //
		//
		//$('estimatePriceRange').set('style',$('estimatePriceRange').get('style') + ';background-color:white;border: 5px solid #FFFF4C;padding : 10px; width:230px;');
		//$('estimatePriceRange').innerHTML = largeSpaceHtml;


	}else{

		$('estimatePriceRange').innerHTML = initEstimatePriceRangeHtml;
		$('estimatePriceRange').set('style',initEstimatePriceRangeStyle);
		$('onlineQuoteLinkCopy').innerHTML =  initOnlineQuoteLinkHtml;
		$('onlineQuoteLinkButton').set('href',initOnlineQuoteLinkHref);
		$$('#onlineQuoteLinkButton span').set('html','Get an online quote');

	}


	var id = indexes.indexOf(size);
	//check if room size is avail, if not, find the nearest roomsize
	if(id == -1){

		getNearest(size);

	} else {

		currentId = id;

		updateButtons(currentId); //enable and disable next & prev buttons as needed

		var theRoom = rooms[size];

		$('roomSize').value = size;

		//set w/h/d in the unit needed
		if(unit == 'imperial'){

			$('height').innerHTML = theRoom['height'] +' ft';
			$('width').innerHTML = theRoom['width'] +' ft';
			$('depth').innerHTML = theRoom['depth'] +' ft';

		}else if (unit == 'metric'){

			$('height').innerHTML = toMeters(theRoom['height']) + ' m';
			$('width').innerHTML  = toMeters(theRoom['width']) + ' m';
			$('depth').innerHTML  = toMeters(theRoom['depth']) + ' m';

		}
		$('roomNumber').innerHTML = parseInt(id + 1);
		$('name').innerHTML = theRoom['name'];
		$('desc').innerHTML = theRoom['desc'];
		$('estimateImage').src = '/assets/images/estimator/rooms/thumb/' + theRoom['imagename'] + '.jpg';


		var features ='';

		var featuresLength = theRoom['features'].length;

		var fclass = 'col1';

		for( i = 0; i < featuresLength; i++ ){

			if(i % 2 == 0){

				fclass = 'col2';

			}else{

				fclass = 'col3';

			}

			features += '<li class="'+fclass+'">'+ theRoom['features'][i] +'</li>';

		}
		
		if( $('estimateMode').get('value') != 'mobileQuote') { // No features in the mobile context
			$('room_features').innerHTML = '<ul class="tick">' + features + '</ul>';
		}
		
		if(showPriceRange){
			$('toPrice').innerHTML = theRoom['toPrice'];
			$('fromPrice').innerHTML = theRoom['fromPrice'];
		}
		updateActiveRoomSize(size);

	}

}

//convert foot to meters
function toMeters(value){

	var meters = value * 0.3048;

	return (meters.toFixed(2));
}

//convert sq foot to sq metres
function toMetersSq(value){

	var meters = value * 0.09290304;

	return (meters.toFixed(2));
}

function switchDeals(){

	if(showAll == 0){

		$('body').getElements('.dealItem').each(

			function( item, ind ){

				item.style.display = 'block';
			}

		);

		showAll = 1;

	}else if(showAll ==1){

		$('body').getElements('.dealItem').each(

			function( item, ind ){

				item.style.display = 'none';
			}

		);

		showAll = 0;

		updateRoomByID(currentId);

	}


}

//hide/show buttons as appropriate
function updateButtons(id){

	if(id == 0){ //if the room is the first in the array, you cant go back

		$('previous').style.visibility = 'hidden';

	}else if(id == (roomCount-1)){ //if the room is the last in the array, you cant go forward

		$('next').style.visibility = 'hidden';

	}
	if(id > 0 && $('previous').style.visibility == 'hidden'){//if the room is the second in the array, re-enable the previous button

		$('previous').style.visibility = 'visible';

	}else if(id < (roomCount-1) && $('next').style.visibility == 'hidden'){// if the room is first from last, re-enable the next button

		$('next').style.visibility = 'visible';

	}

}


// monitorrrrring

	// Update the overall room number
	if ($('roomCount') != null) { $('roomCount').innerHTML = parseInt(roomCount);} 
	
	if($('type_picture') != null){

		$('type_picture').addEvent('click', function(event){ //listen in for mode switches

			mode = $('type_picture').value;

			$('image_options').style.display = '';

			updateRoomByID(currentId);

		});
	}
	if($('type_3d') != null){

		$('type_3d').addEvent('click', function(event){ //listen in for mode switches

			mode = $('type_3d').value;

			$('image_options').style.display = 'none';

			updateRoomByID(currentId);


		});
	}
	if($('room_select') != null){

		$('room_select').addEvent('change', function(event){ //listen in for swapping between room sizes via dropdown
			
			if ($('room_select').value == 'WS') {
				size = 'WS';
			} else {
				size = parseInt($('room_select').value); //parseInt otherwise currentId + 1 is the currentId with 1 appended
			}

			updateRoom(size);

		});

	}

	if($('option3') != null){

		$('option3').addEvent('click', function(event){ //listen in for swapping between room sizes via dropdown

			item = 'option3'; //parseInt otherwise currentId + 1 is the currentId with 1 appended

			overwrite = 2;

			updateRoomByID(currentId);


		});
	}

	if($('option2') != null){

		$('option2').addEvent('click', function(event){ //listen in for swapping between room sizes via dropdown

			item = 'option2'; //parseInt otherwise currentId + 1 is the currentId with 1 appended

			overwrite = 2;

			updateRoomByID(currentId);

		});
	}

	if($('option1') != null){

		$('option1').addEvent('click', function(event){ //listen in for swapping between room sizes via dropdown

			item = 'option1'; //parseInt otherwise currentId + 1 is the currentId with 1 appended

			overwrite = 2;

			updateRoomByID(currentId);

		});
	}



}