/* title: pics.js
   author: Jeffrey David Allen
   Another Object Oriented JavaScript Application
   Utilizing "My Object Oriented Tools", http://mootools.net
   Copyright (C) 2010 JDAllen.net
*/
var PicsApp = new Class({
  initialize: function(options) {
    this.options = options;
    this.fullSizeImages = [];
    this.createEffects();
  },
  debug: function(obj) {
    var console = window.console || Window.console;
    if (console && console.debug) {
      console.debug(obj);
    }
  },
  createEffects: function() {
    var app = this;
    var imgs = $$('img.' + app.options.cssMarker);
    var expand = app.expand.bind(app);
    app.thumbOnClick = function(){ expand(this); }
    var thumbCss = app.options.thumbPicCss;
    var largeCss = app.options.largePicCss;
    imgs.each(function(thumb, index){
      var src = thumb.src;
      var fullSizeImg = app.fullSizeImages[src];
      if (!fullSizeImg) {
        fullSizeImg = new Element('img', {
          'src': thumb.src.replace(/_thumb/, ''),
          'class': largeCss,
          'styles': {
            'cursor': 'pointer',
            'padding': thumb.getStyle('padding')
          }
        });
        app.fullSizeImages[src] = fullSizeImg;
      }
      thumb.addClass(thumbCss);
      thumb.addEvent('click', app.thumbOnClick);
    });
  },
  expand: function(thumb, event) {
    var app = this;
    thumb.removeEvent('click', app.thumbOnClick);
    thumb.removeClass(app.options.thumbPicCss);
    var shrink = app.shrink.bind(app);
    var src = thumb.src;
    var fullSizeImg = app.fullSizeImages[src].clone();
    var height = fullSizeImg.getStyle('height') || fullSizeImg.height;
    var width = fullSizeImg.getStyle('width') || fullSizeImg.width;
    var imgFx = new Fx.Morph(fullSizeImg, {
      duration: app.options.fxDuration, 
      transition: app.options.fxTransition
    });
    var pad = app.getPadAdjust(thumb);
    var coords = thumb.getCoordinates();
    var winSize = Window.getSize();
    var winScroll = window.getScroll();
    var endX = (winScroll.x + ((winSize.x - width) / 2)).toInt();
    var endY = (winScroll.y + ((winSize.y - height) / 2)).toInt();
    fullSizeImg.setStyle('width', coords.width - pad);
    fullSizeImg.setStyle('height', coords.height - pad);
    fullSizeImg.setStyle('left', coords.left);
    fullSizeImg.setStyle('top', coords.top);
    fullSizeImg.set('title', thumb.title);
    fullSizeImg.addEvent('click', function(event){
      shrink(imgFx, thumb);
    });
    var animation = {
      'height': [coords.height - pad,height],
      'width': [coords.width - pad,width],
      'left':  [coords.left,endX],
      'top': [coords.top,endY]
    };
    fullSizeImg.inject(document.body, 'top');
    imgFx.start(animation);
  },
  shrink: function(imgFx, thumb) {
    var app = this;
    var coords = thumb.getCoordinates();
    var pad = app.getPadAdjust(thumb);
    var animation = {
      'height': coords.height - pad,
      'width': coords.width - pad,
      'left':  coords.left,
      'top': coords.top
    };
    imgFx.addEvent('complete', function(event) {
      var el = this.element.dispose();
      el.destroy();
      thumb.addClass(app.options.thumbPicCss);
      thumb.addEvent('click', app.thumbOnClick);
    });
    imgFx.start(animation);
  },
  getPadAdjust: function(el) {
    return el.getStyle('padding').toInt() * 2;
  }
});

var picsAppInstance;
Window.onDomReady = window.addEvent('domready', function() {
  startPicsAppInstance.delay(100);
});
function startPicsAppInstance() {
  picsAppInstance = new PicsApp({
    'cssMarker': 'pic',
    'thumbPicCss': 'img-thumb',
    'largePicCss': 'fullSizePic light-gradient corners shadow',
    'fxDuration': 500,
    'fxTransition': Fx.Transitions.Sine.easeOut
  });
}