// define document.getElementById shortcut using YUI
var $ = YAHOO.util.Dom.get;

function getCarouselData (dataElement) {
  var carouselData = eval('(' + dataElement.innerHTML + ')');
  for(key in carouselData)  {
    carouselData[key] = carouselData[key].split(',');
  }
  return carouselData;
}

/**
 * Carasoul Initilization for testimonial
 */
function initTestimonial () {
 // get testimonial data (in JSON), and assign values to its keys 
  var testimonialData = getCarouselData($('testimonial-data'));
  var testimonial_detail = $("testimonial-detail"),
        testimonial_carous = new YAHOO.widget.Carousel("testimonial-container",{numVisible:[1]});
    testimonial_carous.on("itemSelected", function(index){
      var item_text = testimonial_carous.getElementForItem(index);
      if(item_text){
        testimonial_detail.innerHTML = "<span id='work'>" + testimonialData.writer_x[index] + 
        "</span><br /><span id='comp'>" + testimonialData.company_x[index] + "&nbsp;&nbsp;&nbsp;</span>";
      }
    });
    testimonial_carous.set("animation", { speed: 0.5 });
    testimonial_carous.set("navigation",{prev: null, next: null});
    testimonial_carous.render();
    testimonial_carous.show();
}

YAHOO.util.Event.onDOMReady( function () {

  // get carousel data (in JSON), and assign values to its keys
  var carouselData = getCarouselData($('carousel-data'));
  
  var slideElement = $("spotlight-image-info");

/* Carousel Initilization and Image Selection */
  (function () {
      // Get the image link from within its (parent) container.
      function getImage(parent) {
          var el = parent.firstChild;

          while (el) { // walk through till as long as there's an element
              if (el.nodeName.toUpperCase() == "IMG") { // found an image
                  // flickr uses "" suffix for small, and "_m" for big
                  // images respectively
                  return el.src.replace(/_s\.jpg$/, "_m.jpg");
              }
              el = el.nextSibling;
          }

          return "";
      }

      var attributes = {opacity: {from: 1, to: 0 } };
      var anim = new YAHOO.util.Anim('spotlight', attributes);
      var attributes1 = {opacity: {from: 0, to: 1 } };
      var anim1 = new YAHOO.util.Anim('spotlight',attributes1);

      //var attributes2 = {top: {from: 307, to: 241 }, height: {from: 0, to: 66} };
      var attributes2 = {bottom: {from: -82, to: 0 }};
      var anim2 = new YAHOO.util.Anim('spotlight-image-info',attributes2);

      //var attributes3 = {height: {from: 80, to: 0}, top: {from: 241, to: 307} };
      var attributes3 = {bottom: {from: 0, to: -82 }};
      var anim3 = new YAHOO.util.Anim('spotlight-image-info',attributes3);

      var spotlight = YAHOO.util.Dom.get("spotlight"),
      carousel = new YAHOO.widget.Carousel("container-x",{numVisible:[3,4]});

      carousel.on("itemSelected", function (index) {
          // item has the reference to the Carousel's item
          anim.animate();
          anim3.animate();
          anim.onComplete.subscribe(function() {
             anim1.animate();
             var item = carousel.getElementForItem(index);
             if (item) {
              //fade_out(1,index);
              anim2.animate();
             
              spotlight.innerHTML = "<img src=\""+ carouselData.images[index] +"\" alt='' />";
//              slideElement.innerHTML = "<span ><a href='" + carouselData.permalinks[index] + "'class=\"car\">" + carouselData.titles[index] + "</a></span>";
              slideElement.innerHTML = "<span >" + carouselData.titles[index] + "</span>";

             }
          });
      });
      anim3.onComplete.subscribe(function() {
          slideElement.style.display = "block";
      });
      carousel.set("animation", { speed: 0.5 });
      carousel.render(); // get ready for rendering the widget
      carousel.show();   // display the widget
  })();
  
  
  // initialize testimonial carousel
  initTestimonial();
    
});