/*
********************************************************
************ Dezrez Imagehandler class     *************
************ Written by Lee Crosby         *************
************ © Dezrez Services Ltd. 2007   *************
********************************************************
*/


/* ImageHandler constructor */
function ImageHandler(mainImageContainer)
{
	/* Class Attributes */
	this.mainImageContainer = document.getElementById(mainImageContainer);
	this.thumbnailContainer;
	this.swapperContainer = new Array();
	this.awaitingPhotoSRC = "http://www.housetorentbourne.co.uk/awaitingphoto.jpg";
	this.mainImage;
	this.currentMainImage = -1;
	this.aThumbnailImages = new Array();
	this.swapEffect = 0;
	this.swapInProgress = false;
	this.noOfSwaps;
	this.swapType = 0;
	this.slideStatus = 0;
	this.slideType = 0;
	this.direction = 1;
	this.timer = 4000;
	this.duration = 1000;
	this.missed = 0;
	this.supressHide = false;
	this.offsetTop = 0;
	this.offsetLeft = 0;
	
	/* Class methods */
	if(typeof(ImageHandler_prototype_called) == 'undefined')
	{
		ImageHandler_prototype_called = true;
		//declare loadImages method
		ImageHandler.prototype.loadImages = loadImages;
		//declare swapImage method
		ImageHandler.prototype.swapImage = swapImage;
		//declare findPos method
		ImageHandler.prototype.findPos = findPos;
		//declare createSwapperElement method
		ImageHandler.prototype.createSwapperElement = createSwapperElement;
		//declare removeSwapperElements method
		ImageHandler.prototype.removeSwapperElements = removeSwapperElements;
		//declare swapWithoutFade method
		ImageHandler.prototype.swapWithoutFade = swapWithoutFade;
		//declare swapWithFade method
		ImageHandler.prototype.swapWithFade = swapWithFade;
		//declare opacity method
		ImageHandler.prototype.opacity = opacity;
		//declare changeOpac method
		ImageHandler.prototype.changeOpac = changeOpac;
		//declare startSlideShow method
		ImageHandler.prototype.startSlideShow = startSlideShow;
		//declare slideShow method
		ImageHandler.prototype.slideShow = slideShow;
		//declare pauseSlideShow method
		ImageHandler.prototype.pauseSlideShow = pauseSlideShow;
		//declare swapWithWipe method
		ImageHandler.prototype.swapWithWipe = swapWithWipe;
		//declare animateImage method
		ImageHandler.prototype.animateImage = animateImage;
		//declare changeSize method
		ImageHandler.prototype.changeSize = changeSize;
		//declare cycleImage method
		ImageHandler.prototype.cycleImage = cycleImage;
		//declare endSwap method
		ImageHandler.prototype.endSwap = endSwap;
		//declare endSwapWithWipe method
		ImageHandler.prototype.endSwapWithWipe = endSwapWithWipe;
	}
}

/* Image Handler Method */
/* process property images on the page */
function loadImages(thumbnailContainer)
{
	//check to see if main property image exists
	if(this.mainImageContainer.getElementsByTagName("img").length==0)
	{
		//if not insert to place holder image
		this.mainImageContainer.innerHTML = "<img src='" + this.awaitingPhotoSRC + "'>";
	}
	//reference the current main image
	var tempImage = this.mainImageContainer.getElementsByTagName("img");
	this.mainImage = tempImage[0];
	
	//reference the thumbnail images
	this.thumbnailContainer = document.getElementById(thumbnailContainer);
	var aThumbnailAnchors = this.thumbnailContainer.getElementsByTagName("a");
	//interate through thumbnail containers
	for(var i=0; i<aThumbnailAnchors.length; i++)
	{
		if(aThumbnailAnchors[i].getElementsByTagName("img").length!=0)
		{
			this.aThumbnailImages.push(aThumbnailAnchors[i].getElementsByTagName("img")[0]);
		}
		//if there is not an image within current thumbnail container
		else
		{
			//hide container if required
			if(!this.supressHide)
			{
				aThumbnailAnchors[i].style.display="none";
			}
			this.aThumbnailImages.push(null);
		}
	}
}

/* Image Handler Method */
/* initiate main image and specified thumbnail swap */
function swapImage(imageId)
{
	//swap with effect if required
	if(this.swapEffect==1)
	{
		this.swapWithFade(imageId);
	}
	else if(this.swapEffect==2)
	{
		this.swapWithWipe(imageId, "start");
	}
	else
	{
		this.swapWithoutFade(imageId);
	}
}

/* Image Handler Method */
/* initiate main image and specified thumbnail swap */
function changeMainImage(imageNo)
{
	if(this.swapEffect==1)
	{
		this.swapWithFade(imageId);
	}
	else if(this.swapEffect==2)
	{
		this.swapWithWipe(imageId, "start");
	}
	else
	{
		this.swapWithoutFade(imageId);
	}
}

/* Image Handler Method */
/* Swap main and thumb without an effect */
function swapWithoutFade(imageNo)
{
	//reference the new main image
	this.currentMainImage = imageNo;
	//remember old image
	var temp = this.mainImage.src;
	//swap old main with new
	this.mainImage.src = this.aThumbnailImages[imageNo].src;
	
	//if swap type is set to swap thumbnail with old main
	if(this.swapType==0)
	{
		this.aThumbnailImages[imageNo].src = temp;
	}
}


/* Image Handler Method */
/* Swap main and thumb with a fading effect */
function swapWithFade(imageNo)
{
	//swap already in progress -> queue
	if(!this.swapInProgress)
	{
		//set swap in progress flag
		this.swapInProgress = true;
		//add to number of swaps in queue
		this.noOfSwaps++;
		//record the new mainimage ID
		this.currentMainImage = imageNo;
		
		//record element ID's
		var mainImageId = this.mainImage.getAttribute("id");
		var thumbnailId = this.aThumbnailImages[imageNo].getAttribute("id");
		var mainImageSwapperID = this.createSwapperElement(this.mainImage,  this.findPos(this.mainImage));
		var thumbnailSwapperID = this.createSwapperElement(this.aThumbnailImages[imageNo],  this.findPos(this.aThumbnailImages[imageNo]));
		
		//swap main image
		this.mainImage.src = this.aThumbnailImages[imageNo].src;
		this.opacity(mainImageSwapperID, 100, 0);
		//remove main image swapper element when swap is finished
		setTimeout("imageHandler.removeSwapperElements('" + mainImageSwapperID + "')", this.duration);
		
		//swap the thumbnail (if necessary)
		if(this.swapType == 0)
		{
			this.aThumbnailImages[imageNo].src = document.getElementById(mainImageSwapperID).src;
			this.opacity(thumbnailSwapperID, 100, 0);
			//remove thumbnail image swapper element when swap is finished
			setTimeout("imageHandler.removeSwapperElements('" + thumbnailSwapperID + "')",this.duration);
		}
		//remove swap from the queue
		setTimeout("imageHandler.endSwap()",this.duration);
	}
	else
	{
		// queue the swap
		this.noOfSwaps++;
		setTimeout("imageHandler.swapWithFade(" + imageNo + ")", this.duration * this.noOfSwaps);
	}
}

/* Image Handler Method */
/* After time out thread completes, end the reset the swap variables */
function endSwap()
{
	this.swapInProgress = false;
	this.noOfSwaps--;	
}

/* Image Handler Method */
/* Reset the swapper elements */
function removeSwapperElements(element)
{
	var oContainingElement = document.getElementById(element).parentNode;
	var oElement = oContainingElement.removeChild(document.getElementById(element));
}

/* Image Handler Method */
/* Swap with a animated swipe effect */
function swapWithWipe(imageNo)
{
	//If there is already a swap in progress -> queue
	if(!this.swapInProgress)
	{
		//set swap in progress flag
		this.swapInProgress = true;
		//add to number of swaps in queue
		this.noOfSwaps++;
		//record element ID's
		var mainImageId = this.mainImage.getAttribute("id");
		var thumbnailId = this.aThumbnailImages[imageNo].getAttribute("id");	
		// first part of wipe (main image)
		var mainImageSwapperID = this.createSwapperElement(this.mainImage,  this.findPos(this.mainImage));
		//record new main image number
		this.currentMainImage = imageNo;
		
		this.mainImage.src = this.aThumbnailImages[imageNo].src;
		this.animateImage(mainImageSwapperID, 100, 0);
		setTimeout("imageHandler.endSwapWithWipe(" + imageNo + ", '" + mainImageSwapperID + "');", this.duration/2);
	}
	else
	{
		this.noOfSwaps++;
		setTimeout("imageHandler.swapWithWipe(" + imageNo + ")", this.duration * this.noOfSwaps);
	}
	
}

/* Image Handler Method */
/* After timeout thread completes reset variables and swapper elements*/
function endSwapWithWipe(imageNo, mainImageSwapperID)
{
	if(this.swapType==0)
	{
		var thumbnailSwapperID = this.createSwapperElement(this.aThumbnailImages[imageNo],  this.findPos(this.aThumbnailImages[imageNo]));
		this.aThumbnailImages[imageNo].src = document.getElementById(mainImageSwapperID).src;
		this.animateImage(thumbnailSwapperID, 100, 0);
		setTimeout("imageHandler.removeSwapperElements('" + thumbnailSwapperID + "');", this.duration);
	}
	setTimeout("imageHandler.removeSwapperElements('" + mainImageSwapperID + "');", this.duration);
	setTimeout("imageHandler.endSwap();", this.duration);
}

/* Image Handler Method */
/* Animate image swap */
function animateImage(id, startSize, endSize)
{
	//set animation speed
    var speed = Math.round(this.duration / 99); 
    var timer = 0; 
	//alter size with timeout (size as percentage)
	//decrease size
    if(startSize > endSize) 
	{ 
        for(var i = startSize; i >= endSize; i--) 
		{ 
            setTimeout("imageHandler.changeSize(" + i + ",'" + id + "')",(timer * speed)); 
            timer++; 
        } 
    } 
	//increase size
	else
	{
        for(i = startSize; i <= endSize; i++) 
        { 
			setTimeout("imageHandler.changeSize(" + i + ",'" + id + "')",(timer * speed)); 
			timer++; 
        } 
	}
	
}

/* Image Handler Method */
/* alters the size on the image */
function changeSize(size, id)
{
	var elementStyle = document.getElementById(id).style;
	var regEx = new RegExp("px", "i");
	var elementWidth = elementStyle.width.replace(regEx, "");
	var elementHeight = elementStyle.height.replace(regEx, "");
	elementWidth = (elementWidth/100)*size;
	elementHeight = (elementHeight/100)*size;
	elementStyle.width = elementWidth + "px";
	elementStyle.height = elementHeight + "px";
}

/* Image Handler Method */
/* Locate object position and return pixel coordinates */
function findPos(obj) 
{
	if(obj!=null)
	{
		var curleft = curtop = 0;
		if (obj.offsetParent) 
		{
			curleft = obj.offsetLeft
			curtop = obj.offsetTop
			while (obj = obj.offsetParent) 
			{
				curleft += obj.offsetLeft
				curtop += obj.offsetTop
			}
		}
		return [curleft,curtop];
	}
}

/* Image Handler Method */
/* Creates a swapper element positioned to overlay the object passed in */

function createSwapperElement(obj, coords)
{
	if(obj!=null)
	{
		var imageId = obj.getAttribute("id");
		var containingElement = obj.parentNode;
		var swapperElement = document.createElement("img");
		var swapperID = document.createAttribute("id");
		var swapperIDValue = imageId + "Swap";
		swapperElement.setAttribute("id", swapperIDValue);
		var swapperClass = document.createAttribute("class");
		swapperElement.setAttribute("class", "swapelement");
		var swapperSrc = document.createAttribute("src");
		swapperElement.setAttribute("src", obj.src);
		containingElement.appendChild(swapperElement);
		swapperElement.style.position = "absolute";
		var stylesheet = document.styleSheets;
		swapperElement.style.top = (this.offsetTop + coords[1])+"px";
		swapperElement.style.left = (this.offsetLeft + coords[0])+"px";
		swapperElement.style.width = obj.width;
		swapperElement.style.height = obj.height;
		return swapperIDValue;
		//this.swapperContainer.push(document.getElementById(imageId + "Swap"));
	}
	else
	{
		this.swapperContainer.push(null);
	}
}


/* Image Handler Method */
/* alters the opcatiy value of a object with a timer */
function opacity(id, opacStart, opacEnd) 
{ 
    //speed for each frame 
    var speed = Math.round(this.duration / 99); 
    var timer = 0; 

    //determine the direction for the blending, if start and end are the same nothing happens 
    if(opacStart > opacEnd) 
	{ 
        for(var i = opacStart; i >= opacEnd; i--) 
		{ 
            setTimeout("imageHandler.changeOpac(" + i + ",'" + id + "')",(timer * speed)); 
            timer++; 
        } 
    } 
	else
	{
        for(i = opacStart; i <= opacEnd; i++) 
        { 
			setTimeout("imageHandler.changeOpac(" + i + ",'" + id + "')",(timer * speed)); 
			timer++; 
        } 
	}
	
} 


/* Image Handler Method */
//change the opacity for different browsers 
function changeOpac(opacity, id) 
{ 
    var object = document.getElementById(id).style; 
    object.opacity = (opacity / 100); 
    object.MozOpacity = (opacity / 100); 
    object.KhtmlOpacity = (opacity / 100); 
    object.filter = "alpha(opacity=" + opacity + ")"; 
} 

/* Image Handler Method */
/* initate automated image swap with timer */
function startSlideShow()
{
	if(this.aThumbnailImages.length>0)
	{
		this.slideStatus = 1;
		setTimeout("imageHandler.slideShow()", (this.timer/2));
	}
}

/* Image Handler Method */
/* Stop automated image swap */
function pauseSlideShow()
{
	this.slideStatus = 0;
}

/* Image Handler Method */
/* Handles automated image swap */
function slideShow()
{
	if(this.slideStatus == 1)
	{
		this.cycleImage(this.direction);
		setTimeout("imageHandler.slideShow()", (this.timer));
	}
	
}

/* Image Handler Method */
/* Swap images in set direction (+1 forwards, -1 backwards)*/
function cycleImage(direction)
{	
	this.currentMainImage =  this.currentMainImage + direction;
	if(this.currentMainImage < 0)
	{
		this.currentMainImage = this.aThumbnailImages.length-1;
	}
	if(this.currentMainImage >= this.aThumbnailImages.length)
	{
		this.currentMainImage = 0;	
	}
	if(this.aThumbnailImages[this.currentMainImage] != null)
	{
		this.swapImage(this.currentMainImage);
	}
	else
	{
		this.cycleImage(direction);
	}
}

/************************************************************
******** END OF IMAGEHANDLER CLASS DEFINITION****************
************************************************************/



/*
***************************************************************
************ Other commonly used Dezrez scripts   *************
************ Stand alone functions				  *************
************ ® Dezrez Services Ltd. 2007		  *************
***************************************************************
*/

/*
********** Function to add Google map to page *****************
********** Pass in location lat long and html *****************
********** snippet for marker popup			  *****************
*/
function addMap(glat, glng, html)
{
		var property = new GLatLng(glat, glng);
		var map = new GMap2(document.getElementById("map"));
		map.setCenter(property, 15);
		map.addControl(new GSmallMapControl());
		map.addControl(new GMapTypeControl());
		var marker = createMarker(property,html,  map)
		map.addOverlay(marker);
}

//******* Adds a marker to a google map  	********************
//******* Pass in GPointer object, html 	********************
//******* snippet for popup and Gmap2 object********************
function createMarker(point, html, map)
{
	var marker = new GMarker(point);
	GEvent.addListener(marker, 'click',function (){
	map.setCenter(point);
	marker.openInfoWindowHtml(html);
	});
	return marker;
}

//*********** Opens web pages in a new window ******************
function newWindow(url, width, height)
{
	window.open(url, 'propertydetails', 'width=' + width + ',height=' + height + ',scrollbars=yes,resizable=yes');
	return false;
}

//****** Handles post to google map Directions *****************
function postForm()
{
	var routeform = document.getElementById("route");
	window.open("", "Myroute", "800,600,scrollbars=yes,resizable=yes");
	routeform.target="Myroute";
	routeform.submit();
	return false;
}