//Tabs.js
var Tabs = $Class({
	$init : function(){
		var options = this.opt = this._getOptionSet( arguments[0] );
		this._base = $( options.id );

		if ( !this._base ) return;
		
		this.display();
		this._addEvent();
	},
	_getOptionSet : function(argu) {
		var option = {
			categoryObj : "category",
			contentsObj : "contents",
			tabObj : "tab",
			tabType   : "img", // class || img
			tabObjOver : "_on", // className || false
			tabObjOn : "_on",
			change : "click", // click || over
			height : false,
			start : function(){ return 0 }
		};
		if (typeof argu == "undefined") argu = new Object;
		for(var x in argu) {
			option[x] = argu[x];
		}
		return option;
	},
	display : function(){
		
		
		this.tabArr = $$("#"+this.opt.id + " ."+this.opt.tabObj);
		this.infoArr = $$("#"+this.opt.id + " ."+this.opt.contentsObj);
		if(this.opt.categoryObj){
			this.conArr = $$("#"+this.opt.id + " ."+this.opt.categoryObj);
			
			$Element(this._base).css("position","relative");

			$A(this.conArr).forEach(function(v){
				$Element(v).css("position", "absolute");
			});
			
			var w = 0;
			$A(this.tabArr).forEach(function(v){
				var eV = $Element(v);
				eV.css({
					"top" : "0px",
					"left" : w + "px",
					"position" : "relative",
					"zIndex" : "999"
				});
				w += eV.width();
			});
		}
		var v = this.opt.start();

		this.change(v);
	},
	change : function(v){
		this.toggle(v);
		this.now = v;
		this.tabOn(v);
	},
	tabOn : function(index){
		var on = this.opt.tabObjOn;
		var over = this.opt.tabObjOver;
		var off = this.opt.tabObj;
		if(this.opt.tabType == "class") this.classChange(index);
		if(this.opt.tabType == "img") this.imgChange(index);
	},
	classChange : function(index){
		var on = this.opt.tabObjOn;
		var off = this.opt.tabObj;

		$A(this.tabArr).forEach(function(v,i){
			var eV = $Element(v);
			if(i == index) {
				v.className = on;
				eV.css("cursor","default");
			}else{
				v.className = off;
				eV.css("cursor", "pointer");
			}
		});
	},
	imgChange : function(index){
		var on = this.opt.tabObjOn;
		var off = this.opt.tabObj;

		$A(this.tabArr).forEach(function(v,i){
			var obj = $$("img", v)[0];
			var src = obj.src;
			var ex = src.match('^.*'+on+'\..{3}$');
			
			if(ex) src = src.replace(new RegExp('(^.*)'+on+'(\..{3}$)'), "$1$2");
			if(i == index) {
				src = src.replace(new RegExp('(^.+)(\..{3}$)'), "$1"+on+"$2");
				obj.src = src;
				obj.style.cursor = "default";
			}else{
				src = src.replace(new RegExp('(^.*)'+on+'(\..{3}$)'), "$1$2");
				obj.src = src;
				obj.style.cursor = "pointer";
			}
		});
	},
	toggle : function(index){
		var conA = this.conArr;
		var opt = this.opt;
		var obj = $Element(this._base);

		$A(this.infoArr).forEach(function(v,i){
			var eV = $Element(v);
			if(i == index) {
				eV.css("display","block");
				if(opt.height) {
					var h = $Element(conA[i]).height() + "px";
					obj.css("height", h);
				}
			}else{
				eV.css("display","none");
			}
		});
	},
	_addEvent : function() {
		var arr = this.tabArr;

		if(this.opt.change == "over") {
			$Fn(this._onclick, this).attach(arr, "mouseover");
		}else{
			if(this.opt.tabObjOver) {
				$Fn(this._onmouseover, this).attach(arr, "mouseover");
				$Fn(this._onmouseout, this).attach(arr, "mouseout");
			}
			$Fn(this._onclick, this).attach(arr, "click");
		}
	},
	_onclick : function(e) {
		var elem =e.currentElement;
		var i = $A(this.tabArr).indexOf(elem);
		if(i == this.now) return;

		this.toggle(i);
		this.tabOn(i);
		this.now = i;
		e.stop();
	},
	_onmouseover : function(e)  {
		var elem = e.currentElement;
		var i = $A(this.tabArr).indexOf(elem);
	
		if(i == this.now) return;
		var over = this.opt.tabObjOver;

		if(this.opt.tabType == "class") elem.className = over;
		if(this.opt.tabType == "img") {
			var obj = $$("img", elem)[0];
			var src = obj.src;

			src = src.replace(new RegExp('(^.+)(\..{3}$)'), "$1"+over+"$2");
			obj.src = src;
		}
	},
	_onmouseout : function(e)  {
		var elem = e.currentElement;
		var i = $A(this.tabArr).indexOf(elem);
		
		if(i == this.now) return;
		var over = this.opt.tabObjOver;
		var off = this.opt.tabObj;

		if(this.opt.tabType == "class") elem.className = off;
		if(this.opt.tabType == "img") {
			var obj = $$("img", elem)[0];
			var src = obj.src;

			var ex = src.match('^.*'+over+'\..{3}$');
			if(ex){
				src = src.replace(new RegExp('(^.*)'+over+'(\..{3}$)'), "$1$2");
				obj.src = src;
			}
		}
	}
});

//rollOverImage.js
var rollOverImage = $Class({
	$init : function(){
		var options = this.opt = this._getOptionSet( arguments[0] );
		this._base = $( options.id );

		if ( !this._base ) return;

		this.imgArr = $$("#"+this.opt.id+" ."+this.opt.imgCss);
		this._addEvent();
	},
	_getOptionSet : function(argu) {
		var option = {
			imgCss : "_rollOver",
			imgOn : "on"
		};
		if (typeof argu == "undefined") argu = new Object;
		for(var x in argu) option[x] = argu[x];
		return option;
	},
	_addEvent : function() {
		var len = $A(this.imgArr).length();
		var arr = $A(this.imgArr).$value();
		$Fn(this.over, this).attach(arr, "mouseover");
		$Fn(this.out, this).attach(arr, "mouseout");
	},
	over : function(e){
		e = e.currentElement;
		var src = e.src;
		var on = this.opt.imgOn;
		src = src.replace(new RegExp('(^.+)(\..{3}$)'), "$1"+on+"$2");
		e.src = src;
	},
	out : function(e){
		e = e.currentElement;
		var src = e.src;
		var on = this.opt.imgOn;
		src = src.replace(new RegExp('(^.*)'+on+'(\..{3}$)'), "$1$2");
		e.src = src;
	}
});