KMA = {};
KMA.Container = function(el, config){
	var config = config || {};
	this.animtime = config.animtime || 50;
	this.el = Ext.get(el);
	
	this.panels = new Ext.util.MixedCollection(false, function(item) { return item.item_id; });
	this.height=0;
	this.currentPosition=0;

};

KMA.Container.prototype = {
	el : null
	,height: null
	,currentPosition : 0
	
	,add : function(id, btnType, moreUrl, height)
	{
		var panel = new KMA.Panel(id, btnType, moreUrl, height);
		panel.on('switchitem',this.shift, this);
		panel.on('onclickextbtn',this.onBtnExt, this);
		this.el.appendChild(panel.el);
		
		panel.el.setTop(this.height);
		//alert("set top id = " + panel.id + "Top = " +this.height);
		
		this.height += panel.getHeight();
		this.el.setHeight(this.height);
		//alert("id = " + panel.id + "setHeight = " +this.height);
		//panel.body.dom.innerHTML=id;
		panel.position=this.currentPosition++;
		this.panels.add(panel.id, panel);
	}
	,remove: function(){
	
	}
	,onBtnExt : function(panel)
	{
		if(panel.btnType == 0)
			window.location= panel.moreUrl;
		else if (panel.btnType == 1)
			RReplyList.refresh();
	}	
	,shift: function(panel){
		if(this.eventing==true) return;
		this.eventing=true;
		this.eventingup=true;
		this.eventingdown=true;
		var anotherPanel;

		if(panel.position==0){
			var to, from;
			for(var i=0 ; i < this.panels.getCount() ; i++)
			{
				anotherPanel = this.panels.itemAt(i);
				if(anotherPanel.position==0)
				{
					continue;	
				} 				
				anotherPanel.position -= 1;
				from = anotherPanel.el.getTop(true);
				to = anotherPanel.el.getTop(true)-panel.getHeight();
				
				//alert("from = " + from + " to = " + to + " height = " + panel.getHeight());
				
				this.animFx(from, to, anotherPanel, this, "up", this.animtime);
			}
			
			to = this.height - panel.getHeight();
			from = panel.el.getTop(true);
			this.animFx(from, to, panel, this, "down", this.animtime);
			panel.position = this.panels.getCount()-1;				

		}else{
			for(var i=0 ; i < this.panels.getCount() ; i++){
				anotherPanel = this.panels.itemAt(i);
				if(panel.position-1 == anotherPanel.position){
					var tempPosition = panel.position;
					panel.position = anotherPanel.position;
					anotherPanel.position = tempPosition;
					
					var pHeight = panel.getHeight();
					var aPos = anotherPanel.el.getTop(true);
					var pPos = panel.el.getTop(true);
					this.animFx(pPos, aPos, panel, this, "up", this.animtime);
					this.animFx(aPos, aPos+pHeight, anotherPanel, this, "down", this.animtime);
					break;
				}
			}
		}
		var values = new Array();
		for(var i=0 ; i < this.panels.getCount() ; i++){
			var item = this.panels.itemAt(i);
			values[item.position] = item.id; 
		}
		if(this.el.id=="kma-center-info") Ext.state.Manager.set("centerlist", values);
		else Ext.state.Manager.set("rightlist", values);
	}
	,animFx : function(from, to, panel, scope, mode, time){
		var k = from;
		setTimeout(function(){
			if(mode=="down"){
				panel.el.setTop(k += 20);
				if(k > to){
					panel.el.setTop(to);
					scope.eventingdown=false;
				}else{
					scope.animFx(k, to, panel, scope, mode, time);
				}
			}else{
				panel.el.setTop(k -= 20);
				if(k < to){
					panel.el.setTop(to);
					scope.eventingup=false;
				}else{
					scope.animFx(k, to, panel, scope, mode, time);
				}
			}
			if(scope.eventingup==false&& scope.eventingdown==false){
				scope.eventing=false;
			}
		}, time);
	}
};




KMA.Panel = function(id, btnType, moreUrl, height) // btnType : 0 normal, 1, refresh, 2. only swap
{	
	this.id = id;
	this.btnType = btnType;
	this.moreUrl = moreUrl;
	this.height = height;
	
	if(!this.el){
		var div = document.createElement('div');
		this.el = Ext.get(div);	
		this.el.addClass('kma-panel');
		this.el.dom.id = this.id;
	}
	
	this.header = this.el.child('.kma-panel-header');
	this.body = this.el.child('.kma-panel-body');
	this.footer = this.el.child('.kma-panel-footer');

	if(!this.header){
		var div = document.createElement('div');
		this.el.appendChild(div);
		this.header = Ext.get(div);
		this.header.addClass('kma-panel-header');
	}
	if(!this.body){
		var div = document.createElement('div');
		this.el.appendChild(div);
		this.body = Ext.get(div);
		this.body.addClass('kma-panel-body');
	}
	if(!this.footer){
		var div = document.createElement('div');
		this.el.appendChild(div);
		this.footer = Ext.get(div);
		
	}
	
	this.addEvents({
		"switchitem" : true
	});
	
	// swap button
	
	var switchBtn = this.el.child('.kma-switch-btn');	
	if(!switchBtn){
		var button = document.createElement('button');
//		button.setAttribute("onfocus", "this.blur()");
		button.onfocus= function(){
			this.blur();
		}
		this.header.appendChild(button);
		switchBtn = Ext.get(button);
		
		switchBtn.addClass('kma-switch-btn');
	}
	
	switchBtn.on('click', this.onSwitch, this);
	

	// ext button
	
	if(btnType != 2) // not only swap
	{	
		var extBtn = this.el.child('.kma-ext-btn');	
		if(!extBtn){
			var button = document.createElement('button');
			button.onfocus= function(){
				this.blur();
			}
			this.header.appendChild(button);
			extBtn = Ext.get(button);
			
			extBtn.addClass('kma-ext-btn');
		}	
		extBtn.on('click', this.onExt, this);
	}
	if(btnType != 2) // not only swap
	{	
		var extBtn = this.el.child('.kma-ext-btn1');	
		if(!extBtn){
			var button = document.createElement('button');
			button.onfocus= function(){
				this.blur();
			}
			this.header.appendChild(button);
			extBtn = Ext.get(button);
			
			extBtn.addClass('kma-ext-btn1');
		}	
		extBtn.on('click', this.onExt, this);
	}
};

Ext.extend (KMA.Panel, Ext.util.Observable, {
	position: null
	,height: null
	,btnType: null
	,moreUrl: null

	,onSwitch : function(){
		this.fireEvent("switchitem", this);
	}
	,onExt : function(){
		this.fireEvent("onclickextbtn", this);
	}
	,getHeight : function(){
		if(!this.height)
			return this.el.getHeight();
		else
			return this.height;
	}
});