/**
 * ZoomBox 1.2
 * 
 * Copyright (C) 2009 Andy Chentsov <chentsov@gmail.com> 
 */

var ZoomBox = new Class({

  Implements: Options,
  
  Binds: ['open', 'close', 'zoomIn', 'showImage', 'prev', 'next'],

  options: {
    topOffset: 65,
    initWidth: 350,
    initHeight: 350,
    overlayOpacity: 0.8,
    showCaption: false,
    captionMinHeight: 65,
    hideTags: true,
    uncoverableTags: ['object', 'embed']
  },

  initialize: function(options) {
    this.setOptions(options);
    this.current_image = 0;
    this.current_gallery = 0;
    this.galleries = [];
    this.box = null;
    this.overlay = null;
    this.uncoverableTags = [];
    
    this.scrollTop = window.getScroll().y;
    
    this.families = [];
    this.zoombox_a = [];
    
    this.collect();
  },
  
  collect: function() {
    //var families = this.families;
    var families = [];
    var zoombox_a = [];
    this.galleries = [];
    
    this.current_image = 0;
    this.current_gallery = 0;

    // remove old handlers
    this.zoombox_a.each(function(a) {
      a.removeEvent('click', a.retrieve('zoombox'));
    });

    $$('a').each(function(a) {
      // test 'zoombox' and link extension, and collect all zoombox links
      if (a.rel && a.rel.test(/^zoombox/i) && a.href.split('?')[0].test(/\.(gif|jpg|png)$/i)) {
        if (a.rel.length > 7 && !families.contains(a.rel)) families.push(a.rel);
        if (!this.zoombox_a.contains(a)) zoombox_a.push(a);
      }
    }, this);
    
    this.families = families;
    this.zoombox_a = zoombox_a;
    
    // create an array of arras with all galleries
    zoombox_a.each(function(a) {
      if (a.rel.length > 7) {
        families.each(function(f, i) {
          if (a.rel == f) {
            if (!this.galleries[i]) this.galleries[i] = [];
            this.galleries[i].push($(a));
          };
        }, this);
      } else {
        this.galleries.push([$(a)]);
      }
      a.store('zoombox', this.open.bindWithEvent(this, a));
      a.addEvent('click', a.retrieve('zoombox'));
    }, this);
  },
  
  add: function(a) {
    a = $(a);
    if (!a) return;
    // test 'zoombox' and link extension, and collect all zoombox links
    if (a.rel && a.rel.test(/^zoombox/i) && a.href.split('?')[0].test(/\.(gif|jpg|png)$/i)) {
      if (a.rel.length > 7 && !this.families.contains(a.rel)) this.families.push(a.rel);
      if (!this.zoombox_a.contains(a)) {
        this.zoombox_a.push(a);

        if (a.rel.length > 7) {
          this.families.each(function(f, i) {
            if (a.rel == f) {
              if (!this.galleries[i]) this.galleries[i] = [];
              this.galleries[i].push($(a));
            };
          }, this);
        } else {
          this.galleries.push([$(a)]);
        }
        a.store('zoombox', this.open.bindWithEvent(this, a));
        a.addEvent('click', a.retrieve('zoombox'));
      }
    }
  },
  
  open: function(event, a) {
    if (!a) {
      a = event;
    } else {
      event.stop();
    }
    
    if (a && $type(a) == 'element') {
      a.blur();
    }
    
    this.galleries.each(function(gallery, idx) {
      /*var i = gallery.indexOf(a);
      if (i != -1) {
        this.current_gallery = idx;
        this.current_image = i;
      }*/
      gallery.each(function(anchor, i) {
        if (anchor.href == a.href) {
          this.current_gallery = idx;
          this.current_image = i;
        }
      }.bind(this));
    }.bind(this));
    
    this.build();

    if (this.options.hideTags) {
      this.uncoverableTags = $$(this.options.uncoverableTags);
      if (this.uncoverableTags.length != 0) this.uncoverableTags.each(function(el) { el.style.visibility = 'hidden'; });
    }

    this.scrollTop = window.getScroll().y;

    var wsize = window.getSize();
    this.box.setStyles({
      'left': (wsize.x - this.options.initWidth) / 2,
      'top': this.scrollTop + (wsize.y - this.options.initHeight) / 2,
      'width': this.options.initWidth,
      'height': this.options.initHeight
    });
    this.image_box.setStyles({
      'width': this.options.initWidth,
      'height': this.options.initHeight
    });

    this.prev_img.setStyle('opacity', 0);
    this.prev_btn.setStyle('display', 'none');
    this.next_img.setStyle('opacity', 0);
    this.next_btn.setStyle('display', 'none');
    //this.close_btn.setStyle('opacity', 0);

    this.overlay.setStyles({
      'display': 'block',
      'opacity': 0
    });
    this.overlay.set('tween', {}).tween('opacity', this.options.overlayOpacity).pin();
    
    var caption_display = this.caption.retrieve('caption-display', null);
    if (!caption_display) {
      this.caption.store('caption-display', this.caption.getStyle('display'));
    }
    this.caption.setStyles({
      'display': 'none'
    });
    
    this.load(a);
    
    $(document.body).addEvent('keyescape', this.close);
  },

  load: function(a) {
    var url = a.href;
    if (this.options.showCaption) {
      //this.image.store('caption', a.title);
      this.captionText = a.title;
    }
    this.image_box.setStyle('visibility', 'hidden').setStyle('opacity', 0.01);
    this.box.setStyle('display', 'block');
    
    if (this.options.showCaption) {
      this.caption.set('tween', {duration: 120}).tween('opacity', 0);
    }
    
    this.prev_img.tween('opacity', 0);
    this.prev_btn.setStyle('display', 'none');
    this.next_img.tween('opacity', 0);
    this.next_btn.setStyle('display', 'none');
    this.image_box.tween('opacity', 0);
    this.box.addClass('zoombox-loading').set('tween', {
      onComplete: function() {
        this.prepareLoad(url);
      }.bind(this)
    }).tween('opacity', 1);
  },
  
  close: function() {
    this.box.set('tween', {
      duration: 300,
      onComplete: function() {
        this.box.setStyle('display', 'none');
      }.bind(this)
    }).tween('opacity', 0);

    this.overlay.unpin(false).set('tween', {
      onComplete: function() {
        this.overlay.setStyle('display', 'none');
        
        if (this.uncoverableTags.length != 0) this.uncoverableTags.each(function(el) { el.style.visibility = 'visible'; });
      }.bind(this)
    }).tween('opacity', 0);
    
    $(document.body).removeEvent('keyescape', this.close);
  },

  prepareLoad: function(url) {
    // Recreate img tag to reset dimensions
    if (this.image) this.image.destroy();
    this.image = new Element('img').addEvent('load', this.zoomIn).inject(this.image_box, 'inside');
    
    this.image.src = url;
  },
 
  build: function() {
    if (this.box) return;
    
    if (!this.overlay) {
      this.overlay = new Element('div').
        setStyle('display', 'none').
        addClass('overlay').addClass('zoombox-overlay').
        injectInside(document.body).
        setStyle('cursor', 'pointer').
        addEvent('click', this.close);
    }

    this.box = new Element('div').addClass('zoombox').injectInside(document.body).adopt(
      this.image_box = new Element('div', {'align': 'center'}).addClass('zoombox-image-wrapper').setStyle('overflow', 'hidden').adopt(
        this.image = new Element('img').addEvent('load', this.zoomIn)
      ),
      this.prev_img = new Element('div').addClass('prev_btn').setStyle('opacity', 0),
      this.next_img = new Element('div').addClass('next_btn').setStyle('opacity', 0),
      this.prev_btn = new Element('div').addClass('prev_zone').setStyle('display', 'none').addEvent('click', this.prev).set('html', '&nbsp;'),
      this.next_btn = new Element('div').addClass('next_zone').setStyle('display', 'none').addEvent('click', this.next).set('html', '&nbsp;'),
      this.close_btn = new Element('div').addClass('close_btn')./*setStyle('opacity', 0).*/addEvent('click', this.close).set('html', '&nbsp;')
    ).setStyles({
      'position': 'absolute',
      'display': 'block',
      'opacity': 0
    });
    
    if (this.options.showCaption) {
      this.caption = new Element('div').addClass('caption').injectInside(this.box);      
    }
    
    this.box_fx = new Fx.Morph(this.box, {duration: 200}).addEvent('onComplete', this.showImage);
    this.image_box_fx = new Fx.Morph(this.image_box, {duration: 200}).addEvent('onComplete', this.showImage);
  },
  
  zoomIn: function() {
    this.box.removeClass('zoombox-loading');
    
    var wsize = window.getSize();
    var width = this.image.width +
      this.image.getStyle('margin-left').toInt() + this.image.getStyle('margin-right').toInt() +
      this.image.getStyle('border-left-width').toInt() + this.image.getStyle('border-right-width').toInt();
    var height = this.image.height +
      this.image.getStyle('margin-top').toInt() + this.image.getStyle('margin-bottom').toInt() +
      this.image.getStyle('border-bottom-width').toInt() + this.image.getStyle('border-bottom-width').toInt();
    
    // zoom
    var y = this.scrollTop + (wsize.y - (height + ((this.options.showCaption && this.captionText.trim() != '') ? this.options.captionMinHeight : 0))) / 2;
    if (y < this.options.topOffset) y = this.options.topOffset;
    this.box_fx.start({
      'left': (wsize.x - width) / 2,
      'top': y,
      'width': width,
      'height': height
    });
    this.image_box_fx.start({
      'width': width,
      'height': height
    });
    
    if (this.current_image > 0) {
      this.prev_img.tween('opacity', 1);
      this.prev_btn.setStyle('display', 'block');
    }
    if (this.galleries[this.current_gallery] && this.current_image < (this.galleries[this.current_gallery].length - 1)) {
      this.next_img.tween('opacity', 1);
      this.next_btn.setStyle('display', 'block');
    }
    this.close_btn.tween('opacity', 1);
  },
  
  showImage: function() {
    if (this.options.showCaption) {
      var caption = this.captionText;//this.image.retrieve('caption');
      if (caption) {
        this.caption.set('html', caption);
        this.caption.setStyles({
          'display': this.caption.retrieve('caption-display', 'block'),
          'visibility': 'visible',
          'opacity': 0
        }).set('tween', {duration: 150}).tween('opacity', 1);
      }
    }
    this.image_box.setStyles({
      'display': 'block', // Safari workaround
      'visibility': 'visible',
      'opacity': 0
    }).tween('opacity', 1);
  },
  
  prev: function() {
    if (this.current_image <= 0) return;
    this.current_image--;
    try {
      this.load(this.galleries[this.current_gallery][this.current_image]);
    } catch(e) {
      if (console) console.log(e);
    }
  },
  
  next: function() {
    if (this.current_image >= this.galleries[this.current_gallery].length) return;
    this.current_image++;
    try {
      this.load(this.galleries[this.current_gallery][this.current_image]);
    } catch(e) {
      if (console) console.log(e);
    }
  }
  
});

var zoombox;
window.addEvent('domready', function() {
  zoombox = new ZoomBox({showCaption: true, overlayOpacity: 0.5});  
});

var PhotoScroll = new Class({

  Implements: [Options, Events],

  options: {
    step: 25
  },
  
  initialize: function(el, options) {
    this.setOptions(options);
    this.element = $(el);
    this.bounds = this.element.getCoordinates();
    this.strip = this.element.getFirst();

    this.element.addEvent('mousewheel', this.scroll.bindWithEvent(this));

    this.thumbs_loaded = 0;
    this.strip.getChildren().each(function(el) {
      var img = el.getElement('img');
      if (!img) return;
      if (!img.complete) {
        img.addEvent('load', this.thumb_loaded.bind(this, img));
      } else {
        this.thumb_loaded(img);
      }
      
      el.addEvent('click', function(event) {
        event.stop();
        el.blur();
        this.set_current(el);
      }.bind(this));
    }.bind(this));

    this.current = this.strip.getElement('.active');
    if (!this.current) {
      this.current = (this.strip.length > 0) ? this.strip.getFirst() : null;
      if (this.current) this.current.addClass('active');
    }

  },

  thumb_loaded: function(img) {
    this.thumbs_loaded++;
    
    if (this.thumbs_loaded == this.strip.getChildren().length) {
      this.strip.setStyle('width', this.strip.getChildren().sum(function(el) { return el.dimensions(true).width; }));
    }
  },

  scroll: function (event) {
    event.stop();
    var step = Browser.Engine.webkit ? (this.options.step / Math.abs(event.wheel)) : this.options.step;
    var value = this.strip.getStyle('margin-left').toInt() + (event.wheel * step);
    if ((this.strip.offsetWidth + value) <= this.element.offsetWidth) value = -(this.strip.offsetWidth - this.element.offsetWidth);
    if (value > 0) value = 0;
    this.strip.setStyle('margin-left', value);
  },
  
  prev: function() {
    if (!this.current) return;
    var el = this.current.getPrevious();
    if (!el) return;
    this.set_current(el);
    //this.update_arrows();
  },
  
  next: function() {
    if (!this.current) return;
    var el = this.current.getNext();
    if (!el) return;
    this.set_current(el);
    //this.update_arrows();
  },

  set_current: function(el) {
    this.strip.getChildren().removeClass('active');
    el.addClass('active');
    this.current = el;
    this.fireEvent('select', [el.href, el]);
    this.scroll_to_current();
  },

  scroll_to_current: function() {
    if (!this.current) return;

    var curr_value = this.strip.getStyle('margin-left').toInt();
    var value = false;
    var curr_bounds = this.current.getCoordinates();
    if (curr_bounds.left < this.bounds.left) {
      value = curr_value + (this.bounds.left - curr_bounds.left);
    } else if (curr_bounds.right > this.bounds.right) {
      value = curr_value - (curr_bounds.right - this.bounds.right);
    }
    
    if (value === false) return;
    
    // Setup scroll effects
    if (!this.scroll_fx) {
      this.scroll_fx = new Fx.Tween(this.strip, {
        diration: this.options.duration,
        link: 'cancel'
      });
    }
    
    this.scroll_fx.start('margin-left', value);
  }

});

var PhotoGallery = new Class({

  Implements: [Chain],

  initialize: function(el, photostrip) {
    this.photostrip = photostrip;
    this.element = $(el);
    this.strip = $('photo-strip');
    this.slide = $('photo-strip').getParent();
    this.loading = {};
    
    this.placeholder = new Element('div').
      setStyle('display', 'none').
      inject('photo-view', 'inside');
  },

  show: function() {
    if (!this.element) return this;
    this.element.setStyles({
      'opacity': 0.01,
      'visibility': 'visible'
    }).set('tween', {}).tween('opacity', 1);
    return this;
  },
  
  hide: function() {
    if (!this.element) return this;
    this.element.set('tween', {
      duration: 150,
      onComplete: function() {
        this.element.setStyles({
          'opacity': 1,
          'visibility': 'hidden'
        });
        this.callChain();
      }.bind(this)
    }).tween('opacity', 0);
    return this;
  },
  
  load: function(url, a) {
    if (this.element.src == a) return;
    
    this.reset();
    this.loading = {
      url: url,
      anchor: a,
      title: a.title
    };
    
    $('photo-title').set('text', ' ');
    this.setNum(a);
    
    this.hide().chain(this.load_now.bind(this, [url, a]));
  },
  
  load_now: function(url, a) {
    this.placeholder.setStyles({
      'display': 'block',
      'width': Math.max(this.element.width, 500),
      'height': Math.max(this.element.height, 300)
    });
    if (this.element) this.element.destroy();
    
    this.loading.timer = (function() {
      $('photo-view').addClass('photo-view-loading');
    }).delay(400);
    
    this.loading.img = new Image();
    this.loading.img.onload = this.loaded.bind(this, [a]);
    this.loading.img.src = url;
  },
  
  setNum: function(a) {
    var num = 0;
    this.photostrip.strip.getChildren().every(function(anchor, idx) {
      if (anchor.href == a.href) {
        num = idx;
        return false;
      }
      return true;
    });
    $('photo-num').set('text', num + 1);
  },
  
  loaded: function(a) {
    if (!this.loading.img) return;
    var self = this;
    $clear(self.loading.timer);
    $('photo-view').removeClass('photo-view-loading');

    //$('photo-title').set('text', a.title);
    $('photo-title').set('text', this.loading.title);
    //this.setNum(a);
    
    this.element = new Element('img', {'id': 'photo', 'src': self.loading.url, 'alt': '', 'border': 0});
    this.element.addEvent('click', this.zoom.bind(this, this.element));
    this.element.setStyles({
      display: 'none',
      opacity: 0.01,
      visibility: 'hidden'
    }).inject('photo-view', 'inside');
    
    this.placeholder.setStyle('display', 'block').set('morph', {
      onComplete: function() {
        self.placeholder.setStyle('display', 'none');
        self.element.setStyle('opacity', 0.01);
        self.element.setStyle('display', 'block');
        self.show();
        self.placeholder.setStyle('display', 'none');

        // IE6 hack
        if (Browser.Engine.trident4) {
          $('footer').setStyle('visibility', 'hidden');
          $(document.body).setStyle('height', 1);
          (function() {
            $(document.body).setStyle('height', '');
            $('footer').setStyle('visibility', 'visible');
          }).delay(5);
        }
      }
    }).morph({'width': self.loading.img.width, 'height': self.loading.img.height});
  },
  
  reset: function() {
    if (this.loading.img) {
      this.loading.img.onload = function() {};
      delete this.loading.img;
    }
    if (this.placeholder) {
      this.placeholder.setStyle('display', 'none');
    }
    this.loading = {};
  },
  
  zoom: function(img) {
    var photo_src = img.src.replace(/\-thumb\-([^\.]*)/i, '');
    if (photo_src != img.src) zoombox.open({href: photo_src, title: ''});
  }

});
var photostrip, photogallery, temp_img;
window.addEvent('domready', function() {
  photostrip = new PhotoScroll('photo-strip');
  photogallery = new PhotoGallery('photo', photostrip);
  photostrip.addEvent('select', function(url, a) {
    photogallery.load(url, a);
  });
  
  if (zoombox.galleries.length == 0) zoombox.galleries.push([]);
  $('photo-strip').getElements('a.thumb').each(function(a) {
    var url = a.href;
    url = url.replace(/-thumb-(.*)\./i, '.');
    zoombox.galleries[0].push({href: url, title: a.title});
  });

});