/*
---
script: ElementStacks.js
decription: ElementStacks stacks elements/images on top of each other with a funky transition
license: MIT-style license.
authors:
 - Oskar Krawczyk (http://nouincolor.com/)
requires: 
  core:1.2.3: 
  - Class.Extras
  - Array
  - Function
  - Event
  - Element.Style
  - Element.Dimensions
  - Fx.Morph
  - Fx.Transitions
provides: [ElementStacks]
...
*/

var ElementStacks = new Class({
	
    Implements: [Options],
    
    options: {
        rotationDeg: 20,
        delay: 40,
        duration: 450,
        transition: 'back:out'
    },
    
    initialize: function(selector, wrapper, options){
        this.setOptions(options);
        this.pos, this.collapsed, this.wrapper = wrapper, this.stackItems = selector
        
        this.setDefaults();
        this.reStack(this.stackItems, 'in');
        this.collapsed = true;
        this.currentWrapper = null;
    },
    
    setDefaults: function(){
        this.stackItems.each(function(stackItem){
            this.pos = stackItem.getPosition(this.wrapper);

            stackItem.store('default:coords', this.pos);
        
            stackItem.set('styles', {
                top: this.pos.y,
                left: this.pos.x
            });
    
            stackItem.set('morph', {
                transition: this.options.transition,
                duration: this.options.duration
            });

            // MooTools bug (?)
            (function(){
                this.setStyle('position', 'absolute');
            }).delay(1, stackItem);
        }, this);
        
        this.attachActions();
    },
    
    reStack: function(els, mode){
        var that = this;
        var isCollapsed = this.collapsed;
        
        els.each(function(stackItem, i){(function(){
          var el = this;
          var rand = (mode === 'in' ? $random(-that.options.rotationDeg, that.options.rotationDeg) : 0);
          
          this.set('styles', {
            '-webkit-transform': 'rotate(' + rand + 'deg)',
            '-moz-transform': 'rotate(' + rand + 'deg)'
          });
          
          var centerX = (jQuery(that.wrapper).width()/2) - jQuery(this).width()/2;
          
          if(isCollapsed) this.morph({
              top: el.retrieve('default:coords').y + rand,
              left: el.retrieve('default:coords').x + rand
            });                  
          else  this.morph({
              top: 80 + $random(-10, 10),
              left: centerX + $random(-10, 10),
            });
          
            
          if (mode === 'in'){ el.setStyle('z-index', 100 + $random(-10,10));}
          else {
            (function(){
              els.setStyle('z-index', 10);
            }).delay(that.options.delay * (els.length * 2));
          }
        }).delay(that.options.delay * i, stackItem);
      });
    },

    attachActions: function(){
      var self = this;
      var interval = null;
      
      function getWrapper(e){
        if( e.target.className == "wrapper" ) return e.target;
        return jQuery(e.target).parent(".wrapper").get(0);
      }
            
      function open(e){
        if( self.collapsed ){
          self.reStack(self.stackItems);
          self.collapsed = false;   
          //jQuery(self.wrapper).find("h1").animate({top: "-=60px"});
        }
      }
      
      function inFuzzyBox(e, w){
        w = jQuery(w);
        return w.offset().left - e.pageX > 0 ||
               e.pageX - (w.offset().left+w.width()) > 0 ||
               w.offset().top - e.pageY > 0 ||
               e.pageY - (w.offset().top+w.height()) > 0
      }
      
      function close(e){
       if( !inFuzzyBox(e, getWrapper(e)) ) return;
       //jQuery(self.wrapper).find("h1").animate({top: "+=60px"});
        
        if( !self.collapsed ){
          self.reStack(self.stackItems, "in");
          self.collapsed = true;          
        }
      }
      
      function onHover(e){        
        jQuery(e.target).css({
          "-webkit-box-shadow": "0 0 10px rgba(0,0,0,.8)",
          "-moz-box-shadow"   : "0 0 10px rgba(0,0,0,.8)"
        });
      }
      
      function offHover(e){
        jQuery(e.target).css({
          "-webkit-box-shadow": "0 0 5px rgba(0,0,0,.5)",
          "-moz-box-shadow"   : "0 0 5px rgba(0,0,0,.5)"
        });
      }
      
      
      jQuery(this.wrapper).mouseover(open);
      jQuery(this.wrapper).mouseout(close);

      jQuery(this.stackItems).hover(onHover, offHover);
      jQuery(this.stackItems).click(zoom);
    }
});


function zoom(e){
  var el = jQuery(e.target);
  var a = jQuery("<a/>")
    .addClass("zoom")
    .attr("href", el.attr("src").replace(/_s/, ""))
    
  el.wrap(a);
  a.fancybox({
    'zoomSpeedIn'		:	250,
		'zoomSpeedOut'		:	250,
		'overlayOpacity'  : .8,
		'overlayColor': "#FFFFFF",
		'showCloseButton': true
  });
  a.click();
  return false;
}