var RadiantSerumSitelet = {

  transition_duration: 1,
  image_path: "/RadiantSerum/images/",
  default_category_string: "sitelet_RadiantSerum",
  current_panel_id: "1",
  current_panel_index: 0,
  


  build_sitelet: function() {   
    var self = this; 
    $$('body')[0].insert({bottom: "<div id='radiant_serum_sitelet_page_overlay' onclick='RadiantSerumSitelet.close_sitelet()'></div><div id='radiant_serum_sitelet' ><div class='nav'></div><div class='sitelet'></div><div class='bottom_bar'></div></div>"});
    
    this.content.panels.each(function(panel, index){
      self.build_panel(panel, index);
    });
    
    this.element_tag('sitelet open');
    this.build_navigation();
    this.build_bottom_bar();
    this.show_panel(this.current_panel_id);
    if (Prototype.Browser.IE ) { //|| Prototype.Browser.Gecko
      Cufon.replace('#radiant_serum_sitelet .text');
    }
  },
  
  
  close_sitelet: function() {
    var self = this;
    this.current_panel_id = "1";
    this.current_panel_index = 0;
    this.element_tag('sitelet close');
    $("radiant_serum_sitelet_page_overlay").fade({duration: this.transition_duration});
    $("radiant_serum_sitelet").fade({duration: this.transition_duration, afterFinish: function() { self.destroy_sitelet(); }});
  }, 
  
  
  destroy_sitelet: function() {
    if ($('radiant_serum_sitelet_page_overlay') !== null) {
      $('radiant_serum_sitelet_page_overlay').remove();
    }
    if ($('radiant_serum_sitelet') !== null) {
      $('radiant_serum_sitelet').remove();
    }
  }, 


  build_panel: function(panel, index) {
    var next_click = "RadiantSerumSitelet.next_panel()";
    if (index === this.content.panels.length-1) {
      next_click = "RadiantSerumSitelet.element_tag('sitelet shop now'); window.open('"+this.content.shopnow_nav_url+"', '_blank');";
    }
    
    $$("#radiant_serum_sitelet .sitelet")[0].insert({bottom: "<div id='radiant_serum_sitelet_panel_"+panel.id+"' class='panel' style='display:none; background-image: url("+this.image_path+"panel_"+panel.id+"_bg.jpg);'><div class='text' onclick=\""+next_click+"\" ><div class='title'>"+panel.title+"</div><div class='subtitle'>"+panel.subtitle+"</div><div class='description'>"+panel.description+"</div></div></div>"});
    
    if (index === this.content.panels.length-1) {
      // Shop now
      $$("#radiant_serum_sitelet_panel_"+panel.id+" .text")[0].insert({bottom: "<a class='shop_now' target='_blank' href='"+this.content.shopnow_nav_url+"' onclick=\"RadiantSerumSitelet.element_tag('pg4_shop now')\" >"+this.content.shopnow_nav_title+"</a>"});
    }
    // Next hotspot
    $$("#radiant_serum_sitelet_panel_"+panel.id)[0].insert({bottom: "<div class='next_hotspot' onclick=\""+next_click+"\" ></div>"});
  },
  
  
  build_navigation: function() {
    // Nav arrows
    $$("#radiant_serum_sitelet")[0].insert({bottom: "<div style='display:none' class='arrow left' onclick=\"RadiantSerumSitelet.prev_panel();\"></div>"}); 
    $$("#radiant_serum_sitelet")[0].insert({bottom: "<div style='display:none' class='arrow right' onclick=\"RadiantSerumSitelet.next_panel();\"></div>"}); 
    
    // Close
    $$("#radiant_serum_sitelet .nav")[0].insert({bottom: "<div class='nav_link close' onclick=\"RadiantSerumSitelet.close_sitelet();\"><img src='/RadiantSerum/images/close.gif' /></div>"});
  },
  
  
  update_navigation: function() {
    if (this.current_panel_index === 0) {
      $$("#radiant_serum_sitelet .arrow.left")[0].fade({duration: this.transition_duration});
      $$("#radiant_serum_sitelet .arrow.right")[0].appear({duration: this.transition_duration});
    } 
    else if (this.current_panel_index === this.content.panels.length - 1) {
      $$("#radiant_serum_sitelet .arrow.right")[0].fade({duration: this.transition_duration});
      $$("#radiant_serum_sitelet .arrow.left")[0].appear({duration: this.transition_duration});
    } else {
      $$("#radiant_serum_sitelet .arrow.right")[0].appear({duration: this.transition_duration});
      $$("#radiant_serum_sitelet .arrow.left")[0].appear({duration: this.transition_duration});
    }
  },
  
  
  prev_panel: function() {
    var index = this.current_panel_index - 1;
    if (index >= 0) {
      this.element_tag(this.content.panels[this.current_panel_index].metrics_tag + 'back'); 
      
      var panel = this.content.panels[index];
      this.show_panel(panel.id);
    }
  },
  
  
  next_panel: function() {
    var index = this.current_panel_index + 1;
    if (index < this.content.panels.length) {
      this.element_tag(this.content.panels[this.current_panel_index].metrics_tag + 'forward');
    
      var panel = this.content.panels[index];
      this.show_panel(panel.id);
    }
  },
  
  
  nav_over: function(current){
    $$('#radiant_serum_sitelet .nav .nav_link').each(function(link, index){
      if ($(current) !== link) {
        link.setStyle("color: #737373");
      }
    });
  },
  
  nav_out: function(current){
    $$('#radiant_serum_sitelet .nav .nav_link').each(function(link, index){
      link.setStyle("color: #fff");
    });
  },
  
  
  build_bottom_bar: function() {
    var bottom_bar_string = "Share This Page <a href='http://www.stumbleupon.com/submit?url=http://www.cremedelamer.com/RadiantSerum/&title=La Mer | Radiant Serum' target='_blank' onClick='RadiantSerumSitelet.element_tag(\"share_stumbleupon\");'><img src='/images/social_network_icons/stumbleupon_16x16.gif' alt='Share on StumbleUpon' width='16' height='16' /></a><a href='http://www.myspace.com/Modules/PostTo/Pages/?l=3&u=http%3A//www.cremedelamer.com/RadiantSerum/&t=La Mer | Radiant Serum&c=' target='_blank' onClick='RadiantSerumSitelet.element_tag(\"share_myspace\");'><img src='/images/social_network_icons/myspace_16x16.gif' alt='Share on MySpace' width='16' height='16' /></a><a href='http://twitter.com/home/?status=http://www.cremedelamer.com/RadiantSerum/' target='_blank' onClick='RadiantSerumSitelet.element_tag(\"share_twitter\");'><img src='/images/social_network_icons/twitter_16x16.gif' alt='Tweet This!' width='16' height='16' /></a><a href='http://www.facebook.com/sharer.php?u=http%3A//www.cremedelamer.com/RadiantSerum/&t=La Mer | Radiant Serum' target='_blank' onClick='RadiantSerumSitelet.element_tag(\"share_fbook\");'><img src='/images/social_network_icons/facebook_16x16.gif' alt='Share on FaceBook' width='16' height='16' /></a>";


    $("radiant_serum_sitelet").down(".bottom_bar").insert({bottom: bottom_bar_string});
  },
  
  
  
  show_panel: function(panel_id) {
    var self = this;
    var panel = this.get_panel_by_id(panel_id);
    
    $$('#radiant_serum_sitelet .panel').each(function(element){
      element.hide({duration: self.transition_duration});
    });
    $("radiant_serum_sitelet_panel_"+panel.id).appear({duration: this.transition_duration});
    
    $("radiant_serum_sitelet_panel_"+panel.id).down(".text").hide().appear({duration: this.transition_duration * 2});
    
    this.current_panel_id = panel.id;
    this.current_panel_index = this.get_panel_index(panel);
    
    this.update_navigation();
  },
  
  
  get_panel_by_id: function(id) {
    var panel;
    this.content.panels.each(function(p){
      if (p.id === id) {
        panel = p;
        throw $break;
      }
    });
    return panel;
  },
  
  
  get_panel_index: function(panel) {
    var panel_index;
    this.content.panels.each(function(p, index){
      if (p.id === panel.id) {
        panel_index = index;
        throw $break;
      }
    });
    return panel_index;
  },


  
  element_tag: function(tag, category) {
    category = category || this.default_category_string;  
    cmCreatePageElementTag(tag, category);
  },


  init: function() {
    if ($("radiant_serum_sitelet") === null) {
      this.build_sitelet();
    }
    $("radiant_serum_sitelet_page_overlay").appear({duration: this.transition_duration});
    $("radiant_serum_sitelet").appear({duration: this.transition_duration});
  }
};