ImageCaptcha = Class.create({
	initialize: function() {
		if(ImageCaptcha.captchas === undefined)
			ImageCaptcha.captchas = new Array();
		ImageCaptcha.captchas.push(this);
		this.createElements();
		this.load(this.getAttribute('captchacode'), this.getAttribute('captchaword'));
	},
	createElements: function(){
		this.captionField = $(document.createElement('span'));
		this.captionField.innerHTML = ' ';
		this.insert(this.captionField);
		
		this.insert(document.createElement('br'));
		
		this.captchaPointRef = $(document.createElement('div'));
		this.insert(this.captchaPointRef);
		
		this.wrapper = $(document.createElement('div'));
		this.wrapper.style.overflow = 'hidden';
		this.insert(this.wrapper);
		this.wrapper.absolutize();
		
		this.captchaImage = $(document.createElement('img'));
		this.wrapper.insert(this.captchaImage);
		
		this.cIdField = $(document.createElement('input'));
		this.cIdField.setAttribute('type', 'hidden');
		this.cIdField.setAttribute('name', 'captcha_id');
		this.cIdField.value = this.id.split('_', 2)[1];
		this.insert(this.cIdField);
		
		this.answerField = $(document.createElement('input'));
		this.answerField.setAttribute('type', 'hidden');
		this.answerField.setAttribute('name', 'captcha_answer');
		this.insert(this.answerField);
		
		
		this.hoveror = $(document.createElement('div'));
		
		this.wrapper.insert(this.hoveror);
		this.hoveror.absolutize();
		this.hoveror.style.top = '0px';
		
		this.selector = $(document.createElement('div'));
		
		this.wrapper.insert(this.selector);
		this.selector.absolutize();
		this.selector.style.top = '0px';
		
		this.mouseor = $(document.createElement('div'));
		this.wrapper.insert(this.mouseor);
		this.mouseor.absolutize();
		this.mouseor.style.top = '0px';
		
		this.meBind = this.onMouseEnter.bind(this);
		this.mouseor.observe('mouseover', this.meBind);
		
		this.mlBind = this.onMouseLeave.bind(this);
		this.mouseor.observe('mouseout', this.mlBind);
		
		this.mcBind = this.onMouseClick.bind(this);
		this.mouseor.observe('click', this.mcBind);
		
		this.captchaImage.observe('load', this.onCaptchaImageLoaded.bind(this));
	},
	loadCaptchaImage: function(){
		var captchaImageURL = 'captcha.php?id=' + this.captchaCode;
		this.hoveror.style.backgroundImage = "url(" + captchaImageURL + ")";
		this.selector.style.backgroundImage = "url(" + captchaImageURL + ")";
		this.captchaImage.src = captchaImageURL;
	},
	load: function(code, word){
		this.selectedIndex = -1;
		this.overIndex = -1;
		this.answerField.value = -1;
		this.cIdField.value = code;
		this.captchaCode = code; 
		this.captchaWord = word;
		this.setAttribute('captchacode', code);
		this.setAttribute('captchaword', word);
		
		this.captionField.innerHTML = 'Please select the ' + word + '.';
		
		this.loadCaptchaImage();
	},
	onCaptchaImageLoaded: function(){
		var w = this.captchaImage.getWidth();
		var h = this.captchaImage.getHeight()/3;
		var num = w/h;

		this.imageSize = h;
		this.totalSize = w;
		this.numberOfImages = num;
		this.updateDisplay();
	},
	updateDisplay: function(){
		this.wrapper.clonePosition(this.captchaPointRef, {setWidth:false, setHeight:false});
		
			this.wrapper.style.width = 
					this.mouseor.style.width = 
		this.totalSize + "px";
		
		this.mouseor.style.height =
			this.selector.style.width =
				this.selector.style.height =
					this.hoveror.style.width =
						this.hoveror.style.height =
								this.wrapper.style.height = 
		this.imageSize + "px";
		
		this.style.height = (this.imageSize + this.captionField.getHeight()) + "px";
		
		var x = 0;
		
		if(this.selectedIndex == -1)
			this.selector.hide();
		else{
			x = this.selectedIndex * this.imageSize;
			this.selector.style.left =  x + 'px';
			this.selector.style.backgroundPosition = -x + 'px ' + this.imageSize + "px";
			this.selector.show();
		}
		
		if(this.overIndex == -1)
			this.hoveror.hide();
		else{
			x = this.overIndex * this.imageSize;
			this.hoveror.style.left = x + 'px';
			this.hoveror.style.backgroundPosition = -x + 'px ' + (this.imageSize*2) + "px";
			this.hoveror.show();
			
		}
		this.mouseor.style.backgroundColor = 'black';
		this.mouseor.setOpacity(0.001);
	},
	onMouseEnter: function (event){
		if(this.mmBind)
			this.mouseor.stopObserving('mousemove', this.mmBind);
		this.mmBind = this.onMouseMove.bind(this);
		this.mouseor.observe('mousemove', this.mmBind);
	},
	onMouseLeave: function (event){
		if(this.mmBind)
			this.mouseor.stopObserving('mousemove', this.mmBind);
		this.overIndex = -1;
		this.updateDisplay();
	},
	onMouseMove: function (event){
		var mx = event.offsetX == undefined ? event.layerX : event.offsetX;
		var idx = Math.floor(mx / this.imageSize);
		this.overIndex = idx;
		this.updateDisplay();
	},
	onMouseClick: function (event){
		var mx = event.offsetX == undefined ? event.layerX : event.offsetX;
		var idx = Math.floor(mx / this.imageSize);
		this.answerField.value = this.selectedIndex = idx;
		this.updateDisplay();
	}
});
ImageCaptcha.updateAll = function(){
	if(ImageCaptcha.captchas !== undefined)
		for(var i = 0; i < ImageCaptcha.captchas.length; i++){
			ImageCaptcha.captchas[i].onCaptchaImageLoaded();
		}
}

ImageCaptcha.getById = function(id){
	return $('CAPTCHA_' + id);
}