/* Image enlarge/shrink */
var ImageEnlarger = function(element, opts){
	//start after page load
	var self = this;
	this.addLoadEvent(function(){ self.init(element, opts); });
};

ImageEnlarger.prototype.init = function(element, opts){
	var self = this;
	this.element = this.getElement(element);
	
	//default properties
	this.enlarge_multiplier = 2.5;
	this.animate_increase = 40; //pixels
	this.animate_speed = 15; //miliseconds
	this.default_width = 0;
	this.default_height = 0;
	this.enlarged_width = 0;
	this.enlarged_height = 0;
	this.wh_ratio = 0;
	
	this.mouseIsOverImage = false;
	this.previousImage = new Image();
	this.timeout_mouseout = 0;
	
	this.timeout_enlarge = [];
	this.timeout_shrink = [];
	
	//initialize properties from the call arguments
	this.setOptions(this, opts, true);	
	
	this.getImages();
	this.doSizeCalculations();	
	this.assignImageEvents();
	/*
	//show initialized properties	
	var debug = '';
	for(var prop in this){
		switch(typeof(this[prop])){
			case 'function':
				//
				break;
			default:
				debug += prop + ' = ' + this[prop] + '\n';
				break;
		}
	}
	alert(debug);
	*/
};

ImageEnlarger.prototype.addLoadEvent = function(func){
	var oldonload = window.onload; 
	if(typeof window.onload != 'function'){ 
		window.onload = func; 
	}else{ 
		window.onload = function(){ 
			if (oldonload) { 
				oldonload(); 
			} 
			func(); 
		}; 
	} 
};

ImageEnlarger.prototype.getElement = function(elem){
	if(elem && typeof elem == "string")
		return document.getElementById(elem);
	return elem;
};

ImageEnlarger.prototype.setOptions = function(obj, optionsObj, ignoreUndefinedProps){
	if(!optionsObj)
		return;
	for(var optionName in optionsObj){
		if(ignoreUndefinedProps && (optionsObj[optionName] == undefined))
			continue;
		obj[optionName] = optionsObj[optionName];
	}
};

ImageEnlarger.prototype.getElementById = function(id, obj, tag){
	if(id){
		if(obj == null){
			obj = document;
		}
		if(tag == null){
			tag = '*';
		}
		var elements = obj.getElementsByTagName(tag);
		var c = elements.length;
		for(var i = 0; i < c; i++){
			var elem = elements[i];
			if(elem.id == id){
				return elem;
			}
		}
	}
	return null;
};

ImageEnlarger.prototype.getImages = function(){
	this.images = this.element.getElementsByTagName('IMG');
	this.image_count = this.images.length;
};

//get first image in container, and save its size, calculating the enlarged size, the ratio, just once
ImageEnlarger.prototype.doSizeCalculations = function(){
	if(this.image_count){
		var img = this.images[0];
		if(!this.default_width){
			this.default_width = img.offsetWidth;
		}
		if(!this.default_height){
			this.default_height = img.offsetHeight;
		}
		
		if(!this.wh_ratio && this.default_height){
			this.wh_ratio = this.default_width / this.default_height;
		}
		
		if(!this.enlarged_width){
			this.enlarged_width = parseInt(this.default_width * this.enlarge_multiplier);
		}
		if(!this.enlarged_height){
			this.enlarged_height = parseInt(this.default_height * this.enlarge_multiplier);
		}
		//alert('default_width=' + this.default_width + ', default_height=' + this.default_height + ', wh_ratio=' + this.wh_ratio + ', enlarged_width=' + this.enlarged_width + ', enlarged_height=' + this.enlarged_height);
	}
};

ImageEnlarger.prototype.assignImageEvents = function(){
	var self = this;	
	if(this.image_count){
		for(var i = 0; i < this.image_count; i++){
			self.handleMouseOver(i);
			self.handleMouseOut(i);
		}
	}
};

ImageEnlarger.prototype.handleMouseOver = function(img_index){
	var self = this;
	var img = this.images[img_index];
	img.onmouseover = function(){
		//clearTimeout(self.timeout_mouseout);
		//self.mouseIsOverImage = true;
		self.enlargeImage(img_index);
	};
};

ImageEnlarger.prototype.handleMouseOut = function(img_index){
	var self = this;
	var img = this.images[img_index];
	img.onmouseout = function(){
		//self.mouseIsOverImage = false;
		self.restoreImage(img_index);
		//self.timeout = setTimeout(function(){ self.restoreImage(img_index) }, 200);
	};
};

ImageEnlarger.prototype.checkIfMouseOut = function(){
	if(!this.mouseIsOverImage){
		this.restoreImage(this.previousImage);
	}
};

/*
ImageEnlarger.prototype.enlargeImage = function(img){
	img.style.width = this.enlarged_width + 'px';
	img.style.height = this.enlarged_height + 'px';
	
	if(this.previousImage.offsetWidth && (this.previousImage != img)){
		this.restoreImage(this.previousImage);
	}
	this.previousImage = img;
};

ImageEnlarger.prototype.restoreImage = function(img){
	img.style.width = this.default_width + 'px';
	img.style.height = this.default_height + 'px';
};
*/

ImageEnlarger.prototype.enlargeImage = function(img_index){
	var self = this;
	//var img = this.images[img_index];
	this.animateEnlarge(img_index);
	
	// increase conainer width
	if (this.image_count) {
		//this.element.style.width = this.enlarged_width + (this.image_count * this.default_width)  + 'px';
		this.element.style.whiteSpace = 'nowrap';
	}
};

ImageEnlarger.prototype.animateEnlarge = function(img_index){
	var self = this;
	var img = this.images[img_index];
	var cur_width = img.offsetWidth;
	var cur_height = img.offsetHeight;
	
	if((cur_width + this.animate_increase) < this.enlarged_width){
		img.style.width = cur_width + this.animate_increase + 'px';
		img.style.height = parseInt(cur_width / this.wh_ratio) + 'px';
		//alert(img.style.width + ' ' + img.style.height);
		this.timeout_enlarge[img_index] = setTimeout(function(){ self.animateEnlarge(img_index); }, this.animate_speed);
	}else{
		img.style.width =  this.enlarged_width + 'px';
		img.style.height =  this.enlarged_height + 'px';
		
		clearTimeout(this.timeout_enlarge[img_index]);
	}	
};

ImageEnlarger.prototype.restoreImage = function(img_index){
	var self = this;
	//clearTimeout(this.timeout_shrink);
	this.animateShrink(img_index);
};

ImageEnlarger.prototype.animateShrink = function(img_index){
	var self = this;
	var img = this.images[img_index];
	var cur_width = img.offsetWidth;
	var cur_height = img.offsetHeight;
	
	clearTimeout(this.timeout_enlarge[img_index]);
	
	if((cur_width - this.animate_increase) > this.default_width){
		img.style.width = cur_width - this.animate_increase + 'px';
		img.style.height = parseInt(cur_width / this.wh_ratio) + 'px';
		//alert(img.style.width + ' ' + img.style.height);
		this.timeout_shrink[img_index] = setTimeout(function(){ self.animateShrink(img_index); }, this.animate_speed);
	}else{
		img.style.width =  this.default_width + 'px';
		img.style.height =  this.default_height + 'px';
		
		clearTimeout(this.timeout_shrink[img_index]);
	}	
};