/* -----------------------------------------------------------------------------
* dropdown.js
* Copyright 2010 wollzelle GmbH (http://wollzelle.com). All rights reserved.
* ------------------------------------------------------------------------------ */

/**
 * class Dropdown < Class
 *  
 *  Implements iPad-style dropdaown with ajax-loaded content.
 *  Takes link element as a main argument and parses it to find URL.
 * 
 **/
(function(){

  var $ = document.id;
  
  window.Dropdown = new Class({
  
    Implements: [Options, Events, Class.Occlude],
  
    options: {
      position: { x: 0, y: 0 },
      orientation: 'top'
    },
  
    property: 'dropdown',
  
    initialize: function(element, options){
      this.element = $(element);
      this.setOptions(options);
    
      if(this.occlude()) 
        return this.occluded;
      else {
        this.build();
        return this;
      } 
    },
  
    build: function(){
      this.dropdown = new Element('div', { 'class': 'dropdown' }).set('html', '<div class="dropdown-wrap"><p class="dropdown-loading">Loading...</p></div>');
    
      var arrowHTML = new Element('div', { 'class': 'b-arr' });
      arrowHTML.set('html', '<b class="a1"></b><b class="a2"></b><b class="a3"></b><b class="a4"></b><b class="a5"></b><b class="a6"></b>');
      arrowHTML.inject(this.dropdown, 'bottom');
    
      this.dropdown.getElement('.dropdown-wrap').set('load', {
        evalScripts: true,
        onSuccess: function(){
          this.dropdown.removeClass('loading');
        }.bind(this)
      });
    
      this.dropdown.inject(document.body, 'top');
    },
  
    update: function(link){
      var linkSize = link.getSize();
      var linkPos = link.getPosition();
      var viewport = document.getSize();
      var ddWidth = this.dropdown.measure(function(){ return this.getSize() }).x;
      var position = {};
    
      position.x = linkPos.x + (linkSize.x / 2) >> 0;
    
      if(linkPos.y > viewport.y * 0.66) {
        position.y = viewport.y - linkPos.y;
      
        this.dropdown.setStyles({
          'top': 'auto',
          'bottom': position.y
        }).removeClass('l-top').addClass('l-bottom');
      
      } else {
        position.y = linkPos.y + linkSize.y;
        this.dropdown.setStyles({
          'top': position.y,
          'bottom': 'auto'
        }).removeClass('l-bottom').addClass('l-top');
      }
    
      if((position.x - ddWidth/2) <= 0) {
        this.dropdown.removeClass('l-right').addClass('l-left');
        position.x = position.x + ddWidth/2 - 14;
      } else if((position.x + ddWidth/2) >= viewport.x) {
        this.dropdown.removeClass('l-left').addClass('l-right');
        position.x = position.x - ddWidth/2 + 14;
      } else {
        this.dropdown.removeClass('l-left').removeClass('l-right');
      }
    
      this.dropdown.setStyles({
        'display': 'block',
        'left': position.x
      });
    },
  
    open: function(link){
      this.reset();
      this.update(link);
    
      // if(typeof console != 'undefined'){console.log(this.dropdown)};
      this.dropdown.getElement('.dropdown-wrap').load(link.href);
    },
  
    close: function(){
      this.dropdown.setStyle('display', 'none');
    },
  
    reset: function(){
      this.dropdown.addClass('loading');
      this.dropdown.getElement('.dropdown-wrap').set('html', '<p class="dropdown-loading">Loading...</p>');
    },
  
    destroy: function(){
      this.close();
      this.dropdown.destroy();
    }
  
  });
})();