Tabs = Class.create({

  initialize: function(tabsContainer) {
      this.tabLinks = $(tabsContainer).select('a');
      var tabs = this;
      for (var i = 0; i < this.tabLinks.length; i++) {
	this.tabLinks[i].onclick = function() {
	  tabs.showTabContents(this);
	  return false;
	}
      }
    },

      showTabContents : function(link) {
      for (var i = 0; i < this.tabLinks.length; i++) {
	if (this.tabLinks[i] == link) {
	  $(this.tabLinks[i].innerHTML.toLowerCase()).show();
	} else {
	  $(this.tabLinks[i].innerHTML.toLowerCase()).hide();
	}
      }
    }
  });

PhotoManager = Class.create({
	initialize: function(parent,largeImageFrame) {
		this.parent = $(parent);
		this.pictureFrame = this.parent.select('.pictureFrame')[0];
		this.pictureFrameImage = this.pictureFrame.select('img')[0];
		this.thumbs = this.parent.select('img');
		this.descriptionArea = this.parent.select('.pictureDescription')[0];
		this.largeImageFrame = $(largeImageFrame);
		this.largeImage = this.largeImageFrame.select('img')[0];
  		this.attachEventHandlers();
		this.preloadImages();
	},
	
	attachEventHandlers: function() {
		var manager = this;
		for (var i = 0; i < this.thumbs.length; i++) {
			this.thumbs[i].onclick = function() {
				manager.showMedium(this);
				return false;
			};
		}
		
		this.pictureFrameImage.onclick = function() {
			manager.showLarge(this);
			return false;
		};
		
		this.largeImageFrame.onclick = function() {
			this.style.display = "none";
			manager.largeImage.src = null;
			return false;
		};
	},
	
      preloadImages : function() {
        	for (var i = 0; i < this.thumbs.length; i++) {
		  this.preLoadMedium(this.thumbs[i]);
		}
      },

	showMedium: function(smallImage) {
		this.pictureFrameImage.src = smallImage.src.replace('Small','Med');
		this.descriptionArea.innerHTML = smallImage.alt;
	},
	
        preLoadMedium: function(smallImage) {
          var mediumImage = new Image(400, 300);
          mediumImage.src = smallImage.src.replace('Small','Med');
        },

	showLarge: function(medImage) {
		this.largeImage.src = medImage.src.replace('Med','Large');
		this.largeImageFrame.style.display = "block";
		
	}
});