/*  Promo Bar
 *  Enable image switch onhover for li's in promo-bar
 */
var PromoBar = Class.create({
  timeTillHide: 500,

  initialize: function(id, contents) {
    // loop through all a elements in the promo bar, append events on them, then preload images
    this.preloadImages = [];

    for (var i = 0; i < contents.length; i++) {
      if (contents[i].length == 3) {
        var aElm = $$('#' + id + ' a.' + contents[i][0])[0];
        aElm.onmouseover = aElm.onfocus = this.displayDetails.bindAsEventListener(this);
        aElm.onmouseout = aElm.onblur = this.hideDetails.bindAsEventListener(this);
        aElm.setAttribute('call2actionid', i);

        this.preloadImages[i] = new Image();
        this.preloadImages[i].src = contents[i][1];
      }
    }

    // constants
    this.call2actionContents = contents;
    this.call2actionElm = $('call2action');
    this.call2actionDetails = new Element('em', {id: 'call2actionDetails', style: "display:none"});
    this.call2actionElm.appendChild(this.call2actionDetails);
  },

  displayDetails: function(e) {
    var id = Event.element(e).getAttribute('call2actionid');
    this.call2actionDetails.style.backgroundImage = 'url(' + this.call2actionContents[id][1] + ')';
    new Effect.Appear(this.call2actionDetails, {duration: 0.2});
  },

  hideDetails: function(e) {
    this.call2actionDetails.style.display = "none";
  }
});

document.observe('dom:loaded', function(){
  if ($('promo')) {
    new PromoBar('promo', [
     ['track', '/images/promo_track_blend.png', 'How productive are you?<br>Know what you use and for how long'],
     ['discover', '/images/promo_discover_blend.png', 'Our engine recommends you the best apps<br /> by looking at your day-to-day usage'],
     ['share', '/images/promo_share_blend.png', 'Make a widget for your site or forum<br /> and let everybody know what you love'],
     ['updates', '/images/promo_updates_blend.png', 'What are your buddies or colleagues using?<br /> Games? Coding tools? Now you know']
    ]);
  }
});