var HomeSlideshow = Class.create({
  
  /* // slide data example:
  {
    promoImageReference: "img/homeSlideshow/homeSlideshowTest1.jpg" - required
    promoURL: "www.google.com"       - optional
    
    bcPlayerId: "541393859001"       - required for video
    bcPlayerKey: "441742819001"      - required for video
    bcVideoWidth: 551                - optional for video, defaults
    bcVideoHeight: 358               - optional for video, defaults
    videoButtonPosition_X: 100       - required for video
    videoButtonPosition_Y: 200       - required for video
    videoTitle: "Billy's Title"      - required for video
  }
  */
  
  FORCE_DIR_LEFT: 1,
  FORCE_DIR_RIGHT: 2,
  DEFAULT_VID_WIDTH: 551,
  DEFAULT_VID_HEIGHT: 358,
  
  // element references
  slidesContainer: null,
  controlsContainer: null,
  controlLeft: null,
  controlRight: null,
  controlsContainer: null,
  controls: [],
  currSlide: null,
  
  currIndex: 0,
  isTransitioning: false,
  
  slideDataArray: null,
  autoplayExecuter: null,
  
  initialize: function(slideDataJSON) {
    
    this.slideDataArray = slideDataJSON;
    
    this.slidesContainer   = $("homeSlideshowSlidesContainer");
    this.controlRight      = $("homeSlideshowRight");
    this.controlLeft       = $("homeSlideshowLeft");
    this.controlsContainer = $("homeSlideshowControls");
    
    this.controlLeft.observe("click", this.doLeftClick.bind(this));
    this.controlRight.observe("click", this.doRightClick.bind(this));
    
    this.currSlide = this.slideForIndex(0);
    
    this.slideDataArray.each(function(dataObject){
      
      var img = new Element("img").setAttribute("src", dataObject.promoImageReference);
      
      var thisControl = new Element("div").addClassName("homeSlideshowControl");
      thisControl.observe("click", this.doControlClick.bind(this));
      this.controlsContainer.insert(thisControl);
      this.controls.push(thisControl);
      
    }.bind(this));
    
    
    if (this.slideDataArray.length > 1) {
      var fadeInElement = $("homeSlideshowControlsVisibilityContainer");
      fadeInElement.setOpacity(0);
      fadeInElement.show();
      this.centerControls();
      fadeInElement.appear({ duration: 0.5 });

      this.updateControlsForIndex(0);
      
      this.autoplayExecuter = new PeriodicalExecuter(this.doAutoplayExecuter.bind(this), homeSlideshowDelay || 5); /* homeSlideshowDelay declared in pRube object 'Home Slideshow Delay Variable.js' */
    };
    
    this.slidesContainer.update(this.currSlide);
    
    HomeSlideshow.currSlideshow = this;
  },
  
  doAutoplayExecuter: function(pe) {
    var nextUp;
    if (this.currIndex + 1 == this.controls.length) {
      nextUp = 0;
    } else {
      nextUp = this.currIndex + 1;
    }
    
    this.updateDisplayForIndex(nextUp);
    this.currIndex = nextUp;
  },
  
  stopAutoplay: function() {
    if (this.autoplayExecuter) {
      this.autoplayExecuter.stop();
      this.autoplayExecuter = null;
    }
  },
  
  centerControls: function() {
    
    var shiftContainer = $("homeSlideshowControlsShiftContainer");
    
    var controlLeftLayout = this.controlLeft.getLayout();
    
    var controlsWidth = (controlLeftLayout.get("width") + controlLeftLayout.get("margin-right")) * 2 + this.controls.length * this.controls[0].getWidth();
    var containerWidth = $("homeSlideshowMainContainer").getWidth();
        
    shiftContainer.setStyle({left: (containerWidth - controlsWidth) * 0.5 + "px", width: controlsWidth + "px"});
  },
  
  slideForIndex: function(index) {
    var slideData = this.slideDataArray[index];
    var element = new Element("div").addClassName("homeSlideshowItem").setStyle({
      backgroundImage: "url('" + slideData.promoImageReference + "')"
    });
    
    if (slideData.videoDataItemLabel) {
    //if (slideData.bcPlayerKey && slideData.bcPlayerId) {
      
      //var bcVideoWidth  = slideData.bcVideoWidth  || HomeSlideshow.DEFAULT_VID_WIDTH;
      //var bcVideoHeight = slideData.bcVideoHeight || HomeSlideshow.DEFAULT_VID_HEIGHT;
      var videoTitle    = slideData.videoTitle || "";
      
      var button = new Element("div").addClassName("buttonWatchTrailer");
      button.setAttribute("onclick", "HomeSlideshow.showVideoInDialog('" + escape(slideData.videoDataItemLabel) + "', '" + escape(videoTitle) +"'); return false;");
      
      if (slideData.videoButtonPosition_X || slideData.videoButtonPosition_Y) {
        button.setStyle({position: "absolute"});
        if (slideData.videoButtonPosition_X) button.setStyle({left: slideData.videoButtonPosition_X + "px"});
        if (slideData.videoButtonPosition_Y) button.setStyle({top: slideData.videoButtonPosition_Y + "px"});
      };
      
      element.insert(button);
    };
    
    if (slideData.promoURL) {
      var promoAnchor = new Element("a").setStyle({display:"block", width:"100%", height:"100%"});
      promoAnchor.setAttribute("href", slideData.promoURL);
      element.insert({bottom: promoAnchor});
    };
    
    return element;
  },
  
  updateDisplayForIndex: function(index, forceDirection) {
    
    var currSlide = this.currSlide;
    
    this.isTransitioning = true;

    var newSlide = this.slideForIndex(index);
    
    var startingPos;
    switch (forceDirection) {
      case this.FORCE_DIR_LEFT:
        startingPos = -680;
        break;
      case this.FORCE_DIR_RIGHT:
        startingPos = 680;
        break;
      default:
        startingPos = (index < this.currIndex) ? -680 : 680;
        break;
    }
    
    newSlide.setStyle({left:startingPos + "px"});
    
    this.slidesContainer.insert(newSlide);
    
    new Effect.Parallel([
      new Effect.Morph(newSlide, { style: {left: "0px"} }),
      new Effect.Morph(currSlide, { style: {left: startingPos * -1 + "px"} })
    ], {
      duration: 0.8,
      afterFinish: function(event) {
        this.isTransitioning = false;
        currSlide.remove();
      }.bind(this)
    });
    
    this.currSlide = newSlide;
    this.updateControlsForIndex(index);
  },
  
  updateControlsForIndex: function(index) {
    for (var i = 0; i < this.controls.length; i++) {
      var thisElement = this.controls[i];
      if (i == index) {
        thisElement.addClassName("homeSlideshowControlOn");
      } else {
        thisElement.removeClassName("homeSlideshowControlOn");
      }
    };
  },
  
  doControlClick: function(event) {
    
    this.stopAutoplay();
    
    if (!this.isTransitioning) {
      var control = event.findElement("div");
      var index = this.controls.indexOf(control);

      if (index != this.currIndex) {

        this.updateDisplayForIndex(index);
        this.currIndex = index;

      };
    };
  },
  doLeftClick: function(event) {
    
    this.stopAutoplay();
    
    if (!this.isTransitioning) {
      var newIndex = (this.currIndex - 1 >= 0) ? this.currIndex - 1 : this.controls.length - 1;
      this.updateDisplayForIndex(newIndex, this.FORCE_DIR_LEFT);
      this.currIndex = newIndex;
    };
  },
  doRightClick: function(event) {
    
    this.stopAutoplay();
    
    if (!this.isTransitioning) {
      var newIndex = (this.currIndex + 1 < this.controls.length) ? this.currIndex + 1 : 0;
      this.updateDisplayForIndex(newIndex, this.FORCE_DIR_RIGHT);
      this.currIndex = newIndex;
    };
  }
  
});

HomeSlideshow.showVideoInDialog = function(videoDataItemLabel, escapedModalTitle) {
  
  videoDataItemLabel = unescape(videoDataItemLabel);
  
  HomeSlideshow.currSlideshow.stopAutoplay();
  
  new LDialog({
      title: unescape(escapedModalTitle),
      content: new Element("div")/*.setStyle({width:bcWidth + "px", height: bcHeight + "px"})*/,
      ajax: {
        url: "/h/sfballet/homeSlideshowVideo",
        options: {
          evalScripts: true,
          parameters: {
            videoDataItemLabel: videoDataItemLabel
          }
        }
      }
  }); 
  
};