var CatSwitcher = Class.create();

CatSwitcher.prototype = {
	mainHandle: null,
	hoverHandle: null,
	imgHandle: null,
	descriptionHandle: null,
	descriptionHeight: 0,
	ulHandle: null,
	catContent: null,
	
	oldIndex: -1,
	
	state: 0,
	effectImg: null,
	effectDesc: null,
	
	initialize: function(mainHandle) {
		this.showLog("CatSwitcher initialize start");
		
		this.mainHandle = mainHandle;
		
		this.hoverHandle = Selector.findChildElements(this.mainHandle, ["div.b-adv-inner-left h1"])[0];
		this.imgHandle = Selector.findChildElements(this.mainHandle, ["div.b-adv-inner-left img"])[0];
		this.descriptionHandle = Selector.findChildElements(this.mainHandle, ["div.b-adv-inner-left div"])[0];
		this.descriptionHeight = $(this.descriptionHandle).getHeight();
		if(this.descriptionHeight == 0) this.descriptionHeight = 40;
		this.ulHandle = Selector.findChildElements(this.mainHandle, ["div.b-adv-inner-right ul"])[0];
		
		var elems = Selector.findChildElements(this.ulHandle, ["li a"]);
		
		this.catContent = new Array();
		for(var i = 0; i < elems.size(); i++)
			this.catContent[i] = {
				ancherHandle: elems[i],
				imgSrc: this.imgHandle.src,
				description: this.descriptionHandle.innerHTML
			};
		
		for(var i = 0; i < elems.size(); i++)
			elems[i].observe("mouseover", this.switchTo.bind(this, i));
	},
	
	switchTo: function(index) {
		if(index != this.oldIndex) {
			if(this.oldIndex != -1)
				this.catContent[this.oldIndex].ancherHandle.className = "";
			this.catContent[index].ancherHandle.className = "active";
			
			this.oldIndex = index;
			if(this.state == 0) {
				this.effectImg = Effect.Fade(this.imgHandle,{duration: 0.5, afterFinish: this.switchToBegin.bind(this)});
				this.effectDesc = new Effect.Morph(this.descriptionHandle,{style: "height: 1px; bottom: -"+this.descriptionHeight+"px;", duration: 0.5});
				this.state = 1;
			} else if(this.state == 2) {
				this.effectImg.cancel();
				this.effectDesc.cancel();
				this.effectImg = Effect.Fade(this.imgHandle,{duration: 0.5, afterFinish: this.switchToBegin.bind(this)});
				this.effectDesc = new Effect.Morph(this.descriptionHandle,{style: "height: 1px; bottom: -"+this.descriptionHeight+"px;", duration: 0.5});
			}
		}
	},
	
	switchToBegin: function() {
		//this.state = 2;
		
		this.imgHandle.src=this.catContent[this.oldIndex].imgSrc;
		this.descriptionHandle.innerHTML=this.catContent[this.oldIndex].description;
		
		$(this.imgHandle).observe("load",this.switchImgLoaded.bind(this));
	},
	
	switchImgLoaded: function() {
		this.state = 2;
		
		this.effectImg = Effect.Appear(this.imgHandle, {duration: 0.5, afterFinish: this.switchToEnd.bind(this)});
		this.effectDesc = new Effect.Morph(this.descriptionHandle,{style: "height: "+this.descriptionHeight+"px; bottom: 0px;", duration: 0.5});
//		$(this.descriptionHandle).show();
	},
	
	switchToEnd: function() {
		this.state = 0;
	},
	
	showLog: function(tlog) {
		if(typeof console != 'undefined') {
			console.log(tlog);
		}
	}
}