/*
 * @author:Siemon Huang
 * @version:1.0
 * @date:2011-3-10
 */
(function($){
	var ident = 0;
	$.widget('ui.frameTab',{
		options:{
			editable:false,
			newone : false
		},
		_init:function(){
			var o = this.options,
				self = this,
				frametab = this.element.find('>.frame-tabs')[0];
			if (o.newone) {
				var container = $('<div class="frame-tabs"/>').appendTo(this.element),
					headeroutter = $('<div class="frame-tabs-header-outter"/>').appendTo(container),
					header = $('<div class="frame-tabs-header frame_tabs_header_default"/>').appendTo(headeroutter), 
					tabs = $('<div class="frame-tabs-content"/>').appendTo(container),
					appendBtn = this._createPlusBtn().appendTo(header);
				this._createTab(container,tabs,appendBtn);
				this.frametab = container;
				this.element.customize({plugin:this._createPlugin.call(this)});
			}else if(frametab){
				this.frametab = frametab;
				this._loadEvent(frametab);			
			}
		},
		_createTab:function(container,tabs,appendBtn){
			var	self = this,
				title = $('<div class="frame-tabs-title frame_tabs_default_default frame-tabs-' + ident + '"></div>')
					.append(this._createDelBtn())
					.insertBefore(appendBtn)				
					.click(function(){
						var matches = this.className.match(/frame-tabs-\d+/i), 
							tabs = $(this.parentNode.parentNode).next();
						tabs.children().hide();
						var matchtab = tabs.find('>.' + matches[0]).show(),
							matchpanel = matchtab.find('>.customize-frame-content')[0];		
						$(this).siblings('.frame-tabs-title[state!=removed]').each(function(){
							var cssname = this.getAttribute('cssname'),
								reg = RegExp;
							if(this.className.match(/frame_tabs_focus_(\w+)/i)){
								this.className = this.className.replace(/frame_tabs_focus_(\w+)/i,'frame_tabs_default_'+(cssname?cssname:'$1'));
								this.setAttribute('cssname',reg.$1);
								return false;									
							}
						});
						
						var cssname = this.getAttribute('cssname'),
							reg = RegExp;
						if(this.className.match(/frame_tabs_default_(\w+)/i)){
							var substr = reg.$1;
							this.className = this.className.replace(/frame_tabs_default_(\w+)/i,'frame_tabs_focus_'+(cssname?cssname:'$1'));
							matchpanel.className = matchpanel.className.replace(/frame_tabs_content_\w+/i,'frame_tabs_content_'+(cssname?cssname:substr));
							this.setAttribute('cssname',substr);
						}
					})
					.tabsortable({
						scope: container,
						accept: '.frame-tabs-title,.frame-tabs-plus',
						beforedrop: function(event, drop){
							var $this = $(this), 
								//prev = $this.prevAll('div[state!=removed]').eq(0), 
								//next = $this.nextAll('div[state!=removed]').eq(0);
								content = drop.parent().next(), 
								matches = this.className.match(/frame-tabs-\d+/i), 
								targettab = $this.parent().next().find('>.' + matches[0]);
							/*
							if (next.hasClass('frame-tabs-title')) {
								next.click();
							}
							else if (prev[0]) {
								prev.click();
							}*/
							content.append(targettab);
						}
					}),
				text = $('<div class="ui-contenteditable frame-tab-title-txt" contenteditable="true">' + ident + '</div>')
					.appendTo(title)
					.dblclick(function(){
						this.focus();
						document.execCommand('SelectAll',false, '');						
					})
					.keyup(function(event){
						if(event.keyCode===13){
							this.innerHTML = this.innerHTML.replace(/<br>/ig,'').replace(/<p>/ig,'').replace(/<\/p>/ig,'').replace(/<p\/>/ig,'').replace(/&nbsp;/ig,'');
							this.blur();
						}
					}),
				tab = $('<div class="frame-tabs-' + ident + ' frame-tab-panel"/>').appendTo(tabs),			
				content = $('<div id="frame_' + (frameSer++) + '" class="customize-frame-content frame_tabs_content_default"><div class="customize-frame-tip"/></div>').droppable(droppableParam).appendTo(tab);
				ident++;
				title.click();
				var matches = title[0].className.match(/frame-tabs-\d+/i);
				saveInvoke(matches[0], 3);
		},
		_loadEvent:function(frametab){
			
			var o = this.options,
				self = this,
				header = $('>.frame-tabs-header-outter .frame-tabs-header',frametab),
				titles = $('.frame-tabs-title',header).each(function(){
							 var classname = this.className.match(/frame-tabs-\d+/i)[0],
								 tabcontent = $(this.parentNode.parentNode).next(),
								 tab = $('>.'+classname,tabcontent);
							 this.className = this.className.replace(/frame-tabs-\d+/i,'frame-tabs-'+ident);
							 tab[0].className = tab[0].className.replace(/frame-tabs-\d+/i,'frame-tabs-'+ident);
							 ident++;
						 })
						 .click(
						 	 function(){
								var matches = this.className.match(/frame-tabs-\d+/i), 
									tabs = $(this.parentNode.parentNode).next();
								tabs.children().hide();
								var matchtab = tabs.find('>.' + matches[0]).show(),
									matchpanel = matchtab.find('>.customize-frame-content')[0];
								$(this).siblings('.frame-tabs-title').each(function(){
									var cssname = this.getAttribute('cssname'),
										reg = RegExp;
									if(this.className.match(/frame_tabs_focus_(\w+)/i)){
										this.className = this.className.replace(/frame_tabs_focus_(\w+)/i,'frame_tabs_default_'+(cssname?cssname:'$1'));
										this.setAttribute('cssname',reg.$1);
										return false;									
									}
								});
								var cssname = this.getAttribute('cssname'),
									reg = RegExp;
								if(this.className.match(/frame_tabs_default_(\w+)/i)){
									var substr = reg.$1;
									this.className = this.className.replace(/frame_tabs_default_(\w+)/i,'frame_tabs_focus_'+(cssname?cssname:'$1'));
									matchpanel.className = matchpanel.className.replace(/frame_tabs_content_\w+/i,'frame_tabs_content_'+(cssname?cssname:substr));
									this.setAttribute('cssname',substr);
								}
							 }
						 ).tabsortable({
								 scope: frametab,
								 accept: '.frame-tabs-title,.frame-tabs-plus',
								 beforedrop: function(event, drop){
									var $this = $(this), 
										//prev = $this.prevAll('div[state!=removed]').eq(0), 
										//next = $this.nextAll('div[state!=removed]').eq(0);
										content = drop.parent().next(), 
										matches = this.className.match(/frame-tabs-\d+/i), 
										targettab = $this.parent().next().find('>.' + matches[0]);
									/*if (next.hasClass('frame-tabs-title')) {
										next.click();
									}
									else if (prev[0]) {
										prev.click();
									}*/
									content.append(targettab);
								 }
						 });					 
			o.editable&&this._createEditable(header, titles);
		},
		_createPlusBtn:function(){
			var self = this,
				appendBtn = $('<a href="javascript:;" class="frame-tabs-plus editable-mode"><span class="ui-icon ui-icon-plus frame-tabs-icon-plus"/></a>')
					.click(function(){
						var container = $(this).parents('.frame-tabs'),
							tabs = $(this.parentNode.parentNode).next();
						self._createTab(container,tabs,this);
					});
			return appendBtn;	
		},
		_createDelBtn:function(){
			var	delbtn = $('<a href="javascript:;" class="frame-tabs-del editable-mode"><span class="ui-icon ui-icon-close"/></a>')
				.click(function(){
					var parent = $(this.parentNode), 
						matches = parent[0].className.match(/frame-tabs-\d+/i),
						prev = parent.prevAll('div[state!=removed]').eq(0), 
						next = parent.nextAll('div[state!=removed]').eq(0);
					if (next.hasClass('frame-tabs-title')) {
						next.click();
					}
					else if (prev[0]) {
						prev.click();
					}
					saveInvoke(matches[0], 4);
					return false;
				});
			return delbtn;		
		},
        _createPlugin: function(){
			var frametab = this.frametab;
			return function(){
					var editStyle = $('<a href="javascript:;" title="编辑样式" class="ui-state-default border-style-setter" style="float:left;"><span class="ui-icon ui-icon-wrench" style="float:left"></span></a>')
						.click(
							function(){
								var header = $('>.frame-tabs-header-outter .frame-tabs-header',frametab),
									titles = $('>.frame-tabs-title[state!=removed]',header),
									tabs = $('>.frame-tabs-content',frametab),
									tabtitles = [];
									titles.each(function(){
										tabtitles[tabtitles.length] = $.trim($('>.frame-tab-title-txt',this).html());
									});
									tabtitles = tabtitles.join(',');
								var controller = createDialogBox(
								'选项卡编辑器',
								function(){
									if (titles.length) {
										var defval = [], 
											focval = [], 
											headerselect = $('#tab_header_style');
										header[0].className = header[0].className.replace(/frame_tabs_header_\w+/i, 'frame_tabs_header_' + headerselect.val());
										$('.tab-title-select-default').each(function(){
											defval[defval.length] = this.value;
										});
										$('.tab-title-select-focus').each(function(){
											focval[focval.length] = this.value;
										});
										for (var i = 0; i < titles.length; i++) {
											var title = titles[i];
											if (title.className.match(/frame_tabs_default_\w+/i)) {
												title.className = title.className.replace(/frame_tabs_default_\w+/i, 'frame_tabs_default_' + defval[i]);
												title.setAttribute('cssname', focval[i]);
											}
											if (title.className.match(/frame_tabs_focus_\w+/i)) {
												title.className = title.className.replace(/frame_tabs_focus_\w+/i, 'frame_tabs_focus_' + focval[i]);
												var matchpanel = $('>.'+title.className.match(/frame-tabs-\d+/i)[0],tabs).find('> .customize-frame-content')[0];
												matchpanel.className = matchpanel.className.replace(/frame_tabs_content_\w+/i,'frame_tabs_content_'+focval[i]);
												title.setAttribute('cssname', defval[i]);
											}
										}
									}
									controller.dialog('close');								
								},
								null,
								'/tabs.php?action=settabstyles&tabscount='+titles.length+'&tabtitles='+tabtitles,
								false,
								function(){
									if (titles.length) {											
										var	select1 = $('.tab-title-select-default').eq(0).change(function(){
												if(lockcheck[0].checked){
													$('.tab-title-select-default:not(:eq(0))').val(this.value);
												}
											}),
											select2 = $('.tab-title-select-focus').eq(0).change(function(){
												if(lockcheck[0].checked){
													$('.tab-title-select-focus:not(:eq(0))').val(this.value);
												}												
											})
											selects1 = $('.tab-title-select-default').filter(':not(:first)'),
											selects2 = $('.tab-title-select-focus').filter(':not(:first)'),
										
											layout = $('#tabeditor'), 
											layout_tr = $('.tabeditor-tab').eq(0), 
											headerselect = $('#tab_header_style'), 
											reg = RegExp;
										
										if (header[0].className.match(/frame_tabs_header_(\w+)/i)) {
											var substr = reg.$1;
											/*for (var i = 0, opt; opt = headerselect[0].options[i]; i++) {
												if (opt.value == substr) {
													opt.selected = true;
													break;
												}
											}*/
											headerselect.val(substr);
										}
										
										for(var i=0;i<titles.length;i++){
											var title = titles[i],
												//defaultstate = title.className.match(/frame_tabs_default_(\w+)/i),		
												cssname = title.getAttribute('cssname'),
												defaultselect = $('#tab_title_default_'+i),
												focusselect = $('#tab_title_focus_'+i);
											if(title.className.match(/frame_tabs_default_(\w+)/i)){
												var substr = reg.$1;
												defaultselect.val(substr);
												focusselect.val(cssname?cssname:substr);												
											}
											if(title.className.match(/frame_tabs_focus_(\w+)/i)){
												var substr = reg.$1;
												focusselect.val(substr);
												defaultselect.val(cssname?cssname:substr);
											}
										}
										
										var lockcheck = $('#tab_check_0');
										if(titles.length==1){lockcheck.attr('disabled',true);return;}
										lockcheck.click(function(){
												if(this.checked){
													var val1 = select1.val(),
														val2 = select2.val();
														
													selects1.attr('disabled',true).val(val1);
													selects2.attr('disabled',true).val(val2);
																		
												}else{
													selects1.attr('disabled',false);
													selects2.attr('disabled',false);											
												}
										});										
									}
								});
			            	}
						)
						.hover(
							function(){
								$(this).addClass('ui-state-hover');
							},
							function(){
								$(this).removeClass('ui-state-hover');
							}
						).appendTo(this);
			}			
        },
		_createEditable:function(header,titles){
			var self = this;
			header.append(this._createPlusBtn());
			titles.each(function(){
				self._createDelBtn().appendTo(this);
			})
			$('>.frame-tab-title-txt',titles)
			.attr('contenteditable',true)
			.dblclick(function(){
				this.focus();
				document.execCommand('SelectAll',false, '');						
			})
			.keyup(function(event){
				if(event.keyCode===13){
					this.innerHTML = this.innerHTML.replace(/<br>/ig,'').replace(/<p>/ig,'').replace(/<\/p>/ig,'').replace(/<p\/>/ig,'').replace(/&nbsp;/ig,'');
					this.blur();
				}
			});
			this.element.customize('option', 'plugin', this._createPlugin.call(this));
		}
	});
	
	var areas = [],tip = $('<div style="float:left;"/>');
	$.widget('ui.tabsortable', $.extend({}, $.ui.mouse, {
	    _init: function(){
			this._mouseInit();
	    },
	    _mouseCapture: function(event){
			var o = this.options;
			this.target = this.element.click();
			this.accepts = $(o.accept,o.scope).filter('div[state!=removed]');
			this.drop = this.element[0];
			this.mark = null;
			var canDrop = this._dropped(event);
			this._setArea();
			return canDrop;
	    },
	    _mouseStart: function(event){
			this.helper = this._createHelper();
	    },
	    _mouseDrag: function(event){
			this._getArea(event.pageX,event.pageY);
			this.helper.css({
				top:event.pageY-10,
				left:event.pageX-10
			});		
			return false;
	    },
	    _mouseStop: function(event){
			this._clear();
			//if($(this.drop).parents(':data(frameTab)').length>1){return;}
			if(this.drop !== this.target[0]){
				this._trigger('beforedrop',event,$(this.drop));
				this.target.insertBefore(this.drop).click();
			}
	    },
		_setArea:function(){
			areas.length = 0;
			this.accepts.each(function(i, n){
				var _n = $(n), _top = _n.offset().top, _left= _n.offset().left, _height = _n.height(),_width=_n.width();
                areas.push([_left,_top,_left+_width,_top + _height,n]);
            });
		},
		_getArea:function(x, y){
			var area;
            for (var i = 0, pos; pos = areas[i]; i++) {
                if (x > pos[0] && 
					x < pos[2] && 
					y > pos[1] && 
					y < pos[3]) {
                    area = pos;
					break;
                }
            }
			if(!area){return;}
			if(this.mark === area[4]){return;}
			if(area[4]===this.drop){return;}
			this.mark = this.drop = area[4];
			//if($(this.drop).parents(':data(frameTab)').length>1){return;}
			this._hoverState();
		},
		_hoverState:function(){
			tip.insertBefore(this.drop).css({width:0,height:this.element.height()}).animate({width:this.element.width()},400);
		},
		_createHelper: function(){
			var o = this.options;
			
			var helper = this.element.clone().css({opacity:'0.5',zIndex:10001});//$('<div class="mod-resize-helper"/>').width(this.element.width()).css('opacity','0.5');
				helper.appendTo(document.body);
			
			if (helper[0] != this.element[0] && !(/(fixed|absolute)/).test(helper.css("position"))) 
				helper.css("position", "absolute");
			return helper;
		},
		_dropped:function(event){
			var pos = this.element.offset(),
				l = pos.left,
				r = pos.left + this.element.width(),
				t = pos.top,
				b = pos.top + this.element.height();
			if(
				event.pageX>l&&
				event.pageX<r&&
				event.pageY>t&&
				event.pageY<b
			){
				return true;
			}
			return false;		
		},
		_clear: function() {
			this.helper.remove();
			this.helper = null;
			tip.remove();
		}				
	}));
	
	$.extend($.ui.tabsortable, {
	    defaults: {
	        delay: 0,
			revertDuration:500,
	        distance: 1,
			scope:null,
			accept: null
	    }
	});	
})(jQuery)