var Gallery = new Class.create({
  initialize: function(){
    if (!$('pictureViews')) return;
    //hide the inital view when the dom is loaded
    this.imageColumn = $('imageColumn').setStyle({opacity: '0'});
    Event.observe(window, 'load', this.setup.bind(this));
    
  },

  setup: function() {
    this.loadedImageWidth = 0;
    this.loadedImageHeight = 0;
    this.imageLoader = $(new Image());
    this.imageContainer = $('pictureLarge');
    this.thumbnailContainer = $('pictureViews');
    this.thumbnailLinks = $$('#pictureViews > a > img');
    this.galleryLink = $('imageLink');
    // this.galleryLink.down().hide().setStyle({opacity: '.7'});
    this.currentImage = $$('#imageLink > img')[0];
    this.imageBorder = $('imageBorder');
    this.contentContainer = $('galleryDescription');
    this.footer = $('footer');
    this.initialRunThrough = false;
            
    //first replace the image that is in the html source with a javascript image object
    this.updateImage(this.currentImage.src);
    this.currentImage.replace(this.imageLoader);
    //OK for some reason IE doesn't observe the load function the first time through so
    //i make it go through it

    if(Prototype.Browser.IE) {
      this.ie7Setup();
    }
 
    
    //assign event listeners
    this.imageLoader.observe('load', this.imageLoaded.bind(this));
    this.thumbnailLinks.each(function(i) {i.observe('mouseout', this.thumbnailOutState.bind(this))}.bind(this));
    this.thumbnailLinks.each(function(i) {i.observe('mouseover', this.thumbnailHoverState.bind(this))}.bind(this));
    this.thumbnailContainer.observe('click', this.thumbnailActions.bind(this));
    
    //set cookie for form
    
    $$('#bigPictureTab > h2 > a', '#imageLink').each(function(i) {
      i.observe('click', function(event) {
        var picturePath = $$('#pictureViews a img')[0].readAttribute('src').gsub('_thumb.jpg','_normal.jpg');
        createCookie('picturePath', picturePath, 0);
        createCookie('artworkTitle', $$('#galleryDescription > h1')[0].innerHTML, 0);
    })});
    
  },
  updateImage: function(path){
    this.imageLoader.src = path;
  },
  fadeInLoadedImage: function() {
    this.imageLoader.morph({opacity: '1'}, {duration: .5});
  },
  imageLoaded: function() {
    if (!this.initialRunThrough) {
      
      var initWidth = this.imageLoader.getWidth() + 20;
      var initHeight = this.imageLoader.getHeight() + 20;
      // this.galleryLink.observe('mouseover', this.linkHover.bind(this));
      // this.galleryLink.observe('mouseout', this.linkOut.bind(this));
      this.imageBorder.setStyle({width: initWidth + 'px', height: initHeight + 'px'});
      this.contentContainer.setStyle({top: initHeight + 'px'});
      this.galleryLink.down().setStyle({width: (initWidth - 20) + 'px'});
      
      this.footer.setStyle({marginTop: this.contentContainer.getStyle('height')});
      this.imageColumn.appear({duration: .5});
      this.initialRunThrough = true;
      return;
    }
    this.imageLoader.height = this.loadedImageHeight;
    this.imageLoader.width = this.loadedImageWidth;
    
    //add the padding for the frame
    this.loadedImageWidth += 20;
    this.loadedImageHeight += 20;
    this.loadedImageWidth += 'px';
    this.loadedImageHeight += 'px';
    
    //resize the frame and then fade in the loaded image
    this.transformation = new Effect.Transform([
      {'div#imageBorder': 'width: ' + this.loadedImageWidth + '; height: ' + this.loadedImageHeight + ';'},
      {'div#galleryDescription': 'top: ' + this.loadedImageHeight}
    ], {duration: .5, afterFinish: this.fadeInLoadedImage.bind(this)});
    this.transformation.play();
  },
  
  thumbnailActions: function(event) {
    event.stop();
    if(!event.target.src) return;
    $(event.target).up().blur();
    $(event.target).setStyle({opacity: .5});
    this.setImageSize($(event.target));

    event.target.clicked = true;

    this.imageLoader.morph({opacity: '0'},
    {duration: .5, afterFinish: this.updateImage.curry(event.target.src.gsub('_thumb', '_normal')).bind(this)});
    
  },
  
  setImageSize: function(el) {
    var thumbnailWidth = el.getWidth();
    var thumbnailHeight = el.getHeight();
    var ratio = (thumbnailWidth < thumbnailHeight) ? thumbnailWidth/thumbnailHeight : thumbnailHeight/thumbnailWidth;
    var horizontal = (thumbnailWidth > thumbnailHeight);
    
    if (horizontal) {
      this.loadedImageWidth = 500;
      this.loadedImageHeight = 500 * ratio;
    } 
    else {
      this.loadedImageHeight = 500;
      this.loadedImageWidth = 500 * ratio;
    }
    
    this.galleryLink.down().setStyle({width: this.loadedImageWidth + 'px'});
  },
  
  thumbnailHoverState: function(event) {
    $(event.target).setStyle({opacity: '1'});
  },
  
  thumbnailOutState: function(event) {
    if(event.target.clicked)
      $(event.target).setStyle({opacity: '.5'});
  },
  
  ie7Setup: function() {
    var initWidth = this.imageLoader.getWidth() + 20;
    var initHeight = this.imageLoader.getHeight() + 20;
    this.imageBorder.setStyle({width: initWidth + 'px', height: initHeight + 'px'});
    this.contentContainer.setStyle({top: initHeight + 'px'});
    this.footer.setStyle({marginTop: this.contentContainer.getStyle('height')});
    this.galleryLink.down().setStyle({width: (initWidth - 20) + 'px'});
    this.imageColumn.appear({duration: .5});
    this.initialRunThrough = true;
  }
  
  // linkHover: function(event) {
  //   this.galleryLink.down().show();
  // },
  // 
  // linkOut: function(event) {
  //   this.galleryLink.down().hide();
  // },
  
})