/*
 * zCool.Stack 1.0 - Javascript
 *
 * Copyright (c) 2009 - 2010  周柏民 (http://jscaler.appspot.com/)
 * Dual licensed under the MIT (MIT-LICENSE.txt)
 * and GPL (GPL-LICENSE.txt) licenses.
 *
 * $Date: 2010-06-28 19:28:00 BeiJing $
 * $Revision: 33 $
 */
 
// @imports zCool.js
// @imports zCool.UI.js

// 扩展 Drag 类
(function(window, $, undefined){
	
	var DOC = window.document,
	
		ROOT = DOC.documentElement,
		
		AP = Array.prototype,
		push = AP.push,
		forEach = AP.forEach,
	
		LAYOUT_ATTRS = { 'x': 'width', 'y': 'height' },
		
		$UIStack = $.UI.defined('Stack', function(root, settings){
			
			$.UI.call(this, root, settings);
			
			this.render();
		});
	
	// 扩展原型
	$.extend($UIStack.prototype, {
		
		defaultSettings: {
			
			// 缺省选中标签的索引
			activedIndex: 0,
			
			tabsRootClass: 'Stack-tabs-root',
			tabListClass: 'Stack-tab-list',
			tabClass: 'Stack-tab',
			tabActivedClass: 'Stack-tab-actived',
			
			pagesRootClass: 'Stack-pages-root',
			pageListClass: 'Stack-page-list',
			pageClass: 'Stack-page',
			pageTitleClass: 'Stack-page-title',
			pageActivedClass: 'Stack-page-actived',
		
			// 选项标签布局
			tabsLayout : '',
		
			// 标签页布局
			pagesLayout : '',
			
			// 标签的表现形式 text|digit|thumbnail
			tabView: 'text', 
		
			// 缺省自动生成的标签文字前缀
			autoTabText : '标签页',
		
			// 触发切换的事件
			triggerTabType : 'click'
			
		},
		
		// 创建组件根元素
//			'<div class="Stack">' + 
//				'<div class="Stack-tabs-root">' + 
//					'<ol class="Stack-tab-list">' + 
//						'<li class="Stack-tab"><a><b>标签页1</b></a></li>' + 
//					</ol>' + 
//				</div>' + 
//				<div class="Stack-pages-root">' + 
//					<div class="Stack-page-list">' + 
//						'<div class="Stack-page">' + 
//							'<h2 class="Stack-page-title">标签页1</h2>' + 
//							'<div class="Stack-page-body">......</div>' + 
//						'</div>' + 
//					'</div>' + 
//				'</div>' + 
//			'</div>'
		createRoot: function(){
			
			( this.root = DOC.createElement('div') ).
				className = 'Stack';
			
			this.createPagesRoot();
			this.createTabsRoot();
			
			this.root.appendChild( this.tabsRoot );
			this.root.appendChild( this.pagesRoot );
			
			return this.root;
		},
		
		// 渲染组件
		render: function(){
			
			this.setPages();
			this.setTabs();
		},
		
		// 设置页面
		setPages: function(){
			
			if( !this.pagesRoot ){
				
				// 若html已包含标签页集合的根元素，则必须同时包含一个标签页列表元素
				if( this.pagesRoot = $.first(this.root, '.' + this.pagesRootClass) ){
					this.pageList = $.first(this.pagesRoot, '.' + this.pageListClass);
				}
				else{
					this.pagesRoot = this.createPagesRoot();
				}
			}
		},
		
		// 设置标签
		setTabs: function(){
			
			if( !this.tabsRoot ){
				// 若html源码已包含标签集合的根元素，则必须同时包含一个标签列表元素
				if( this.tabsRoot = $.first(this.root, '.' + this.tabsRootClass) ){
					this.tabList = $.first(this.tabsRoot, '.' + this.tabListClass);
				}
				else{
					this.tabsRoot = this.createTabsRoot();
					// 初始化标签
					this.initTabs();
				}
			}
		},
		
		// 初始化标签
		initTabs: function(){
			var pages = this.getPages();
			if( pages.length ){
				
				var tabs = this.addTabs( pages ),
					activedIndex = pages.someIndexOf( function(page){
						return $(page).hasClass(this.pageActivedClass );
					}, this );
					
				if( activedIndex < 0 ){
					$(pages[ this.activedIndex ]).addClass( this.pageActivedClass );
				}
				else{
					this.activedIndex = activedIndex;
				}
				
				$(tabs[ this.activedIndex ]).addClass( this.tabActivedClass );
			}
		},
		
		// 标签页集合排序（id）
		sortPages: function( a, b ){
			return a.id > b.id;
		},
		
		// 标签集合排序（href）
		sortTabs: function( a, b ){
			return $.first(a, 'a').getAttribute('href', 2) > $.first(b, 'a').getAttribute('href', 2);
		},
		
		// 添加标签 return array
		// @pages array
		addTabs: function( pages ){
			
			var html = pages.map(function( page, i ){
				
				var tabContent = i + 1,
					pageId = page.id || ( page.id = 'zCool_' + ( page[$.CSS_INDEX] || (page[$.CSS_INDEX] = ++$.CSS_ID) ) );
					
				switch( this.tabView ){
					
				case 'text':
					tabContent = this.getPageTitle( page );
					tabContent = tabContent ? $(tabContent).text() : this.autoTabText + (i + 1);
					break;
					
				case 'digit':
					break;
					
				case 'thumbnail':
					if( /(<img[^>]*>)/i.test(page.innerHTML) ){
						tabContent = RegExp.$1;
					}
					break;
					
				default:
					return '';
				}
				
				return '<li class="' + this.tabClass + '"><a href="#' + pageId + '"><b>' + tabContent + '</b></a></li>';
				
			}, this ).join('');
				
			$(this.root).addClass(this.constructor.className + '-tab-view-' + this.tabView);
			
			// 标签绑定触发（选择激活标签页的）事件
			return $( html ).appendTo( this.tabList )
				[ this.triggerTabType ]
					( this.bind( this.triggerTabHandler ) ).toArray();
		},
		
		// 添加标签页 return array
		// @pages array
		addPages: function( pages ){
			$( this.pageList ).append( pages );
			return pages;
		},
		
		// 创建标签页根元素
//		'<div class="Stack-pages-root">' + 
//			'<div class="Stack-page-list">' + 
//			'</div>' + 
//		'</div>'
		createPagesRoot: function(){
			
			(this.pagesRoot = DOC.createElement('div'))
				.className = this.pagesRootClass;
				
			(this.pageList = DOC.createElement('div'))
				.className = this.pageListClass;
				
			this.pagesRoot.appendChild( this.pageList );
			this.root.appendChild( this.pagesRoot );
			
			return this.pagesRoot;
		},
		
		// 创建标签根元素
//		'<div class="Stack-tabs-root">' + 
//			'<ol class="Stack-tab-list">' + 
//			'</ol>' + 
//		'</div>'
		createTabsRoot: function(){
			
			(this.tabsRoot = DOC.createElement('div'))
				.className = this.tabsRootClass;
				
			(this.tabList = DOC.createElement('ol'))
				.className = this.tabListClass;
				
			this.tabsRoot.appendChild( this.tabList );
			this.root.insertBefore( this.tabsRoot, this.pagesRoot );
			
			return this.tabsRoot;
		},
		
		// 获取标签页集合 return array
		getPages: function(){
			return $.children( this.pageList, '.' + this.pageClass );
		},
		
		// 获取标签页标题
		getPageTitle: function( page ){
			return $.first( page, '.' + this.pageTitleClass );
		},
		
		// 获取标签集合 return array
		getTabs: function(){
			return $.children( this.tabList, '.' + this.tabClass );
		},
		
		// 选择激活标签页的事件句柄
		triggerTabHandler: function(e){
				
			var tab = e.currentTarget;
			if( tab ){
				e.preventDefault();
				this.tabActive( tab );
			}
		},
		
		tabActive : function( tab ){
			var tabActiveEvent = new $.Event('tabActive');
			this.emit('tabActive', tabActiveEvent);
			tabActiveEvent.isDefaultPrevented() || 
			this.indexActive( this.getTabs().indexOf(tab) );
		},
		
		pageActive : function( page ){
			this.indexActive( this.getPages().indexOf(page) );
		},
		
		indexActive : function( activeIndex ){
			
			var pages = this.getPages();
			if( activeIndex >= pages.length ){
				activeIndex = 0;
			}
				
			if( activeIndex !== this.activedIndex ){
				
				var tabs = this.getTabs();
					
				$( tabs[ this.activedIndex ] ).removeClass( this.tabActivedClass );
				$( pages[ this.activedIndex ] ).removeClass( this.pageActivedClass );
				$( tabs[ activeIndex ] ).addClass( this.tabActivedClass );
				$( pages[ activeIndex ] ).addClass( this.pageActivedClass );
				
				this.activedIndex = activeIndex;
			}
		}
		
	});
	
	// 扩展成员	
	/*$.extend($UIStack, {
		
	});*/
	
    
})(this, zCool);