window.addEvent('domready', function() {
  var wsize = window.getSize();
  wsize.x -= 200;
  
  var img;
  var osize;
  var zoom;
  var ozoom;
  var calculate
  
  
  var loadImg = function(src) {
    img = new Asset.image(src, {
      onload: function() {
        img.fx.start({opacity: 1});
        
        var wratio = wsize.x/wsize.y;
        var iratio = img.width/img.height;
        
        osize = {
          x: img.width,
          y: img.height
        };
        
        if(wratio < iratio) {
          zoom = wsize.y / osize.y * 0.9;
        }
        else {
          zoom = wsize.y / osize.y * 0.9;
        }
        ozoom = zoom;
        
        calculate(true);
        
        this.loaded = true;
      }
    }).inject(area);
    
    
    img.setStyle('opacity', 0);
    img.fx = new Fx.Morph(img, {duration: 400, link: 'cancel'});
    
    calculate = function(set) {
      zoom = zoom.limit(0.1, 1);
      $('zoom-hand').morph({top: zoom*118});
      
      var new_styles = {
        'width': osize.x * zoom,
        'height': osize.y * zoom,
        'margin-left': -osize.x*zoom/2,
        'margin-top': -osize.y*zoom/2
      };
      
      if(set) {
        img.fx.set(new_styles);
      }
      else {
        img.fx.start(new_styles);
      }
    };
    
  };
  
  
  var area = $('area');
  area.setStyles({
    width: wsize.x,
    height: wsize.y
  });


  var pages = $$('#pages li');
  
  pages.addEvent('click', function() {
    pages.removeClass('selected');
    this.addClass('selected');
    
    area.empty().morph({left: 200, top: 0});
    
    loadImg(this.get('rel'));
  });
  
  if($('pages').getElement('li.selected')) {
    $('pages').getElement('li.selected').fireEvent('click');
  }
  else {
    pages[0].fireEvent('click');
  }
  
  
  var scrolling = false;
  var startpos;
  
  $('click-getter').addEvents({
    'mousedown': function(e) {
      scrolling = true;
      startpos = e.client;
      
      startpos.x -= area.getStyle('left').toInt();
      startpos.y -= area.getStyle('top').toInt();
    }
  });
  
  $(document.body).addEvents({
    'mousemove': function(e) {
      if(scrolling) {
        area.setStyles({
          left: e.client.x - startpos.x,
          top: e.client.y - startpos.y
        });
      }
    },
    'mouseup': function(e) {
      scrolling = false;
      
      if(zoom <= ozoom) {
        area.morph({left: 200, top: 0});
      }
    }
  });

  $('click-getter').addEvent('mousewheel', function(e) {
    zoom += (e.wheel / 4);
    
    calculate();
  });
  
  window.addEvent('mouseout', function() {
    scrolling = false;
  }).addEvent('resize', function() {
    wsize = window.getSize();
    wsize.x -= 200;
    
    area.setStyles({
      width: wsize.x,
      height: wsize.y
    });
  });
  
  
  
  $('zoom-hand').makeDraggable({
    modifiers: {x: false},
    limit: {y: [0, 118]},
    onComplete: function(e) {
      zoom = e.getStyle('top').toInt() / 118;
      
      calculate();
    }
  });
  
  $('zoom-minus').addEvent('click', function() {
    zoom -= 0.25;
    calculate();
  });
  $('zoom-plus').addEvent('click', function() {
    zoom += 0.25;
    calculate();
  });
});