// xImage class...

var xImage = Class.create();
xImage.prototype = {
	initialize: function(name,large,med,tmb,path,description,dimensions,index) {
		this.name = name;
		this.imgLarge = large;
		this.imgMed = med;
		this.imgTmb = tmb;
		this.desc = description;
		this.dimensions = dimensions;
		this.index = index;
		this.path = path;
		this.el = null;
		this.clickit = null;
		
	},
		
		getMed: function() {
			var el = new Element('img', { 
									'src': this.imgMed,
									'class': 'middiv', 
									'border': 0
									}
								);
			return el;
		},
		getLarge: function() {
			var el = document.createElement('span');
			el.update("<img src='" +  this.imgLarge +"' border='0'>");
			return el;
		},
		getThumb: function() {
			this.el = new Element('img', { 
									'src': this.imgTmb,
									'class': 'thumbDiv', 
									'height': 55, 
									'width': 75
									}
								);
			
		
			// this is the callback when someone clicks on a thumb
			this.clickit = function() {
				$$('.thumbDivSelected').each( function(e) { 
					e.toggleClassName('thumbDivSelected');
				//	this.el.up().toggleClassName('thumbholdersel');
				});

				this.el.toggleClassName('thumbDivSelected');
				//this.el.up().toggleClassName('thumbholdersel');
				doImgUpdates(this);
			}
		
			var tmouseover = function() {
				this.el.toggleClassName('thumbDivHover');
			}
			
			var tmouseout = function() {
				this.el.toggleClassName('thumbDivHover');
			}
			this.el.observe('click', this.clickit.bind(this));
			this.el.observe('mouseover',tmouseover.bind(this));
			this.el.observe('mouseout',tmouseout.bind(this));
			return this.el;
		}
	};