function getPageScroll(){

	var xScroll, yScroll;

	if (self.pageYOffset) {
		yScroll = self.pageYOffset;
		xScroll = self.pageXOffset;
	} else if (document.documentElement && document.documentElement.scrollTop){	 // Explorer 6 Strict
		yScroll = document.documentElement.scrollTop;
		xScroll = document.documentElement.scrollLeft;
	} else if (document.body) {// all other Explorers
		yScroll = document.body.scrollTop;
		xScroll = document.body.scrollLeft;	
	}

	arrayPageScroll = new Array(xScroll,yScroll);
	return arrayPageScroll;
}

var Gallery = Class.create();

Gallery.prototype = {

  initialize: function(params) {
    this.imageContainerClass = params.imageContainerClass;
    this.galleryContainer = $(params.galleryContainer);
    this.fixGalleryContainerPosition();
    this.galleryItems = this.findGalleryItems();
    this.createGalleryItems();
  },
  
  findGalleryItems: function() {
      return $A(document.getElementsByClassName(this.imageContainerClass));
  },
  
  createGalleryItems: function() {
    this.galleryItems.each(function(item) {
      var image = $A(item.getElementsByTagName('img')).first();
      var image_path = image.src;
      var image_main_path = image_path.replace(/SubView/,'MainView-Large');
      var image_main_thumb_path = image_path.replace(/SubView/,'MainView-Thumb');
      var image_alt_path = image_path.replace(/SubView/,'AltView-Large');
      var image_alt_thumb_path = image_path.replace(/SubView/,'AltView-Thumb');
      var title = $A(item.getElementsByTagName('h5')).first().innerHTML;
      var description = image.getAttribute('alt');
      var galleryItem = new GalleryItem({
        title: title,
        description: description,
        image_main_path: image_main_path,
        image_main_thumb_path: image_main_thumb_path,
        image_alt_path: image_alt_path,
        image_alt_thumb_path: image_alt_thumb_path
      });
      Event.observe(item,'click',function(e) {
        this.showGalleryContainer(galleryItem);
      }.bind(this).bind(galleryItem));
      Event.observe(item,'mouseover',function(e) {
        Event.element(e).style.cursor = 'pointer';
      });
    }.bind(this))
  },
  
  showGalleryContainer: function(galleryItem) {
    this.galleryContainer.innerHTML = '<h3>' + galleryItem.title + '</h3>' + 
    '<a href="javascript:void(0);"  id="closeButton">X</a>' +
    '<p id="galleryDescription">' + galleryItem.description + '</p>' + 
    '<div id="mainImageContainer"></div>' + 
    '<div id="thumbsContainer">' + 
    '<div id="mainThumbContainer"></div>' + 
    '<div id="altThumbContainer"></div></div>' + 
    '<div id="galleryButtons">' + 
    '<a href="/how-to-place-an-order" id="infoLink">For Information On How To Buy</a></div>';
    if (!this.galleryContainer.visible()) {
      this.galleryContainer.style.top = getPageScroll()[1]+40 + "px";
      new Effect.Parallel(
        [ new Effect.Appear(this.galleryContainer,{duration: 0.5, sync: true}), 
          new Effect.MoveBy(this.galleryContainer,20,0, { sync: true })
        ]
      );
    }
    Event.observe($('closeButton'),'click',function() {
      new Effect.Parallel(
        [ new Effect.Fade(this.galleryContainer,{duration: 0.5, sync: true}), 
          new Effect.MoveBy(this.galleryContainer,-20,0, { sync: true })
        ]
      );
    }.bind(this))
    this.populateImages(galleryItem);
  },
  
  populateImages: function(galleryItem) {
    var mainImage = new Image();
    mainImage.onload = function() {
      $('mainImageContainer').innerHTML = '<img src="' + mainImage.src + '" alt="" />';
    }
    mainImage.src = galleryItem.image_main_path;

    var mainThumb = new Image();
    mainThumb.onload = function() {
      $('mainThumbContainer').innerHTML = '<img src="' + mainThumb.src + '" alt="" />';
    }
    mainThumb.onerror = function() {
      $('mainThumbContainer').innerHTML = '<img src="/images/thumb-blank.gif" alt="" />';
    }
    Element.observe($('mainThumbContainer'),'click',function() {
      $('mainImageContainer').innerHTML = '';
      $('mainImageContainer').innerHTML = '<img src="' + mainImage.src + '" alt="" />';
    }.bind(mainImage));
    Event.observe($('mainThumbContainer'),'mouseover', function() {
      $('mainThumbContainer').style.cursor = 'pointer';
    });
    mainThumb.src = galleryItem.image_main_thumb_path;

    var altThumb = new Image();
    altThumb.onload = function() {
      $('altThumbContainer').innerHTML = '<img src="' + altThumb.src + '" alt="" />';
    }
    altThumb.onerror = function() {
      $('altThumbContainer').innerHTML = '<img src="/images/thumb-blank.gif" alt="" />';
    }
    Event.observe($('altThumbContainer'),'click', function() {
      $('mainImageContainer').innerHTML = '';
      $('mainImageContainer').innerHTML = '<img src="' + altImage.src + '" alt="" />';
    }.bind(altImage));
    Event.observe($('altThumbContainer'),'mouseover', function() {
      $('altThumbContainer').style.cursor = 'pointer';
    });
    
    altThumb.src = galleryItem.image_alt_thumb_path;

    var altImage = new Image();
    altImage.src = galleryItem.image_alt_path;

  },
  
  fixGalleryContainerPosition: function() {
    var width = parseInt(Element.getWidth($('container')));
    var left = parseInt(width/2) - (Element.getWidth(this.galleryContainer)/2);
    var right = parseInt(width/2) + (Element.getWidth(this.galleryContainer)/2);
    this.galleryContainer.style.left = left + 'px';
    this.galleryContainer.style.right = right + 'px';
  }

}

var GalleryItem = Class.create();

GalleryItem.prototype = {
  initialize: function(params) {
    this.title = params.title;
    this.description = params.description;
    this.image_main_path = params.image_main_path;
    this.image_main_thumb_path = params.image_main_thumb_path;
    this.image_alt_path = params.image_alt_path;
    this.image_alt_thumb_path = params.image_alt_thumb_path;
  }
}

Event.observe(window,'load',function() {
  new Gallery({imageContainerClass: 'SubCollections', galleryContainer: 'galleryContainer'});
});