/*
 * ELSlideshowPlayer 1.3.1
 *
 * Copyright 2010 Estee Lauder - www.esteelauder.com
 * Lovingly crafted By Nick Warner - www.nwarner.com
*/

// Define the player class
var ELSlideshowPlayer = Class.create({ 
  initialize :  function(options){
    console.log("initialize ELSlideshowPlayer.");  
    this.slideshow =        new ELSlideshow();
    this.is_playing =       false;
    this.timer =            undefined;
    this.feed_url =         options.feed_url || "estee_homepage.xml";
    this.feed_type =        options.feed_type || "xml";  
    this.feed_content =     options.feed_content || undefined;
    this.current_slide_id = options.current_slide_id || 0;
    this.wait_to_start =    options.wait_to_start || false;
    this.track_metrics =    options.track_metrics || false;
    this.unloading_slide_id = undefined;
    this.original_width =   options.width || undefined;
    this.original_height =  options.height || undefined;
    this.scale_ratio =      1.0;
    this.preload_counter =  0;
    this.preload_total =    0;
    console.log("...preparing to load feed.");  
    this.load_feed();
    console.log("...done initialize ELSlideshowPlayer.");  
  },
     
  current_slide: function(){
    return this.find_slide_by_index(this.current_slide_id);
  },
  
  find_slide_by_index: function(index){
    return this.slideshow.slides[index];
  },
  
  find_layer_by: function(property, value){
    var l;
    this.all_layers().each(function(layer, index){
      if (layer[property] === value) {
        l = layer;
      }
    });
    return l;
  },
  
  all_layers: function(){
    var slide_layers = [];
    this.slideshow.slides.each(function(slide){
      slide_layers = slide_layers.concat(slide.layers);
    });
    return this.slideshow.slides.concat(this.slideshow.overlays, this.slideshow.underlays, slide_layers);
  },
  
  load_feed: function(){
    console.log("...inside load feed.");  
    var player = this;
    
    if (this.feed_url === "direct") { // Use direct data input
      this.parse_feed(this.feed_content);
    } else {
        console.log("...loading feed..." + this.feed_url);  
        //generic.jsonrpc.fetch(this.feed_url, { // or fetch a feed
        new Ajax.Request(this.feed_url, { // or fetch a feed
        method: 'get',
        onFailure: function(){console.log("Load Feed Fail.");},
        onSuccess: function(response) {
          console.log("...starting the player...");  
          player.feed_content = response.responseText;
          player.parse_feed(player.feed_content);
          console.log("...player loaded");  
        }
      });
      console.log("...ajax?");  
    }
  },
  
  parse_feed : function(feed) {
    var player = this;
    if (player.feed_type === 'xml') {
      player.parse_xml(feed);
    } else if (player.feed_type === 'json') {
      player.parse_json(feed);
    } else {
      console.log('Data load error.');
    }
    player.preload_layers();
  },
  
  
  setup_player: function(){
    var player = this;
    
    this.build_pager(); 
    this.add_overlays_and_underlays();
    this.stage_resize(player.slideshow.width);

    if (!this.wait_to_start) {
      this.jump_to_slide(this.current_slide_id);
    }
    if (player.slideshow.autoplay === 'true' || player.slideshow.autoplay === true) {
      player.toggle_autoplay();
    }
  },
  
  toggle_autoplay: function(){
    var player = this;
    var layer;
  
    if (player.is_playing === true) { // stop playing
      player.is_playing = false;
      player.clear_timer();
      
      layer = player.find_layer_by('name', 'playpause');      
      if (layer) { // looks like play button, assume this is an Image Layer 
        if (layer.assets && layer.assets[0]) {
          $(layer.id).src = layer.assets[0]; // the first asset should be the play image
        }
      }
    } else { // start playing
      player.is_playing = true;
      player.reset_timer();
      layer = player.find_layer_by('name', 'playpause');      
      if (layer) { // looks like play button, assume this is an Image Layer 
        if (layer.assets && layer.assets[1]) {
          $(layer.id).src = layer.assets[1]; // the first asset should be the pause image
        }
      } 
    }
  },
  
  
  clear_timer: function() {
    clearInterval(this.timer);
  },
    
    
  start_timer: function() {
    var player = this;
    player.clear_timer();
    player.timer = setTimeout(function(){ player.fire_timer(); }, player.current_slide().interval_in_milliseconds());
  },
  
  
  reset_timer: function() {
    var player = this;
    this.clear_timer();
    if (player.is_playing === true) {
      player.start_timer();
    }
  },
  
  
  fire_timer: function() {
    var player = this;
    player.reset_timer();
    player.next_slide();
  },
  

  add_overlays_and_underlays: function(){
    var player = this;
    Element.insert($("ELSlideshowPlayer"), {'top': "<div id='slides' style='overflow: hidden; z-index: "+player.slideshow.zindexes.slides+";'></div>"});
    if (Object.isArray(player.slideshow.underlays)) {
      player.render_layer_set(player.slideshow.underlays, $("ELSlideshowPlayer"), player.slideshow.zindexes.underlays); 
      player.run_action_for_layer_set(player.slideshow.underlays, 'onload', false);
    }
    if (Object.isArray(player.slideshow.overlays)) {
      player.render_layer_set(player.slideshow.overlays, $("ELSlideshowPlayer"), player.slideshow.zindexes.overlays); 
      player.run_action_for_layer_set(player.slideshow.overlays, 'onload', false);
    }
  },
  
  
  run_action_for_layer_set : function(layer_set, action, reversed) {
    var max_delay = 0;
    var delay = 0;  
  
    layer_set.each(function(layer, index) {
      if ((layer[action].actions !== undefined) && (layer[action].actions !== "")) {
        delay = layer[action].run(reversed);
      } else {
        if (action === 'onload') { //if no onload animations, just show it
          $(layer.id).setOpacity(1);
          $(layer.id).show(); 
        }
      }
      if (delay > max_delay) {
        max_delay = delay;
      }
    });
    return max_delay;
  },
  
  
  previous_slide: function(reversed){
    var player = this;
    var success = false;
    var prev_slide_id = this.current_slide_id - 1;
    if (prev_slide_id < 0) {
      prev_slide_id = (this.slideshow.slides.length - 1);
      if ((player.slideshow.loop === true) || (player.slideshow.loop === "true")) {
        player.transition_to_slide(prev_slide_id, reversed);
        success = true;
      }
    } else {
      this.transition_to_slide(prev_slide_id, reversed);
      success = true;
    }
    return success;
  },
  
  
  next_slide: function(){
    var player = this;
    var success = false;
    var next_slide_id = this.current_slide_id + 1;
    if (next_slide_id === this.slideshow.slides.length) {
      if ((player.slideshow.loop === true) || (player.slideshow.loop === "true")) {
        player.transition_to_slide(0);
        success = true;
      } else {
        if (player.is_playing === true) {
          player.toggle_autoplay();
        }
      }
    } else {
      player.transition_to_slide(next_slide_id);
      success = true;
    }
    return success;
  },
  
  
  jump_to_slide: function(i, reversed){
    var player = this;
    
    player.current_slide_id = i;
    player.show_slide(reversed);
    player.reset_timer();
    
    // Update pager   
    if (player.pager) {
      for (var p = 0; p < player.slideshow.slides.length; p=p+1) {
        $('pager'+p).src = player.pager.src;
      }
      $('pager'+i).src = player.pager.src_current;
    }
  }, 
  
  
  transition_to_slide: function(i, reversed){
    var player = this;
    
    if (i !== player.current_slide_id) {
      player.unloading_slide_id = player.current_slide_id;
      
      // Play the onunload animations
      var max_delay = player.run_action_for_layer_set(player.current_slide().layers.concat(player.current_slide()), 'onunload', reversed);
  
      // Show new slide after the last one transitions out
      player.clear_timer(); 
      player.jump_to_slide(i, reversed);
      
      // Clear old slide
      setTimeout(function(){  
        if (player.unloading_slide_id !== player.current_slide_id) {
          var $layer = $(player.find_slide_by_index(player.unloading_slide_id).id);       
          $layer.fade({ from: $layer.getStyle('opacity'), to: 0, duration: 0.5 });           
          $layer.update();
        } 
      }, (max_delay*1000));
    }
  },
  
  
  
  

  preload_layers: function(){
    var player = this;
    player.all_layers().each(function(layer, index) {
      // load images
      if (layer.type === 'image') {
        player.preload_total = player.preload_total + 1;
        layer.image.onLoad = function(){player.preload_counter = player.preload_counter + 1;};                
        layer.image.src = layer.src;
      }

      // load images from assets, if any
      if (layer.assets && layer.assets.length > 0) {
        layer.assets.each(function(asset, index){
          var image = new Image();
          image.src = asset;
        });
      }
    });
    player.wait_for_preload();
  },
  
  
  
  wait_for_preload: function() {
    var player = this;
    
    if (player.preload_counter < player.preload_total) {
      //setTimeout(function(){player.wait_for_preload();}, 200);
      player.setup_player(); // now continue
    } else {
      player.setup_player();
    }
  },



  show_slide: function(reversed){
    var player = this;
    var slide = this.current_slide();

    player.render_slide(slide);

    $$('.slide').each(function(s){ s.setStyle({"zIndex": player.slideshow.zindexes.slides}); });
    $(slide.id).setStyle({"zIndex": parseInt(player.slideshow.zindexes.slides, 10) + 1 });
    $(slide.id).show();
  
    // Animate! Now that the slide is loaded, play the onload animations of its layers
    player.run_action_for_layer_set(slide.layers.concat(slide), 'onload', reversed);
    player.metrics_slideview(slide.metrics_id);
  },
  
  
  render_slide: function(slide){
    var player = this;
    
    $slide = $(slide.id);
    if ($slide === null) {
      player.render_layer_set([slide], $("slides"), player.slideshow.zindexes.slides);
      $slide = $(slide.id);
    } else {
      $slide.update(); // Empty slide to reset, if it exists
    }
    
    player.render_layer_set(slide.layers, $slide, player.slideshow.zindexes.slidelayers);
  },
  
  
  render_layer_set: function(layer_set, $element, z_index) {  
    var player = this;
    z_index = parseInt(z_index, 10);
    if (Object.isArray(layer_set) && (layer_set.length > 0)) {    
      layer_set.each(function(layer, index) {
        if (layer.type === "image") {
          Element.insert($element, {'top': "<img class='image "+layer.name+"' id='"+layer.id+"' style='"+layer.style+"; top:"+layer.y * player.scale_ratio+"px; left:"+layer.x * player.scale_ratio+"px;' src='"+layer.src+"' />"});               
        }
        if (layer.type === "text") {
          Element.insert($element, {'top': "<a class='text "+layer.name+"' id='"+layer.id+"' style='"+layer.style+"; top:"+layer.y * player.scale_ratio+"px; left:"+layer.x * player.scale_ratio+"px; color:"+layer.color+"; font-size:"+layer.fontsize+"px; letter-spacing:"+layer.letterspacing+"px; '>"+layer.text+"</a>"});           
        }
        if (layer.type === "slide") {
          Element.insert($element, {'top': "<div class='slide "+layer.name+"' id='"+layer.id+"' style='"+layer.style+"; top:"+layer.y * player.scale_ratio+"px; left:"+layer.x * player.scale_ratio+"px;'></div>"});            
        }
        $layer = $(layer.id);
        $layer.setOpacity(0.0);
        $layer.setStyle({'zIndex': z_index + index});
        if (layer.width) {
          $layer.setStyle({'width': layer.width * player.scale_ratio + "px"});
        } else {
          $layer.setStyle({'width': player.original_width * player.scale_ratio + "px"});
        }
        if (layer.height) {
          $layer.setStyle({'height': layer.height * player.scale_ratio + "px"});
        } else {
          $layer.setStyle({'height': player.original_height * player.scale_ratio + "px"});
        }        
        if (layer.onclick.actions) {
          $(layer.id).setStyle({'cursor': 'pointer'});
        }
        player.bind_events_for_layer(layer);
      });
    }
  },
  
  
  bind_events_for_layer: function(layer){
    $(layer.id).observe('click', function(event) {
      layer.onclick.run();
    });
    $(layer.id).observe('mouseover', function(event) {
      layer.onmouseover.run();
    });
    $(layer.id).observe('mouseout', function(event) {
      layer.onmouseout.run();
    });
  },
  


  build_pager : function() {
    var player = this;
    
    if (player.pager) {
      player.slideshow.slides.each(function(slide, index){      
        var pager_layer = new ELImage("pager"+index);
       
        pager_layer.src =     player.pager.src;
        pager_layer.image.src = pager_layer.src;
        
        pager_layer.x =       player.pager.start_x + (player.pager.width * index);
        pager_layer.y =       player.pager.start_y; 
        pager_layer.width =   player.pager.width;
        pager_layer.height =  player.pager.height;       
        
        pager_layer.onload =      new ELAction(pager_layer, player.pager.onload_action, player);
        pager_layer.onmouseover = new ELAction(pager_layer, player.pager.onmouseover_action, player);
        pager_layer.onmouseout =  new ELAction(pager_layer, player.pager.onmouseout_action, player);
        pager_layer.onclick =     new ELAction(pager_layer, "{script: 'slideshow_player.transition_to_slide("+index+");'}", player);
        
        player.slideshow.overlays.push(pager_layer);
      });
    }
  },
  
  
  stage_resize: function(new_width){
    var player = this;

    // Setup defaults
    if (player.original_width === undefined) {
      player.original_width = player.slideshow.width;
    }
    if (player.original_height === undefined) {
      player.original_height = player.slideshow.height;
    }    
    
    // Check for change
    if (new_width !== player.original_width) {
      player.scale_ratio = new_width / player.original_width;
    }
  
    if (player.scale_ratio !== 1.0) {   
      player.slideshow.height = player.original_height * player.scale_ratio;
      player.slideshow.width = new_width; 
      
      if ($('ELSlideshowPlayer')) {
        $('ELSlideshowPlayer').setStyle({'width': player.slideshow.width + "px", 'height': player.slideshow.height + "px"});
      }
      if ($('slides')) {
        $('slides').setStyle({'width': player.slideshow.width + "px", 'height': player.slideshow.height + "px"});
      }
      if ($$('.slide')){
        $$('.slide').each(function(s){ s.setStyle({'width': player.slideshow.width + "px", 'height': player.slideshow.height + "px"}); });
      }
      
      // Scale visible layers
      player.all_layers().each(function(layer, index){
        if ($(layer.id)) {
          if (layer.width === undefined) {
            layer.width = player.original_width;
          }
          if (layer.height === undefined) {
            layer.height = player.original_height;
          }
          $(layer.id).setStyle({'width': layer.width * player.scale_ratio + "px", 'height': layer.height * player.scale_ratio + "px", 'top': layer.y * player.scale_ratio + "px", 'left': layer.x * player.scale_ratio + "px"});
        }
      });
    }
  },

  


  hexify_color: function(color){
    if (color === null) {
      color = undefined;
    }
    if (color !== undefined) {
      if (color.indexOf("0x") !== -1) {
        color = "#" + color.substring(2);
      }
    }
    return color;
  },
  
  
  

  metrics_slideview: function(name) {
    this.metrics_element_tag("SLIDESHOW:SLIDEVIEW", name );
  },

  metrics_linkclick: function(name) {
    this.metrics_element_tag("SLIDESHOW:LINKCLICK", name );
  },
  
  metrics_element_tag: function(who, what) {
    if (this.track_metrics === true) {
      // track using core metrics, if available
      if (typeof cmCreatePageElementTag === "function") { 
        cmCreatePageElementTag(who, what);
      }
    }
  }
  
  
  
  
});




// DEBUG----------------

var c_counter =0;
function c(s) {  
  if (s === undefined) {
    c_counter = c_counter + 1;
    s = c_counter;
  }
  console.log(s);
}