var priorCenterItem = 1;


/**
 * Since carousel.addItem uses an HTML string to create the interface
 * for each carousel item, this method formats the HTML for an LI.
 **/

var fmtItem = function(i) {

    var tmp_div = document.getElementById('div-item-'+i);
   //alert(tmp_div.innerHTML);
    if(tmp_div)
    	return tmp_div.innerHTML;

};

var fmtItem2 = function(i,j) {

    var tmp_div = document.getElementById('div-item-'+i);
   if(tmp_div){
   var html = tmp_div.innerHTML;
   html = html.replace(/carousel-image-([0-9])*/, 'carousel-image-'+j);
   html = html.replace(/property_detail_([0-9])*/, 'property_detail_'+j);
   return html;
  }
};
/**
 * Custom inital load handler. Called when the carousel loads the initial
 * set of data items. Specified to the carousel as the configuration
 * parameter: loadInitHandler
 **/
var loadInitialItems = function(type, args) {
	var start = args[0];
	var last = args[1];

	load(this, start, last);
	spotlight(this);
	preview(this);
};

/**
 * Custom load next handler. Called when the carousel loads the next
 * set of data items. Specified to the carousel as the configuration
 * parameter: loadNextHandler
 **/
var loadNextItems = function(type, args) {
	// get the last middle item and turn off spotlight
	var li = this.getItem(priorCenterItem);

	var start = args[0];
	var last = args[1];
	var alreadyCached = args[2];

	if(!alreadyCached) {
		load(this, start, last);
	}
	spotlight(this);
	preview(this);
};

/**
 * Custom load previous handler. Called when the carousel loads the previous
 * set of data items. Specified to the carousel as the configuration
 * parameter: loadPrevHandler
 **/

var loadPrevItems = function(type, args) {
	// get the last middle item and turn off spotlight
	var li = this.getItem(priorCenterItem);

	var start = args[0];
	var last = args[1];
	var alreadyCached = args[2];

	if(!alreadyCached) {
		load(this, start, last);
	}
	spotlight(this);
	preview(this);
};

var load = function(carousel, start, last) {
	//alert(last);
	for(var i=start;i<=last;i++) {
		carousel.addItem(i, fmtItem(i), 'non-spotlight');

		// Image click will scroll to the corresponding carousel item.
		YAHOO.util.Event.addListener('carousel-image-'+i, 'click', function(evt) {
			this.carousel.scrollTo(this.index-2);
		}, {carousel:carousel,index:i}, true);
/*
		// Example of an alternate way to add an item (passing an element instead of html string)
		var p = document.createElement("P");
		var t = document.createTextNode("Item"+i);
		p.appendChild(t);
		carousel.addItem(i, p );
*/
	}
};

var getRandom = function(max, last) {
	var randomIndex;
	do {
		randomIndex = Math.floor(Math.random()*max);
	} while(randomIndex == last);

	return randomIndex;
};

/**
 * Custom button state handler for enabling/disabling button state.
 * Called when the carousel has determined that the previous button
 * state should be changed.
 * Specified to the carousel as the configuration
 * parameter: prevButtonStateHandler
 **/
var handlePrevButtonState = function(type, args) {

	var enabling = args[0];
	var leftImage = args[1];
	if(enabling) {
		leftImage.src = "../../images/left-enabled.gif";
	} else {
		leftImage.src = "../../images/left-disabled.gif";
	}

};

/**
 * Custom button state handler for enabling/disabling button state.
 * Called when the carousel has determined that the next button
 * state should be changed.
 * Specified to the carousel as the configuration
 * parameter: nextButtonStateHandler
 **/
var handleNextButtonState = function(type, args) {

	var enabling = args[0];
	var rightImage = args[1];
	if(enabling) {
		rightImage.src = "images/right-enabled.gif";
	} else {
		rightImage.src = "images/right-disabled.gif";
	}

};

function completeHandler(type, args) {
	// instead of doing the preview in the loadNext and loadPrev you can
	// wait for the animation scroll to stop before showing the preview
	//preview(this);
}
function preview(carousel) {
	var firstVisible = carousel.getProperty("firstVisible");
	var middle = firstVisible + 2;

	var detail = YAHOO.util.Dom.get('property_detail_' + middle);
	YAHOO.util.Dom.get('preview').innerHTML = detail.innerHTML;
}

function spotlight(carousel) {
	var firstVisible = carousel.getProperty("firstVisible");
	var start = firstVisible;
	var revealAmount = carousel.getProperty("revealAmount");
	var size = carousel.getProperty("size");

	if(revealAmount && firstVisible > 1) {
		start = firstVisible - 1;
	}
	var lastVisible = firstVisible + carousel.getProperty("numVisible") - 1;
	var end = lastVisible;
	if(revealAmount && lastVisible < size) {
		end = lastVisible + 1;
	}

	var middle = firstVisible + 2;

	for(var i=start; i<=end; i++) {
		var li = carousel.getItem(i);

       /* var opa = new YAHOO.util.Anim(li.id, { opacity: {from :.1 , to: 1 }  }, 2.0);
			 opa.animate();	 */

		if(i == middle) {
			YAHOO.util.Dom.replaceClass(li, 'non-spotlight', 'spotlight');


			priorCenterItem = i;
		} else {
			YAHOO.util.Dom.replaceClass(li, 'spotlight', 'non-spotlight');
			YAHOO.util.Dom.removeClass(li, 'first2');
			YAHOO.util.Dom.removeClass(li, 'first1');
			YAHOO.util.Dom.removeClass(li, 'last2');
			YAHOO.util.Dom.removeClass(li, 'last1');


		}
	}




	var li_f2 = carousel.getItem(middle-2);
	var li_f1 = carousel.getItem(middle-1);
	var li_l2 = carousel.getItem(middle+2);
	var li_11 = carousel.getItem(middle+1);

    var width3 = new YAHOO.util.Anim('carousel-image-'+middle, { width: {from :100 , to: 140 }  }, 1.0);
       width3.animate();
     var height3 = new YAHOO.util.Anim('carousel-image-'+middle, { height: {from :80 , to: 120 }  }, 1.0);
       height3.animate();
     var margin3 = new YAHOO.util.Anim('carousel-image-'+middle, { marginTop: {from :15 , to: 4 }  }, 1.0);
       margin3.animate();


    var width1 = new YAHOO.util.Anim('carousel-image-'+(middle-2), { width: {from :100 , to: 75 }  }, 1.0);
       width1.animate();
     var height1 = new YAHOO.util.Anim('carousel-image-'+(middle-2), { height: {from :80 , to: 50 }  }, 1.0);
       height1.animate();
      var margin1 = new YAHOO.util.Anim('carousel-image-'+(middle-2), { marginTop: {from :20 , to: 35 }  }, 1.0);
       margin1.animate();

     var width2 = new YAHOO.util.Anim('carousel-image-'+(middle-1), { width: {from :120 , to: 100 }  }, 1.0);
       width2.animate();
     var height2 = new YAHOO.util.Anim('carousel-image-'+(middle-1), { height: {from :100 , to: 80 }  }, 1.0);
       height2.animate();

     var margin2 = new YAHOO.util.Anim('carousel-image-'+(middle-1), { marginTop: {from :4 , to: 20 }  }, 1.0);
       margin2.animate();



     var width4 = new YAHOO.util.Anim('carousel-image-'+(middle+1), { width: {from :75 , to: 100 }  }, 1.0);
       width4.animate();
     var height4 = new YAHOO.util.Anim('carousel-image-'+(middle+1), { height: {from :60 , to: 80 }  }, 1.0);
       height4.animate();
      var margin4 = new YAHOO.util.Anim('carousel-image-'+(middle+1), { marginTop: {from :35 , to: 20 }  }, 1.0);
       margin4.animate();

     var width5 = new YAHOO.util.Anim('carousel-image-'+(middle+2), { width: {from :50 , to: 75 }  }, 1.0);
       width5.animate();
     var height5 = new YAHOO.util.Anim('carousel-image-'+(middle+2), { height: {from :40 , to: 50 }  }, 1.0);
       height5.animate();

      var margin5 = new YAHOO.util.Anim('carousel-image-'+(middle+2), { marginTop: {from :45 , to: 35 }  }, 1.0);
       margin5.animate();

	if(li_f2)
		YAHOO.util.Dom.addClass(li_f2, 'first2');
	if(li_f1)
		YAHOO.util.Dom.addClass(li_f1, 'first1');
	if(li_l2)
		YAHOO.util.Dom.addClass(li_l2, 'last2');
	if(li_11)
		YAHOO.util.Dom.addClass(li_11, 'last1');


}

/**
 * You must create the carousel after the page is loaded since it is
 * dependent on an HTML element (in this case 'dhtml-carousel'.) See the
 * HTML code below.
 **/

var carousel; // for ease of debugging; globals generally not a good idea
var pageLoad = function()
{
	carousel = new YAHOO.extension.Carousel("dhtml-carousel",
		{
			numVisible:         5,
			animationSpeed:     1.3,
			animationMethod:    YAHOO.util.Easing.easeOutStrong,
			scrollInc:          1,
			navMargin:          40,
			scrollBeforeAmount: 2,
			firstVisible:       1,
			autoPlay:          6000,
			wrap:true,
			size:               18,
			scrollAfterAmount:  2,
			prevElement:        "prev-arrow",
			nextElement:        "next-arrow",
			loadInitHandler:    loadInitialItems,
			loadNextHandler:    loadNextItems,
			loadPrevHandler:    loadPrevItems,
			prevButtonStateHandler:   handlePrevButtonState,
			nextButtonStateHandler:   handleNextButtonState,
			animationCompleteHandler: completeHandler
		}
	);

	//carousel.loadNextHandlerEvt.subscribe(beforeNext, carousel);
};

YAHOO.util.Event.addListener(window, 'load', pageLoad);