//var _imagesFolder must be defined in a script on the page with the path to the images folder

	var activeImage = false;
	var imageGalleryObj = false;
    var minGalleryXPos = 0;
	var maxGalleryXPos = 0;
	var slideSpeed = 0;
	var imageGalleryCaptions = new Array();
    var imageSliderContainer;
    var _iskeepAspect = true;       
    var _wantedImageWidth;
    var _isIhumbnailUrl;
    var _isImagesPath;
    var _isOpcityOver;
    var _isOpacityOut;
    var _keepAspect=false;
    
	function startSlide(e)
	{
		if(document.all)e = event;
		this.getElementsByTagName('IMG')[0].src = _isImagesPath + this.id + '_over.png';	//* Change The Url to your images folder directory */
		if(this.id=='arrow_right'){
			slideSpeedMultiply = Math.floor((e.clientX - this.offsetLeft) / 5);
			slideSpeed = -1*slideSpeedMultiply;
			slideSpeed = Math.max(-10,slideSpeed);
		}else{			
			slideSpeedMultiply = 10 - Math.floor((e.clientX - this.offsetLeft) / 5);
			slideSpeed = 1*slideSpeedMultiply;
			slideSpeed = Math.min(10,slideSpeed);
			if(slideSpeed<0)slideSpeed=10;
		}
	}
	//Fired on mouseout of left and right arrow images
	function releaseSlide()
	{
		var id = this.id;
		this.getElementsByTagName('IMG')[0].src = _isImagesPath + this.id + '.png';
		slideSpeed=0;
	}

    //Fired on mouseover left and right arrow images
	function gallerySlide()
	{
        if(minGalleryXPos<0){
            if(slideSpeed!=0){
                var leftPos = imageGalleryObj.offsetLeft;

                leftPos = leftPos/1 + slideSpeed;

                if(leftPos>maxGalleryXPos){
                    leftPos = maxGalleryXPos;
                    slideSpeed = 0;
                }
                if(leftPos<minGalleryXPos){
                    leftPos = minGalleryXPos;
                    slideSpeed=0;
                }
                imageGalleryObj.style.left = leftPos + 'px';
            }
            setTimeout('gallerySlide()',20);
        }
	}

	//Fired on mouseover slideshow image
	function showImage()
	{
		if(activeImage){
            setOpacity(activeImage,_isOpacityOut);
		}
        setOpacity(this,_isOpacityOver);
		activeImage = this;	
	}

    //Widens the galery until 100% of the container width is reached
    function galleryExpand(percent){
        var newPercent=percent + 5;
        imageSliderContainer.style.width=percent + "%";
        if (newPercent<=100){
            maxGalleryXPos = imageGalleryObj.offsetLeft;
            minGalleryXPos = -document.getElementById('slideEnd').offsetLeft-10+imageSliderContainer.clientWidth;
            setTimeout('galleryExpand(' + newPercent +')',20);
        }else{
            maxGalleryXPos = imageGalleryObj.offsetLeft;
            gallerySlide();
        }
    }

    //Initializes all the needed variables and preloads most of the needed images
    function initSlideShow()
    {
        var numImages = 0;
        var imageSlideLoader;
        var aspect;
        //Preload a few images
        var preloadImage = new Image();
        imageGalleryObj = document.getElementById('theImages');
        var slideshowImages = imageGalleryObj.getElementsByTagName('IMG');

        preloadImage.onload= function(){
            this.onload= function(){};
            this.src = _isImagesPath + "arrow_left_over.png";

            document.getElementById('arrow_left').onmousemove = startSlide;
            document.getElementById('arrow_left').onmouseout = releaseSlide;
            document.getElementById('arrow_right').onmousemove = startSlide;
            document.getElementById('arrow_right').onmouseout = releaseSlide;

            numImages = slideshowImages.length;
            for(var no=0;no<numImages;no++){
                slideshowImages[no].onmouseover = showImage;
                _wantedImageWidth = slideshowImages[no].width;
                if(_isKeepAspect) slideshowImages[no].style.width="auto";
                if (_isKeepAspect && slideshowImages[no].width>_wantedImageWidth ) {
                    
                    aspect = 100/slideshowImages[no].width;
                    slideshowImages[no].style.width=_wantedImageWidth + "px"
                    wantedImageHeight = slideshowImages[no].height;
                    slideshowImages[no].style.height=wantedImageHeight*aspect + "px";
                    slideshowImages[no].style.paddingTop =(wantedImageHeight - slideshowImages[no].height)/2+ "px";
                    slideshowImages[no].style.paddingBottom =slideshowImages[no].style.paddingTop;
                }
            }
            //if (numImages>0) setOpacity(slideshowImages[0],_isOpacityOver);
            imageSlideLoader = document.getElementById('imageSlideLoader')
            if (imageSlideLoader) imageSlideLoader.style.display="none";
            //Change the 15 in the next call to the width percentage set in the css  for the imageSliderContainer
            setTimeout('galleryExpand(15)',20);
        }
        preloadImage.src = _isImagesPath + "arrow_right_over.png";
    }
     
	//function called on the onclick of the images in the slideshow
	function showPic4(whichpic, placeholder, placeholder2, titles, thumbnailUrl) {

        if (thumbnailUrl==null)thumbnailUrl=_isthumbnailUrl;
		if (document.getElementById) {

             var photoCaption = document.getElementById('photoCaptionCentered')
			 var uMedium=new String(thumbnailUrl);
             var uLarge=new String(thumbnailUrl);

			 uMedium=uMedium.replace(/&amp;/g,'&');
			 uMedium=uMedium.replace(/\{0\}/g,_photos[whichpic].name);
			 uMedium=uMedium.replace(/\{1\}/g,'medium');

			 uLarge=uLarge.replace(/&amp;/g,'&');
			 uLarge=uLarge.replace(/\{0\}/g,_photos[whichpic].name);
			 uLarge=uLarge.replace(/\{1\}/g,'large');
			 document.getElementById(placeholder2).href = uLarge;
			 document.getElementById(placeholder2).title = titles;
			 document.getElementById(placeholder).title= titles;
			 document.getElementById(placeholder).alt= titles;
             fadePhotoIn(uMedium,true,true);
             //Set the photoCaption text
             if (photoCaption!=null) photoCaption.innerHTML = titles;
			 return false;
		} else {
			 return true;
		}
	}

//Sets the opacity  for the given obj
function setOpacity(obj, opacity) {
  opacity = (opacity == 100) ? 99.999 : opacity;
  // IE/Win
  obj.style.filter = "alpha(opacity:"+opacity+")";
  // Safari previous to 1.2, Konqueror
  obj.style.KHTMLOpacity = opacity /100;
  // previous Mozilla and Firefox
  obj.style.MozOpacity = opacity /100;
  // Safari 
  obj.style.opacity = opacity /100;
}

function fadePhotoIn(newSrc,fade,showLoading){
    var imagePreload = new Image();
    var tmpImage;
    if (fade==null) fade=true;
    if (showLoading == null) showLoading=true;
    if (showLoading == true)   showLoadingImage('ssPhotoFade','loadingDiv','/InfocasaEngine/Images/ajax-loader_32.gif',true);

    imagePreload.onload = function(){
        this.onload = function(){};
        var imageIn = document.getElementById('propertyDetails__photoSlide__photo1');
        var imageOut = document.getElementById('propertyDetails__photoSlide__photo2');

        var wantedHeight= document.getElementById('ssPhotoFade').clientHeight;
        var wantedWidth= document.getElementById('ssPhotoFade').clientWidth;

        //Swap theimages round depending on the 'rel' attribute
        if (imageIn.getAttribute('rel')>imageOut.getAttribute('rel')){
            tmpImage = imageOut;
            imageOut =imageIn;
            imageIn = tmpImage;
        }

        setOpacity(imageIn,0);
        imageIn.src=this.src;

        if (_isKeepAspect){
            if(this.height>wantedHeight){
                var aspect = wantedHeight/this.height;
                imageIn.style.height = wantedHeight+ "px";
                imageIn.style.width =  wantedWidth*aspect + "px";
                imagePreload.width=wantedWidth*aspect;
                imagePreload.height=wantedHeight;
            }else{
                imageIn.style.height ="";
                imageIn.style.width ="";
            }
        }
            imageIn.style.marginTop =(wantedHeight - imagePreload.height)/2+ "px"
            imageIn.style.marginLeft =(wantedWidth - imagePreload.width)/2+ "px";
        //Swap rel attribute so we know which image is in which position
        imageIn.setAttribute("rel","1");
        imageOut.setAttribute("rel","0");
        imageIn.style.visibility='visible';
        if (showLoading==true && document.getElementById('loadingDiv') ){
            showLoadingImage('ssPhotoFade','loadingDiv','',false);
        }
        if (fade) fadeImage(imageIn,imageOut);
    }
    imagePreload.src=newSrc.replace("&amp;","&");
}

//Creates and positions if needed a newloadingDivName over the containerDivName
function showLoadingImage(containerDivName,newloadingDivName,imagePathAndFile,show){
    var placeHolder = document.getElementById(containerDivName);
    var loadingDiv = document.getElementById(newloadingDivName);
    if(show==null) show=true;
    if(placeHolder!=null){
        if(loadingDiv==null){
            loadingDiv = document.createElement("div");
            var imagePreload = new Image();
            imagePreload.onload = function(){
                this.onload = function(){};

                loadingDiv.setAttribute('id',newloadingDivName);
                loadingDiv.style.position="absolute";
                loadingDiv.style.display="block";
                loadingDiv.style.top =placeHolder.offsetTop + (placeHolder.clientHeight - imagePreload.height)/2 + "px";
                loadingDiv.style.left =placeHolder.offsetLeft+ (placeHolder.clientWidth - imagePreload.width)/2 + "px";
                loadingDiv.style.clear="both";
                loadingDiv.style.zIndex="2500";
                var loadingImage = document.createElement('img');
                loadingImage.src=this.src;
                loadingDiv.appendChild(loadingImage);
                document.body.appendChild(loadingDiv);
                loadingDiv.style.display=show?'block':'none';
            }
            imagePreload.src = imagePathAndFile;
        }else{
            var top = placeHolder.offsetTop + (placeHolder.clientHeight - loadingDiv.clientHeight)/2 ;
            var left = placeHolder.offsetLeft+ (placeHolder.clientWidth - loadingDiv.clientWidth)/2;
            loadingDiv.style.top = top + "px";
            loadingDiv.style.left = left + "px";
            loadingDiv.style.display=show?'block':'none';
        }
      }
}

function imageSliderAddLoadEvent(func)
{	
	var oldonload = window.onload;
	if (typeof window.onload != 'function'){
    	window.onload = func;

	} else {
		window.onload = function(){
        func(); //Make this function first, in case google maps
		oldonload();
		}
	}
}
//Main function to initialize the slider
function imageSliderInit(thumbnailUrl,imagesFolder, opacityOver,opacityOut,photoCount,keepAspect){
    if (photoCount>0){
        imageSliderContainer =document.getElementById('imageSliderContainer');
        if (imageSliderContainer){
            imageSliderContainer.style.display="block";
            _isThumbnailUrl = thumbnailUrl;
            _isImagesPath = imagesFolder;
            if(keepAspect!=null){
                _isKeepAspect = keepAspect;
            }
            _isOpacityOver = opacityOver;
            _isOpacityOut  = opacityOut;
            imageSliderAddLoadEvent(initSlideShow);
        }
    }
}