/* *************************************************************************************** *\
** Mooverview                                                                 v1.0 alpha 1 **
** http://code.colinaarts.com/mooverview/                                                  **
**                                                                                         **
** Copyright (c) 2010, Colin Aarts <http://colinaarts.com>                                 **
** Licensed under the MIT License                                                          **
** *************************************************************************************** **
**                                                                                         **
** This class creates an overview of the current page in a fixed positioned sidebar.       **
** Requires MooTools Core 1.2.x, MooTools More `URI`                                       **
**                                                                                         **
** *************************************************************************************** **
**                                                                                         **
** Arguments:                                                                              **
**            options : an options object (see below)                                      **
**                                                                                         **
** *************************************************************************************** **
**                                                                                         **
** Options:                                                                                **
**                 id : String (default: `mooverview`)                                     **
**                    ? id attribute value for the Mooverview container                    **
**           autoshow : Boolean (default: true)                                            **
**                    ? If false, you will need to call the `show` or `toggle` method      **
**                    ? to make it show up (in response to a user action, for example)     **
**                                                                                         **
** *************************************************************************************** **
**                                                                                         **
** Public methods:                                                                         **
**               show : shows the sidebar                                                  **
**               hide : hides the sidebar                                                  **
**             toggle : toggles sidebar visibility                                         **
**                                                                                         **
\* *************************************************************************************** */

var Mooverview = new Class({
  
  Implements: [Options],
  
  options: {
    id       : 'mooverview',
    autoshow : true
  },
  
  initialize: function(options) {
    
    this.setOptions(options);
    
    var qs  = new URI(location.toString());
    var src = qs.set('query', qs.get('query') + '&overview=true').toString();
    
    this.win      = {};
    this.overview = new IFrame(null, { id: this.options.id, src: src });
    var overlay   = new Element('div', { 'class': 'overlay' });
    var rect      = new Element('div', { 'class': 'rect' });
    var scale     = 1;
    var that      = this;
    
    this.overview.set('slide', { mode: 'horizontal' });
    this.overview.inject(document.body);
    this.overview.slide('hide');
    
    this.overview.addEvent('load', function(e) {
      
      if(that.options.autoshow === true) {
        that.overview.slide('in');
      }
      
      that.overview.win  = that.overview.contentWindow;
      that.overview.doc  = that.overview.contentDocument;
      that.overview.html = that.overview.contentDocument.documentElement;
      that.overview.body = that.overview.doc.getElement('body');
      that.overview.size = that.overview.win.getSize().x;
      that.overview.w    = that.overview.win.getScrollSize().x;
      that.overview.h    = that.overview.win.getSize().y;
      that.overview.sw   = that.overview.win.getScrollSize().x;
      that.overview.sh   = that.overview.win.getScrollSize().y;
      that.win.w         = window.getSize().x;
      that.win.h         = window.getSize().y;
      
      scale = that.overview.size / that.overview.w;
      
      overlay.setStyles({
        'width'  : that.overview.sw + 'px',
        'height' : that.overview.sh + 'px'
      });
      
      overlay.inject(that.overview.body);
      rect.inject(overlay);
      
      rect.setStyles({
        'border-width' : parseInt(rect.getStyle('border-top-width'), 10) / scale + 'px ' +
                         parseInt(rect.getStyle('border-left-width'), 10) / scale + 'px'
      });
      
      rect.setStyles({
        'width'  : that.win.w - 2 * parseInt(rect.getStyle('border-left-width'), 10) + 'px',
        'height' : that.win.h - 2 * parseInt(rect.getStyle('border-top-width'), 10) + 'px',
        'top'    : window.getScroll().y + 'px'
      });
      
      that.overview.html.setStyles({
        'transform'                : 'scale(' + scale + ')',
        '-o-transform'             : 'scale(' + scale + ')',
        '-moz-transform'           : 'scale(' + scale + ')',
        '-webkit-transform'        : 'scale(' + scale + ')',
        'transform-origin'         : '0 0',
        '-o-transform-origin'      : '0 0',
        '-moz-transform-origin'    : '0 0',
        '-webkit-transform-origin' : '0 0',
        'visibility'               : 'visible'
      });
            
      that.overview.win.addEvent('click', function(e) {
        
        var x = ((e.page.x) / scale) - (rect.getSize().x / 2);
        var y = ((e.page.y) / scale) - (rect.getSize().y / 2);
        window.scrollTo(x, y);
        
      });
      
    }); // end overview.addEvent('load')
    
    window.addEvent('scroll', function(e) {
      
      rect.setStyle('left', window.getScroll().x + 'px');
      rect.setStyle('top', window.getScroll().y + 'px');
      rect.w = (rect.getSize().x / 2) + parseInt(rect.getStyle('left'), 10);
      rect.h = (rect.getSize().y / 2) + parseInt(rect.getStyle('top'), 10);
      that.overview.win.scrollTo((rect.w / 2 - that.overview.w) * scale, (rect.h / 2 - that.overview.h) * scale);
      
    }); // end window.addevent('scroll')
    
  }, // end initialize
  
  show: function() {
    this.overview.slide('in');
  },
  
  hide: function() {
    this.overview.slide('out');
  },
  
  toggle: function() {
    this.overview.slide('toggle');
  }
  
});

/* *************************************************************************************** *\
** end Mooverview class                                                                    **
\* *************************************************************************************** */