/**
 * artoq.ImageButton.js
 *
 * support image button.
 *
 * @namespace artpq
 * @author yangkun7@gmail.com
 */
if (!$type(artpq)) var artpq = {};
if (!$type(artpq.ImageButton)) {

	/**
	 * @classDescription make image buttons
	 * @version 1.0
	 */
	artpq.ImageButton = new Class({
		Implements: [Events, Options],
		options: {
			overSuffix: '_r',
			out: true,
			container: null,
			layers: [],
			target: null,
			selectClassName: 'ibSelected',
			defaultClassName: 'ibDefault',
			overClassName: 'artpqRotatorSelected',
			fade: true,
			displayView: 'block',
			prebuild: true,
			supportKeyboard: true
		},

		initialize: function(elements, options){
			this.setOptions(options);
			this.selected = -1;
			this.defaultSelect = -1;
			this.lBound = elements[0].getPosition().x;
			this.rBound = elements[elements.length - 1].getPosition().x + elements[elements.length - 1].getSize().x;
			this.imageElements = elements;
			this.layerElements = $$('div#Header ul#Topmenu li div.subMenuList');
			if (this.options.prebuild) this.build();
			return this;
		},

		getOverSource: function(img) {
			return img.get('src').replace(RegExp("(\.[^\.]+)$"), this.options.overSuffix + "$1");
		},

		build: function(){

			this.elements = [];

			for (var i  = 0, n = this.imageElements.length; i < n; i++){

				var sourceImage = $(this.imageElements[i]);
				var layerImage = $(this.layerElements[i]);
				var source = sourceImage.getProperty('src');
				var overSource = this.getOverSource(sourceImage);
				var layer = ($defined([i]) ? this.options.layers[i] : null);

				if ($defined(this.options.target)) source = $(this.options.target).getProperty('src');
				if ($defined(layer)) {
					if (this.options.fade) {
						layer.setStyle('opacity', 0);
						layer.setStyle('display', this.options.displayView);
					} else {
						layer.setStyle('display', 'none');
					}
				}

				sourceImage.addEvent('mouseenter', this.onMouseOver.bindWithEvent(this, i));
				layerImage.addEvent('mouseenter', this.onMouseOver.bindWithEvent(this, i));
				if (this.options.supportKeyboard) sourceImage.getParent().addEvent('focus', this.onMouseOver.bindWithEvent(this, i));
				if(this.options.out) {
					sourceImage.addEvent('mouseleave', this.onMouseLeave.bindWithEvent(this, i));
					if (this.options.supportKeyboard) sourceImage.getParent().addEvent('blur', this.onMouseLeave.bindWithEvent(this, i));
				}

				this.elements[i] = {
					image: sourceImage,
					source: source,
					overSource: overSource,
					layer: layer
				};


				if (sourceImage.hasClass(this.options.selectClassName) || sourceImage.hasClass(this.options.defaultClassName)){
					sourceImage.setProperty('src', overSource);
					this.selectedIndex = i;
					if ($chk(layer)) this.select(i);
					if (sourceImage.hasClass(this.options.defaultClassName) && $defined(this.options.container)){
						this.defaultSelect = i;
						$(this.options.container).addEvent('mouseleave', (function(evt, index){
							this.unselect(index);
							this.onMouseOver(evt, this.defaultSelect);
						}).bindWithEvent(this, i) );
					}
				}
			}

			if ($defined(this.options.container)) {
				$(this.options.container).addEvent('mouseleave', (function(evt){
					this.fireEvent('leaveContainer', new Event(evt));
				}).bindWithEvent(this));
			}


		},

		select: function(index){
			var el = this.elements[index];
			this.unSelect(index);
			if($defined(this.options.target)) $(this.options.target).set('src', el.overSource);
			else el.image.set('src', el.overSource);
			if ($defined(el.layer)) {
				el.layer.setStyle('display', this.options.displayView);
				if (this.options.fade) el.layer.fade('in');
			}
			el.image.addClass(this.options.overClassName);
			this.selectedIndex = index;
			this.fireEvent('onSelect', index);
		},

		onMouseOver: function(evt, index){
			this.select(index);
			$('sub0'+(index+1)).addClass('over');
			this.fireEvent('onMouseOver', [new Event(evt), index]);
		},

		unSelect: function(currentIndex){
			if(this.selectedIndex+1) $('sub0'+(this.selectedIndex+1)).erase('class');
			if (this.selectedIndex > -1 && this.selectedIndex != currentIndex) {
				var el = this.elements[this.selectedIndex];

				if($defined(this.options.target)) $(this.options.target).setProperty('src', el.source);
				else el.image.setProperty('src', el.source);
				if ($defined(el.layer)) {
					if (this.options.fade) el.layer.fade('out');
					el.layer.setStyle('display', 'none');
				}
				el.image.removeClass(this.options.overClassName);
				this.selectedIndex = -1;
				if (currentIndex > -1) this.fireEvent('onUnSelect', currentIndex);
			}
		},

		onMouseLeave: function(evt, index){											
			this.unSelect(-1);
//			$('sub0'+(index+1)).erase('class');
			this.fireEvent('onMouseOut', [new Event(evt), index]);
		}
	});

	artpq.ImageButtonProperty = new Class({
		Extends: artpq.ImageButton,
		getOverSource: function(img) {
			var img_src = img.get('over');
			var classes = img.className.split(" ");
			for(i=0; i<classes.length; i++)
			{
				var attr = classes[i];
				var value = "";
				if(attr.indexOf(':')>-1)
				{
					var value = attr.substring(attr.indexOf(':')+1);
					attr = attr.substring(0, attr.indexOf(':'));
				}
				if(attr=='over')	img_src = value;
			}
			return img_src;
		}
	});

	artpq.ImageButtonClass = new Class({
		Extends: artpq.ImageButton,
		getOverSource: function(img) {
			var classes = img.get('class').split(' ');
			for (var i = 0; i < classes.length; i++) {
				var values = classes[i].split(':');
				if (values.length > 1) {
					if (values[0] == 'over') return values[1];
				}
			}
			return '';
		}
	});

}