/******************************************************************************/
/******************************************************************************/

(function($)
{
	/**************************************************************************/
	/**************************************************************************/	
	
	var TLThemeOptionPanel=function(optionPanel,options)
	{
		/**********************************************************************/
		
		var $this=this;
		
		$this.optionPanel=$(optionPanel);
		
		$this.defaults= 
		{
			active				:	'',
			themeOptionPrefix	:	''
		};
		
		$this.response='';
		
		$this.options=$.extend($this.defaults,options);
		
		/**********************************************************************/
		
		this.create=function()
		{				
			$(window).bind('hashchange',function() 
			{
				var id=window.location.hash.substring(1);

				var object=$this.optionPanel.find('.option-panel-menu a[href="#'+id+'"]');
				
				$this.optionPanel.find('.option-panel-menu a').removeClass('select');
				object.addClass('select');

				if($this.isOpenSubMenu(object)) return;
				
				var element=new TLThemeOptionPanelElement();
				element.style('#'+$this.options.themeOptionPrefix+'_'+id,false);
	
				$this.closeMenu();
				$this.openMenu(object);
				
				if(!$this.hasSubMenu(object))
				{
					$this.closeTab();
					$this.openTab(id);				
				}	
			});
			
			$('#option-panel-form').submit(function() 
			{
				$this.blockPanel('block');

				var data=$(this).serialize();
				jQuery.post(ajaxurl,data,function(response) 
				{
					$this.response=response;
					
					$this.blockPanel('unblock');
					
					$this.scrollToTop();
					
					$this.handleResponse();					
					$this.handleError();
					
					return(false);
				},'json');

				return(false);
			});

			window.location='#'+$this.options.active;
			
			$this.optionPanel.find('.shortcode-panel>ul>li>h4>a').bind('click',function(e) 
			{
				e.preventDefault();
				$this.optionPanel.find('.shortcode-panel>ul>li>h4+div').css('display','none');
				$(this).parent('h4').next('div').css('display','block');
			});
		};
		
		/**********************************************************************/
		
		this.handleResponse=function()
		{
			$('.notice').remove();
			$('.option-panel-menu a').removeClass('error');
			
			if($this.response=='') return;
			
			$('#option-panel').prepend($this.response.notice);
			
			if($this.response.type!=1) return;
			if($this.response.detail.local.length==0) return;

			for(var key in $this.response.detail.local)
			{
				var id=$this.response.detail.local[key][0];
				var object=$('#'+id).parents('ul.form-field-list').parent('div');
				
				var link=$('.option-panel-menu a[href="#'+object.attr('id').replace($this.options.themeOptionPrefix+'_','')+'"]');
				var linkParent=link.parent('li').parent('ul').prev('a');
				
				link.addClass('error');
				linkParent.addClass('error');
			}
		}
		
		/**********************************************************************/
		
		this.handleError=function()
		{
			$('div').qtip('destroy');
			
			if($this.response=='') return;
			if($this.response.type!=1) return;
			if($this.response.detail.local.length==0) return;
			
			var open=$('.option-panel-tab>div[class="open"]');
			
			for(var key in $this.response.detail.local)
			{
				var id=$this.response.detail.local[key][0];
				var message=$this.response.detail.local[key][1];
				
				var object=$('#'+id).parents('li').first().children('h5').first();

				if(!object.parents(open)) continue;

				object.qtip(
				{
					style			: 		
					{ 
						classes		:	'ui-tooltip-error'
					},
					content			: 	
					{ 
						text		:	message
					},
					position		: 	
					{ 
						my			:	'left center',
						at			:	'right center',
						container	:	$('#'+id).parents('li').first()
					},
					show			: 
					{
						ready		: true
					},
					hide			: false
				}).qtip('show');				
			}
		}
		
		/**********************************************************************/
		
		this.hasSubMenu=function(object)
		{
			return(object.next('ul').length);
		}
	
		/**********************************************************************/
		
		this.isOpenSubMenu=function(object)
		{
			return(object.next('ul').hasClass('open'));
		}
		
		/**********************************************************************/
		
		this.openMenu=function(object)
		{
			$([object.next('ul'),object.parent('li').parent('ul:not(.option-panel-menu)')]).each(function() 
			{
				$(this).addClass('open')
			});
		}
		
		/**********************************************************************/
		
		this.closeMenu=function()
		{
			$this.optionPanel.find('.option-panel-menu ul').each(function() 
			{
				$(this).removeClass('open');
			});
		}
		
		/**********************************************************************/
		
		this.openTab=function(id)
		{
			$this.optionPanel.find('.option-panel-tab>div[id="'+$this.options.themeOptionPrefix+'_'+id+'"]').addClass('open');
			$this.handleError();
			$this.scrollToTop();
		}
		
		/**********************************************************************/
		
		this.closeTab=function()
		{
			$this.optionPanel.find('.option-panel-tab>div').removeClass('open');
		}
		
		/**********************************************************************/
		
		this.getMenuObjectById=function(id)
		{
			return($this.optionPanel.find('.option-panel-menu a[href="#'+id+'"]'));
		};
		
		/**********************************************************************/
		
		this.blockPanel=function(action)
		{
			if(action=='block')
				$('#option-panel').block({message:false,overlayCSS:{opacity:'0.3'}});
			else $('#option-panel').unblock();			
		};
		
		/**********************************************************************/
		
		this.scrollToTop=function()
		{
			$(window).scrollTop(0);
		};

		/**********************************************************************/
	};
	
	/**************************************************************************/
	/**************************************************************************/
	 
	$.fn.TLThemeOptionPanel=function(options)
	{
		return this.each(function()
		{
			var optionPanel=new TLThemeOptionPanel(this,options);
			optionPanel.create();
		});
	};
	
	/**************************************************************************/
	/**************************************************************************/
	
})(jQuery);