/*
////////////////
	$Id: scripts.js 524 2011-01-19 15:54:09Z mcasey $
	$URL: http://s23.dynalias.net/svn/lucasfox/development/www/assets/js/scripts.js $
	$Rev: 524 $
	$Date: 2011-01-19 16:54:09 +0100 (Wed, 19 Jan 2011) $
	$Author: mcasey $
	
	Javascript for Lucasfox
	Redone to be protoype only. Removing old DWR
////////////////
*/

function doPopupImage() {
	if (!document.getElementsByTagName) return false;
	var links = document.getElementsByTagName("a");
	for (var i=0; i < links.length; i++) {
		if (links[i].className.match("popupimage")) {
			links[i].onclick = function() {
				var w = this.getAttribute('w');
				var h = this.getAttribute('h');
				//alert('w='+w+' h='+h);
				window.open(this.href,'','toolbar=0,resizable=1,menubar=0,scrollbars=1,width='+w+',height='+h);
				return false;
			}//end func
		}//end if
	}//end if
}//end func

function initSearchForm(){
	var oSelClass = $("classid");
	if(!oSelClass) return; //return on non-existance
	//Store initial value (on page load) so that we can decide if we need to change pages or something. 
	oSelClass.writeAttribute("initialValue", oSelClass.getValue().toLowerCase());
	//Watch for changes in the class [sale|rent|shortterm]
	new Form.Element.EventObserver("classid", function(){
		togglePricePanels();
		$("cat1id").loadData(lucasfox.catRootId);
	});

	setupAdvancedSearch();

	//first run through trigger the pricing panels
	togglePricePanels(true);
	
	

	//fire off first level location
	$("cat1id").loadData(lucasfox.catRootId);
};

function setupAdvancedSearch(){
	//Setup the advanced search toggle behaviour
	var elm = $("element_advanced");
	if(!elm) return false;
	
	elm.handle = elm.select(".handle")[0];
	if(!elm.handle) return false;
	
	elm.wrapper = new Element('div', {	'class': 'wrapper'});
	
	//Move all but 1st child into the wrapper
	while (elm.childElements().length > 1) {
		elm.wrapper.appendChild(elm.childElements()[1].remove());
	}
	elm.appendChild(elm.wrapper);
	
	elm.wrapper.makePositioned();
	
	//Default state : Advanced search panel closed : Unless handle has classname "open"
	if (elm.hasClassName("open")) {
		elm.wrapper.show();
		elm.handle.select(".hide")[0].show();
		elm.handle.select(".show")[0].hide();
	}else{
		elm.wrapper.hide();
		elm.handle.select(".hide")[0].hide();
		elm.handle.select(".show")[0].show();
	}
	
	//make handle a link and hide/show the relevant text. 
	var link = new Element("a").update(elm.handle.innerHTML);
	elm.handle.update(link);
	//link.observe('click', elm.toggle);
	elm.handle.onclick = function(){
		$(this).up().toggle();
		return false;
	}//onclick
	
	elm.toggle = function(){
		if (this.hasClassName("open")) {
			//close it
			Effect.BlindUp(this.wrapper, {
				duration: 0.3,
				queue: {
					position: 'end',
					scope: 'collapsible',
					limit: 1
				},
				afterFinish: function(ef){
					ef.element.up().removeClassName("open");
					ef.element.up().handle.select(".hide")[0].hide();
					ef.element.up().handle.select(".show")[0].show();
				}
			});
			
		}
		else {
			//open it
			Effect.BlindDown(this.wrapper, {
				duration: 0.2,
				queue: {
					position: 'end',
					scope: 'collapsible',
					limit: 1
				},
				afterFinish: function(ef){
					ef.element.up().addClassName("open");
					ef.element.up().handle.select(".hide")[0].show();
					ef.element.up().handle.select(".show")[0].hide();
				}
			});
			
		}
	}

}

function advancedSearchForce(state){
	var elm = $("element_advanced");
	if(!elm) return false;
	var wrapper = $$("#element_advanced .wrapper")[0];
	if(!wrapper) return false;
	
	if (state == "open") {
		//Force display of the advanced search.
		wrapper.show();
	}else{
		//Reset to what it was before. 
		if (elm.hasClassName("open")) wrapper.show();
		else wrapper.hide();
	}
}

//firstrun arg is used to tell difference between toggle triggered by user changing select value (true) or system firing it first time round.
function togglePricePanels(firstrun){
	var oSelClass = $("classid");
	if(!oSelClass) return; //return on non-existance
	var classId = oSelClass.getValue().toLowerCase();
	//console.log(classId);
	switch(classId){
		case "shortterm":{
			//hide sale and rent : show shortterm
			$("element_sale", "element_rent", "element_baths", "element_rentallicence", "element_furnished", "advanced_handle", "element_type", "element_reference").invoke("hide");
			//$("element_people").invoke("show");
			$("element_people").show();
			advancedSearchForce("open");
			break;
		}
		case "rent":{
			//hide sale and shortterm : show rent
			if ($('element_rent')) {
				$("element_sale", "element_baths", "element_people", "element_rentallicence").invoke("hide");
				$("element_rent", "element_furnished", "advanced_handle", "element_type", "element_reference").invoke("show");
				advancedSearchForce("reset");
			}
			break;
		}		
		case "sale":{
			//show sale : hide rent and shortterm
			if ($('element_sale')) {
				$("element_rent", "element_furnished", "element_people").invoke("hide");
				$("element_sale","element_baths", "advanced_handle", "element_type", "element_reference", "element_rentallicence").invoke("show");
				advancedSearchForce("reset");
			}
			break;
		}
	}//switch
}

/*
	Initialise the AJAX form stuff
	Set up all the location select elements
*/
function initLocationMenu(){
	/*
	 * 	First find all the parents (should be just one), then follow through their decendants and set them up.
	 * 	Then finally fire the onchange on the class.
	*/
	
	$$("select#cat1id.locations").each(function(parentElem,idx){
		//dbg.h("Got parent " + sel.id);
		//Set observer
		//sel.observe("change", observeLocationSelect.bind(sel));
		//sel.dependentElm 	= $(sel.getAttribute("rel"));
		
		var selectElem = parentElem;
		while(selectElem){
			//dbg.p(dependent.tagName + " : " + dependent.id);
			if (selectElem.tagName != "SELECT"){
				selectElem = null;
				break;
			}
					
			//create method to hide and clear me
			selectElem.hideSelect = function(){
				//dbg.p(this.id + ".hide()");
				this.hide();
				this.clearOptions();
			};
			
			//Create method to removes all but first option.
			selectElem.clearOptions = function(){
				while (this.childElements().length > 1){
					this.down(1).remove();
    			}
			};
			
			//Loads data for me
			selectElem.loadData = function(catId){
				//console.log(this.id + ".loadData(" + catId + ")." + catId.length);
				//console.log("Initial " + lucasfox.initialCatIds[this.id] + "." + lucasfox.initialCatIds[this.id].length);
				//get classID from form select element
				var oSelClass = $("classid");
				if(!oSelClass) return; //return on non-existance		
				var classId 	= oSelClass.getValue().toLowerCase();
				
				var d 			= null;
				var elm 			= this;

				//console.log("Current:"+ $F(this));
				//Store current value in global object : Thais maintains selection across classes (if location exists for class)
				var currentValue = $F(this);
				if (currentValue.length) {
					lucasfox.initialCatIds[elm.id] = currentValue;
				}
				
				if(catId.length == 0){
					//for empty values
					//dbg.p("Empty");
					this.hideSelect();
					if (this.dependentElm) {
						this.dependentElm.loadData("");
					}
					return;
				} 
			
				new Ajax.Request("/components/ajax.cfc", {
					method: 'get',
					parameters: {
						method: "wrapper",
						methodName: "application.oProperty.getLocations",
						json: true,
						locationId: catId,
						classId: classId,
						langcode: lucasfox.langCode,
						siteId: lucasfox.siteId
					},
					onSuccess: function(transport){
						//dbg.p("Successfull lookup");
						if (transport.responseJSON != false && transport.responseJSON.recordcount) {
							//dbg.p("we have some records");

							//remove all but first : The "any"
							elm.clearOptions();
							
							//write new options					
							transport.responseJSON.data.title.each(function(opt, idx){
								var option = new Element('option', {
									'class': 'd',
									value: transport.responseJSON.data.uuid[idx]
								}).update(opt);
								if (transport.responseJSON.data.uuid[idx] == lucasfox.initialCatIds[elm.id]) {
									option.selected = true;
								}
								elm.insert(option);
							});
							elm.show();						
						}
						else {
							//hide me : I have no locations to show
							//dbg.p("No records");
							elm.hideSelect();
						}
					},
					onComplete: function(){
						//wait a bit before checking : Dom seems to need time to add <option>s to <select>
						if (elm.dependentElm) {
							setTimeout(function(){
								//console.log("Currently selected : " + elm.getValue());
								elm.dependentElm.loadData(elm.getValue());
							}, 10);
						}					
					}
				});
			};//loadData()
			
			//Add observer if I have a dependent
			selectElem.dependentElm = $(selectElem.getAttribute("rel"));
			if (selectElem.dependentElm) {
				selectElem.observe("change", 
					function(){
						//fire dependents loadData()
						this.dependentElm.loadData(this.getValue());
					}
				);
			}

			//pass dependent to next in while loop
			selectElem = selectElem.dependentElm;
		};//end while
	});//end each
};//end func


/*
 * For IE that doesn't support rounded corners in CSS
 * We use the old image technique. 
 */
function solveSomeIssueswithIE(){
	//No version of IE allows for rounded corners...
	/*
	$$("#side .losenge").each(
		function(el){ el.wrap('span', { 'class': 'losenge-wrapper' })}
		);
	*/
	//IE 7 and lower don't allow styling of selects
	if(parseInt(navigator.userAgent.substring(navigator.userAgent.indexOf("MSIE")+5)) <= 7){
		$$("#side select").each(
			function(el){ el.wrap('span', { 'class': 'select-wrapper' })}
			);
	};
}


Event.observe(window, "load", function(){
		//dbg.init();
		initLocationMenu(); // AJAX stuff
		initSearchForm();
		doPopupImage();
		if(Prototype.Browser.IE) solveSomeIssueswithIE();
	}); //start the func on page load
	
	
	
/**
 * Event.simulate(@element, eventName[, options]) -> Element
 * 
 * - @element: element to fire event on
 * - eventName: name of event to fire (only MouseEvents and HTMLEvents interfaces are supported)
 * - options: optional object to fine-tune event properties - pointerX, pointerY, ctrlKey, etc.
 *
 *    $('foo').simulate('click'); // => fires "click" event on an element with id=foo
 *
 **/
(function(){
  
  var eventMatchers = {
    'HTMLEvents': /^(?:load|unload|abort|error|select|change|submit|reset|focus|blur|resize|scroll)$/,
    'MouseEvents': /^(?:click|mouse(?:down|up|over|move|out))$/
  }
  var defaultOptions = {
    pointerX: 0,
    pointerY: 0,
    button: 0,
    ctrlKey: false,
    altKey: false,
    shiftKey: false,
    metaKey: false,
    bubbles: true,
    cancelable: true
  }
  
  Event.simulate = function(element, eventName) {
    var options = Object.extend(defaultOptions, arguments[2] || { });
    var oEvent, eventType = null;
    
    element = $(element);
    
    for (var name in eventMatchers) {
      if (eventMatchers[name].test(eventName)) { eventType = name; break; }
    }
 
    if (!eventType)
      throw new SyntaxError('Only HTMLEvents and MouseEvents interfaces are supported');
 
    if (document.createEvent) {
      oEvent = document.createEvent(eventType);
      if (eventType == 'HTMLEvents') {
        oEvent.initEvent(eventName, options.bubbles, options.cancelable);
      }
      else {
        oEvent.initMouseEvent(eventName, options.bubbles, options.cancelable, document.defaultView, 
          options.button, options.pointerX, options.pointerY, options.pointerX, options.pointerY,
          options.ctrlKey, options.altKey, options.shiftKey, options.metaKey, options.button, element);
      }
      element.dispatchEvent(oEvent);
    }
    else {
      options.clientX = options.pointerX;
      options.clientY = options.pointerY;
      oEvent = Object.extend(document.createEventObject(), options);
      element.fireEvent('on' + eventName, oEvent);
    }
    return element;
  }
  
  Element.addMethods({ simulate: Event.simulate });
})()