gem.gui = Package(function(pkg){

	pkg.Component = Class(function(obj){

		obj.element;
		
		obj.init = function(elm){
			if(typeof(elm) != 'object'){
				this.element = document.getElementById(elm);
			}else{
				this.element = elm;
			}
			this.element.objectNode = this;
		}
		obj.getStyle = function(name){
			return gem.Browser.getStyle(this.element, name);
		}
		obj.setStyle = function(name, value){
			gem.Browser.setStyle(this.element, name, value);
		}
		obj.show = function(){
			gem.Browser.setStyle(this.element, 'display', 'block');
		}
		obj.hide = function(){
			gem.Browser.setStyle(this.element, 'display', 'none');
		}
		obj.isVisible = function(){
			return (gem.Browser.getStyle(this.element, 'display') != 'none');
		}
		obj.getPosition = function(){
			return gem.Browser.getPosition(this.element);
		}
		obj.setPosition = function(x, y){
			gem.Browser.setPosition(this.element, x, y);
		}
		obj.addListener = function(evt, func){
			var wrapper = function(e){
				var event = e || window.event;
				event.cancelBubble = true;
				return func(event, this.objectNode);
			};
			gem.Browser.addListener(this.element, evt, wrapper);
		}
		
	});
	
	pkg.Clickable = Class(pkg.Component, function(obj, base){

		obj.mainCSS;
		obj.hoverCSS;
		obj.activeCSS;
		
		obj.init = function(elm){
		
			base(this).init(elm);
			this.mainCSS = null;
			this.hoverCSS = null;
			this.activeCSS = null;
			
			//	Event Handler
			this.addListener('mouseover', function(e, target){
				if(target.hoverCSS != null) target.element.className = target.hoverCSS;
				if(typeof(target.handleMouseOver) == 'function') target.handleMouseOver(e);			
			});
			this.addListener('mouseout', function(e, target){
				if(target.mainCSS != null) target.element.className = target.mainCSS;
				if(typeof(target.handleMouseOut) == 'function') target.handleMouseOut(e);
			});
			this.addListener('mousedown', function(e, target){
				if(target.activeCSS != null) target.element.className = target.activeCSS;
			});
			this.addListener('click', function(e, target){
				if(target.hoverCSS != null) target.element.className = target.hoverCSS;
				if(typeof(target.handleClick) == 'function') target.handleClick(e);
			});
		}
	});

	pkg.TabPane = Class(pkg.Component, function(obj, base){

		obj.pages;
		obj.selectedIndex;
		obj.tabNode;
		
		obj.init = function(elm){
			base(this).init(elm);

			this.pages = [];
			this.selectedIndex = null;
			this.tabNode = document.createElement('div');
			this.tabNode.className = 'tab-row';
			this.element.insertBefore(this.tabNode, this.element.firstChild);
			
			var idx = 0;
			idx = Number(gem.Browser.getCookie('tabpane_' + this.element.id));
			if(isNaN(idx)) idx = 0;
			this.selectedIndex = idx;
			
			var nodes = elm.childNodes;
			for(var i = 0; i < nodes.length; i ++){
				if(nodes[i].nodeType == 1 &&
					nodes[i].className == 'tab-page'){
					this.addPage(nodes[i]);
				}
			}
		}
		obj.dispose = function(){
			this.tabNode = null;
			for(var i = 0; i < this.pages.length; i ++){
				this.pages[i].dispose();
				this.pages[i] = null;
			}
			this.pages = null;
		}
		obj.addPage = function(elm){
			var cnt = this.pages.length;
			var page = new pkg.TabPage(elm, this, cnt);
			this.tabNode.appendChild(page.element);
			this.pages[cnt] = page;

			if(this.selectedIndex == cnt){
				page.show();
			}else{
				page.hide();
			}
		}
		obj.setSelectedIndex = function(n){
			if(this.selectedIndex != n){
				if(this.selectedIndex != null && this.pages[ this.selectedIndex] != null){
					this.pages[this.selectedIndex].hide();
					this.selectedIndex = n;
				}
				this.pages[this.selectedIndex].show();
				gem.Browser.setCookie('tabpane_' + this.element.id, n);
			}
		}
		obj.getSelectedIndex = function(){
			return this.selectedIndex;
		}
	});
	
	pkg.TabPage = Class(pkg.Clickable, function(obj, base){
		
		obj.tabPane;
		obj.bodyNode;
		obj.index;
		
		obj.init = function(elm, pane, idx){
			
			var targte = null;
			var nodes = elm.childNodes;
			for(var i = 0; i < nodes.length; i ++){
				if(nodes[i].nodeType == 1 && nodes[i].className == 'tab'){
					target = nodes[i];
					break;
				}
			}
			base(this).init(target);
			this.mainCSS = 'tab';

			this.bodyNode = elm;
			this.tabPane = pane;
			this.index = idx;
			
		}
		obj.show = function(){
			this.mainCSS = 'tab-selected';
			this.element.className = this.mainCSS;
			this.bodyNode.style.display = 'block';
		}
		obj.hide = function(){
			this.mainCSS = 'tab';
			this.element.className = this.mainCSS;
			this.bodyNode.style.display = 'none';
		}
		obj.handleClick = function(){
			this.tabPane.setSelectedIndex(this.index);
		}

	});
});