// application.js

var ITEM_ORIGINAL_WIDTH = 97;
var ITEM_TARGET_WIDTH = 385;

Application = {
  
  default_delay : 0,
  
  initialize: function(options) {
    
    this.options = options;
    this.window = document.viewport.getDimensions();

    this.addItemHandlers();
    
    // $$('.notebook').each( function(n, index) { Application.Item.showColorImage(n, Application.default_delay+(index*0.01)) } );
    
    $$('.notebook a').invoke( 'observe', 'mousedown', function(event){ 
        // console.log(event.element().up().up().up().select('.image').first().select('img').first());
        // new Effect.Scale(event.element().up().up().up().select('.image').first(), 300); 
        // new Effect.Scale(event.element().up().up().up().select('.image').first().select('img').first(), 300); 
        // Event.stop(event);
      } );
      
    Application.Utils.preloadImages( [
      'previous.hover.png',
      'next.hover.png',
      'tarakan.header.png',
      'tarakan.logo.png'
    ])
    
    // # Debug
    // console.log(this);
  },
  
  addItemHandlers : function() {
    
    // $$('.notebook').invoke( 'observe', 'mouseover', function(event) { Application.Item.hover(event.element());  } );
    // $$('.notebook').invoke( 'observe', 'mousedown', function(event) { Application.Item.expand(event.element());  } );
    
  },
  
  Item : {
    
    over : function(obj) {
      var o = $(obj);
      o.addClassName('hover');
      if (!obj.expanded) o.select('.border').first().show(); 
      obj.setStyle({zIndex:900});
    },
    
    out : function(obj) {
      var o = $(obj);
      o.removeClassName('hover');
      o.select('.border').first().hide();
      if (!obj.expanded) obj.setStyle({zIndex:null});
    },
    
    toggle : function(obj) {
      if ('undefined' == obj || !$(obj)) return;
      if ( obj.expanded ) {
        this.collapse(obj);
      } else {
        this.expand(obj);
      }
    },
    
    expand : function(obj) {
      if ( this.expanded && $(this.expanded) ) { this.collapse(this.expanded) }
      obj.select('.border').first().hide();
      obj.select('.bg').first().show();
      new Effect.Morph(obj, {style:'width:'+ITEM_TARGET_WIDTH+'px', duration:0.4, afterFinish:Application.Item.afterItemExpanded});
      new Effect.Morph(obj.select('.bg').first(), {style:'width:'+(ITEM_TARGET_WIDTH+10)+'px', duration:0.31});
      obj.setStyle({zIndex:998});
      this.expanded = obj;
      obj.expanded = true;
      // this.showColorImage(obj);
    },
    
    collapse : function(obj) {
      obj.select('.border').first().hide();
      new Effect.Morph(obj, {style:'width:'+ITEM_ORIGINAL_WIDTH+'px', duration:0.4, 
        afterFinish:function(){obj.expanded = false;}});
      new Effect.Morph(obj.select('.bg').first(), {style:'width:'+(ITEM_ORIGINAL_WIDTH+10)+'px', duration:0.31, 
        afterFinish:function(effect){effect.element.hide();}});
      obj.select('.info').first().hide();
      obj.setStyle({zIndex:null});
      obj.expanded = false;
      if (obj == this.expanded) this.expanded = null;
    },
    
    afterItemCollapsed : function(effect) {
    },
    
    afterItemExpanded : function(effect) {
      effect.element.select('.info').first().show();
    },
    
    showColorImage : function(obj, delay) {
      new Effect.Appear( obj.select('img').first(), {duration:0.8, delay:delay} );
    }
    
  },
  
  // --------- Utils --------------------------------------------------------------------
  
  Utils : {
    
    preloadImages : function(images) {
      for( var i=0; i < images.length; i++) { img = new Image(); img.src = '/images/'+images[i]; }
    },
    
    isIE6 : function() { 
      return navigator.appVersion.include('MSIE 6');  
    }
    
  },
    
  closeLightbox: function() { if (typeof myLightbox != 'undefined') { myLightbox.end(); } }
  
};