/* Javascript for Listing Pages



*/




//HANDLE WHEN USER CLICKS A THUMBNAIL in the horiz scrolling list of porperty thumbnail images
//clicking on each thumbnail will swap the clicked thumb with the image in the primary image div

//moved stores the movement of the primary house photo from the primary spot to the secondary spot
//it has to be an array, which each item representing the move state of a separate db listing feature box div
var moved = new Array();
var lastClickedThumb = new Array();
var lastClickedThumbBorderColor;

function clickPropertyList (e) {
	var eventObject = new Event(e);
	//break the name of the clicked image id into an array split by underscores "_"
	if(!eventObject.id) return;
	//make sure we clicked an image
	var currClickedElement = eventObject.target;
	//alert(window.getComputedStyle(currClickedElement, null).borderColor);
	if(currClickedElement.tagName == "IMG" || currClickedElement.tagName == "img" ) {
		//get src of this object
		var clickedThumb = currClickedElement.src;
		//get the last clicked image thumbnail object and un-highlight it
		if(lastClickedThumb[featuredListingId]) {
			lastClickedThumb[featuredListingId].style.borderColor = lastClickedThumbBorderColor;	
		}
		
		//then highlight this clicked thumb with a border
		//but first store a reference to it as the lastclickedthumb, so we can unhighlight it later when we highlight another
		lastClickedThumb[featuredListingId] = currClickedElement;
			//we need to remember what the unhighlighted border color was of this clicked thumb so we can revert back to it
		if(currClickedElement.currentStyle) {
			lastClickedThumbBorderColor = currClickedElement.currentStyle.borderColor;
			//alert("currClickedElement.currentStyle, lastClickedThumbBorderColor = " + lastClickedThumbBorderColor);
		} else if(window.getComputedStyle) {
			lastClickedThumbBorderColor	= window.getComputedStyle(currClickedElement, null).borderColor;
			//alert("window.getComputedStyle, lastClickedThumbBorderColor = " + lastClickedThumbBorderColor);
		}
		
		currClickedElement.style.borderColor = "#fef3e3";
	
	
	
	//get src of primary image
		var primary = document.getElementById("primary_" + featuredListingId).src;
		//set src of this object to that
		document.getElementById("primary_" + featuredListingId).src = clickedThumb;
		currClickedElement.src= primary;
	} else {
		//log(eventObject.target.tagName,1,"clickPropertyList", "eventObject.target.tagName");

	}
	//alert(e.srcElement.id);
	//alert(eventObject.target);
	//property_detail_box_1
}


function clickSecondThird (e) {
	
		
	var eventObject = new Event(e);
	//break the name of the clicked image id into an array split by underscores "_"
	if(!eventObject.id) return;
	
	if(eventObject.target.id == moved[featuredListingId]) {
		moved[featuredListingId] = "";
	} else if(moved[featuredListingId] == "" || moved[featuredListingId] == undefined) {
		moved[featuredListingId] = eventObject.target.id;
	}
	
		
	
	
	//make sure we clicked an image
	if(eventObject.target.tagName == "IMG" || eventObject.target.tagName == "img" ) {
		//get src of this object
		var clickedThumb = eventObject.target.src;
		//if there is no image src loaded for the clicked image the target's src value will be the page's url
		//for this case, we do not load
		if(clickedThumb ==document.location.href) return;
	//get src of primary image
		var primary = document.getElementById("primary_" + featuredListingId).src;
	//set src of this object to that
		document.getElementById("primary_" + featuredListingId).src = clickedThumb;
	//set src of primary image to this
		eventObject.target.src = primary;
	} 
	//alert(e.srcElement.id);
	//alert(eventObject.target.id);
	//property_detail_box_1
}





/* USER CLICKS ON OTHER LISTING

*/
//stores the element that was last clicked
var lastClickedOtherListing;
var border_color;

function clickOtherListings(e) {
	
	var eventObject = new Event(e);
	//break the name of the clicked image id into an array split by underscores "_"
	if(!eventObject.id) return;
	//let's take apart the clicked objects id, which is in the form "listing_object_id"
	var idArray = (eventObject.target.id).split("_");
	var recordId = idArray[idArray.length - 1];

	if(isNaN(recordId)) {
		//log(recordId,1,"clickOtherListings", "recordId");
		return;
	}
	
	if(recordId == featuredListingId) return;
	
	var featListCurr = document.getElementById("featuredlisting_"+featuredListingId);
	
	var listingToDisplay = document.getElementById("featuredlisting_"+recordId);
	
	
	//get the last clicked image thumbnail object and un-highlight it
	if(lastClickedOtherListing) {
		//alert("lastClickedOtherListing is true, border_color = " + border_color);
		lastClickedOtherListing.style.borderColor = border_color;
	}

	//then highlight this clicked thumb with a border
	//we have to get the computed styles for these objects because their class sets style properties
	//we are going to change the image margin, to keep it from moving down when the border is applied
	lastClickedOtherListing = document.getElementById("otherlistings_"+recordId);
	if(lastClickedOtherListing.currentStyle) {
		border_color = lastClickedOtherListing.currentStyle.borderColor;
		//alert("lastClickedOtherListing.currentStyle, border_color = " + lastClickedOtherListing.currentStyle.borderColor);
	} else if(window.getComputedStyle) {
		border_color = window.getComputedStyle(lastClickedOtherListing, null).borderColor;
		//alert("window.getComputedStyle, border_color = " + window.getComputedStyle(lastClickedOtherListing, null).borderColor);
	}
	var currentClickedOtherListing = lastClickedOtherListing;
	currentClickedOtherListing.style.borderColor = "#fef3e3";
	
	
	//setting the class toggles the visibility; hide the current feature and show the clicked one
	listingToDisplay.className = "featuredlisting";
	featListCurr.className = "hidden";
	//featuredListingId is defined in the html/php file : var featuredListingId = <?= $pageData['openlistings']['id']; ?>;
	featuredListingId = recordId;
	//Finally activate the listings images
	activateImages(recordId);
	
	
}

/*
ACTIVATE IMAGES
When a user clicks on an other listing to load it's details, we make that hidden detail div appear with clickPropertyList above,
then we use activateImages to actually load the image files for the detail record.
We do this because when we load the db records for the page, we load placeholders for the images (img tags with no src value), so
that if there are lots of other listings >10, we don't load all those images at once. Instead, we load them with activateImages
We use listingImagesLoaded array to keep track of what listings we've loaded images for.
*/

//keeps track of what listings have images loaded
//each item in the array corresponds to the record id of the listing
//e.g. listingImagesLoaded[4] = div id="other_listing_4"

var listingImagesLoaded = new Array();
//we have to record that we've already loaded the first featured listing
//otherwise it reloads the images for it if we click away and click back again
//and this is wasteful, not to mention messing up the move state of the primary photo
listingImagesLoaded[featuredListingId] = 1;

function activateImages(id) {
	//id is the db record id and our divs will have that id at the end of their id name
	//first check if that listing has already had it's images loaded
	if(listingImagesLoaded[id]) return;
	//otherwise set the item=id in the array to 1
	listingImagesLoaded[id] = 1;
	
	//load the primary, second and third images
	//alert('activateimages');
	var prime = document.getElementById('primary_'+ id);
	var second = document.getElementById('second_'+ id);
	var third = document.getElementById('third_'+ id);
	
	//kludgy handling of client page-specific property image element
	var clientPropImage = document.getElementById('primaryproperty_'+ id);
	//alert("clientPropImage.alt: " + clientPropImage.alt);
	//we stored the image src url in the image alt tag, weren't we clever
	//just set the src property to the alt tag property
	if(prime) prime.src = prime.alt;
	if(second) second.src = second.alt;
	if(third) third.src = third.alt;
	if(clientPropImage) clientPropImage.src = clientPropImage.alt;
	
	
	//now for all the image tags in the sliding horiz scroll div
	//we do the same thing
	
	//the horiz scroll div is list_sliding_# , where # is record id
	//inside list_sliding are divs which contain the image tags
	var slider = document.getElementById('list_sliding_contents_' + id);
	if(slider) {
		var imgElem;
		for(i=0; i < slider.childNodes.length; i++) {
			//make sure we get a div child
			if (slider.childNodes[i].nodeName == "DIV" ||  slider.childNodes[i].nodeType == 1) {
				//now get the img tag inside the child div
				imgElem = slider.childNodes[i].childNodes[0];
				imgElem.src = imgElem.alt;
			}
		}
	}


		
		
		
	
}



/* REGISTER LISTENERS

*/

//register listener for other listings
function clickOtherListingsRegister() {
	//alert(document.images.length);
	var elem = document.getElementById('otherlistings');
	eventListenerAdd(elem, "mouseup", clickOtherListings, true);

}

//register listener for the scrolling list of property thumbnail images
function listingRegister(param) {
	//alert("listingRegister: param =" + param);
	var slider = document.getElementById('list_sliding_contents_' + param);
	eventListenerAdd(slider, "mouseup", clickPropertyList, true);

}

function secondRegister(param) {
	//alert(document.images.length);
	var elem = document.getElementById('second_' + param);
	eventListenerAdd(elem, "mouseup", clickSecondThird, true);

}

function thirdRegister(param) {
	//alert(document.images.length);
	var elem  = document.getElementById('third_' + param);
	eventListenerAdd(elem, "mouseup", clickSecondThird, true);
/*	for(var i=0; i < document.images.length; i++) {
		eventListenerAdd(document.images[i], "mouseup", clickPropertyList, true);
	}*/
}





function HANDLER_scrollListings(evtObj,visible,scrollAmt,slideDiv) {
	
	//let's take apart the clicked objects id, which is in the form "listing_object_id"
	var direction = "left";
	if((evtObj.target.id).indexOf('right') >-1) {
		direction = "right";
	}

	scrollListings(slideDiv, visible, scrollAmt,direction);
}

//Arrow-specific handlers for scrolling arrows
//calls the more generic HANDLER_scrolllistings(e)
function HANDLER_scrollListingImages(e) {	
	var eventObject = new Event(e);
	if(!eventObject.id) {
		//log("!eventObject.id",1,"HANDLER_scrollListings");
		return;
	}
	var idArray = (eventObject.target.id).split("_");
	var recordId = idArray[idArray.length - 1];
	if(isNaN(recordId)) {
			//log(recordId,1,"HANDLER_scrollListings", "recordId");
		return;
	}
	var slider = document.getElementById('list_sliding_contents_' + recordId);
	var initiallyVisible = 5;
	var scrollAmount = 60;
	HANDLER_scrollListings(eventObject,initiallyVisible,scrollAmount,slider);
}


//Arrow-specific handlers for scrolling arrows
//calls the more generic HANDLER_scrolllistings(e)
function HANDLER_scrollOtherListings(e) {

	var eventObject = new Event(e);
	if(!eventObject.id) {
		//log("!eventObject.id",1,"HANDLER_scrollListings");
		return;
	}
	var slider = document.getElementById('other_list_sliding_contents');
	var initiallyVisible = 5;
	var scrollAmount = 132;
	HANDLER_scrollListings(eventObject,initiallyVisible,scrollAmount,slider);
}



//REGISTER LEFT AND RIGHT SCROLL LISTINGS

function REGISTER_scrollListingImages(param) {
	//alert("REGISTER_scrollListingsLeft");
	var elem = document.getElementById('arrow_left_' + param);
	eventListenerAdd(elem, "mouseup", HANDLER_scrollListingImages, true);
	elem = document.getElementById('arrow_right_' + param);
	eventListenerAdd(elem, "mouseup", HANDLER_scrollListingImages, true);

}


//REGISTER other listing scrolling list

//register listener for other listings
function REGISTER_scrollOtherListings() {
	//register listeners for the scroll arrows for other listings
	elem = document.getElementById('other_arrow_left');
	eventListenerAdd(elem, "mouseup", HANDLER_scrollOtherListings, true);
	elem = document.getElementById('other_arrow_right');
	eventListenerAdd(elem, "mouseup", HANDLER_scrollOtherListings, true);

}


//runOnLoad exists in file ondocumentload.js
//it stores functions passed to it and loads them when the body.onLoad event occurs

runOnLoad(REGISTER_scrollOtherListings);
//runOnLoad(displayFirstRecord);
//we can register this one here because it does not depend on the feature id
//the other runOnLoad calls are output in the actual page as part of the 
//iteration that builds the page, because we need to register eventListeners for each
//div that represents each record being returned to the page
runOnLoad(clickOtherListingsRegister);