/**
* 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";
  }

};


/**
* You must create the carousel after the page is loaded since it is
* dependent on an HTML element (in this case 'mycarousel'.) See the
* HTML code below.
**/
var carousel; // for ease of debugging; globals generally not a good idea  
var cloc;
var loadCarousel = function() {
 var size = 0
 url = "/home/images/state/"+cloc.address.region+
            "/city/"+cloc.address.city;
 
 $.getJSON(url,
 function(data){
	carousel.setProperty("size", data.count, true);
	if (data.count == 0) {
		document.getElementById("carouselbox").style.display = 'none';
	} else {
		if (data.count <= 5) {
			document.getElementById('next-arrow').src = "images/right-disabled.gif";
		}
	       $.each(data.results, function(i,item){
	          size += 1;
	          carousel.addItem(size, fmtTripInnerHTML(item));
	       });
	}
 });
}
var fmtTripInnerHTML = function(result) {

     var tripInnerHTML = 
         '<a href="' + 
         result.url + 
         '"><img src="'+
         result.imagePath
         +'tiny_' + 
         result.imageFileName +
       '"/>' + 
         '<\/a><span>' + 
         result.desc+'</span>';
   return tripInnerHTML;
};
      
function pageLoad() {
  cloc = google.loader.ClientLocation;
  var images;

  if (cloc != null && cloc.latitude != null && cloc.longitude != null) {
     myLatlng = new google.maps.LatLng(cloc.latitude, cloc.longitude);
     var myOptions = {
        zoom: 11,
        center: myLatlng,
        disableDefaultUI: true,
        scaleControl: true,
        navigationControl:true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
     }
     var map = new google.maps.Map(
                            document.getElementById("homepage_map"),
                             myOptions);
     carousel = new YAHOO.extension.Carousel("mycarousel", 
           {
               numVisible:        5,
               animationSpeed:    0.4,
               scrollInc:         3,
               navMargin:         55,
               prevElement:     "prev-arrow",
               nextElement:     "next-arrow",
               prevButtonStateHandler:   handlePrevButtonState,
               nextButtonStateHandler:   handleNextButtonState,
               loadInitHandler: loadCarousel
           });
  }
}
YAHOO.util.Event.addListener(window, 'load', pageLoad);