/** * %%INFO 2007-09-18 16:18:47+0200 rgarcia%%
 * @author Rubén García
 * @usage ImageWidget(Element element, Object options)
 * @example
 * <script type="text/javascript">
 * // <![CDATA[
var iW = new ImageWidget(element, {swapImageName: 'icon_prelisten_play_over'});
 * // ]]>
 * </script>
 */

ImageWidget = Class.create();
ImageWidget.prototype = {
	initialize: function(element, options) {
		this.image = $(element);
		if(!this.image || this.image.tagName.toLowerCase() != 'img') return;
		this.options = Object.extend({
			imageFullPath:             null,
			imageName:                 null,
			imageExtension:            'gif',
			imagePath:                 'img/icons/',
			hoverImage:                true,
			hoverImageFullPath:        null,
			hoverImageName:            '',
			hoverImageExtension:       null,
			hoverImagePath:            null,
			changeImageOnClick:        true,
			changeImageFullPath:       null,
			changeImageName:           '',
			changeImageExtension:      null,
			changeImagePath:           null,
			changeHoverImageFullPath:  null,
			changeHoverImageName:      '',
			changeHoverImageExtension: null,
			changeHoverImagePath:      null,
			hoverStyle:              {}
		}, options || {});

		var tmp;
		if(this.options.imageName == null)  {
			this.options.imageFullPath = this.image.src;
		}
		if(this.options.hoverImageExtension == null) {
			this.options.hoverImageExtension = this.options.imageExtension;
		}
		if(this.options.hoverImagePath == null) {
			this.options.hoverImagePath = this.options.imagePath;
		}
		if(this.options.imageFullPath != null) {
			tmp = this.readImageInfo(this.options.imageFullPath);
			this.options.imageExtension = tmp.imageExtension;
			this.options.imageName = tmp.imageName;
			this.options.imagePath = tmp.imagePath;
		}
		if(this.options.hoverImageFullPath != null) {
			tmp = this.readImageInfo(this.options.hoverImageFullPath);
			this.options.hoverImageExtension = tmp.imageExtension;
			this.options.hoverImageName = tmp.imageName;
			this.options.hoverImagePath = tmp.imagePath;
		}
		this.hoverImageHandler = this.swapImage.bindAsEventListener(this);
		this.hoverOutImageHandler = this.swapBack.bindAsEventListener(this);
		if(this.options.changeImageOnClick) {
			if(this.options.changeImageFullPath != null) {
				tmp = this.readImageInfo(this.options.changeImageFullPath);
				this.options.changeImageExtension = tmp.imageExtension;
				this.options.changeImageName = tmp.imageName;
				this.options.changeImagePath = tmp.imagePath;
			}
			if(this.options.changeHoverImageFullPath != null) {
				tmp = this.readImageInfo(this.options.changeHoverImageFullPath);
				this.options.changeHoverImageExtension = tmp.imageExtension;
				this.options.changeHoverImageName = tmp.imageName;
				this.options.changeHoverImagePath = tmp.imagePath;
			}
			this.clickImageHandler = this.changeImage.bindAsEventListener(this);
			this.changed = false;
		}

		if(this.options.hoverImage) {
			this.imageSwapBack = new Image();
			this.imageSwapBack.src = this.options.imagePath + this.options.imageName + '.' + this.options.imageExtension
			this.imageSwap = new Image();
			this.imageSwap.src = this.options.hoverImagePath + this.options.hoverImageName + '.' + this.options.hoverImageExtension

			this.image.observe('mouseover', this.hoverImageHandler);
			this.image.observe('mouseout', this.hoverOutImageHandler);
		}
		if(this.options.changeImageOnClick) {
			this.changeImageSwapBack = new Image();
			this.changeImageSwapBack.src = this.options.changeImagePath + this.options.changeImageName + '.' + this.options.changeImageExtension
			this.changeImageSwap = new Image();
			this.changeImageSwap.src = this.options.changeHoverImagePath + this.options.changeHoverImageName + '.' + this.options.changeHoverImageExtension
			this.image.observe('click', this.clickImageHandler);
		}
	},
	swapImage: function() {
		if(this.changed) {
			this.image.src = this.changeImageSwap.src;
		} else {
			this.image.src = this.imageSwap.src;
		}
	},
	swapBack: function() {
		if(this.changed) {
			this.image.src = this.changeImageSwapBack.src;
		} else {
			this.image.src = this.imageSwapBack.src;
		}
	},
	changeImage: function() {
		if(this.changed) {
			this.image.src = this.changeImageSwap.src;
		} else {
			this.image.src = this.imageSwap.src;
		}
		this.changed = !this.changed;
	},
	readImageInfo: function(fullPath) {
		var ext = fullPath.substr(fullPath.lastIndexOf('.') + 1);
		var name = fullPath.substring(fullPath.lastIndexOf('/') + 1, fullPath.lastIndexOf(ext) - 1);
		var path = fullPath.substring(0, fullPath.indexOf(name));
		return {imageExtension: ext, imageName: name, imagePath: path};
	}
}