//Tool to handle ExtJS and custom widgets outside of html document. 

(function($) {
	
	/**
	 * Options
	 */
	opts= null;
	/**
	 * Error container
	 */
	var errorContainer;
	
	OPTIONS = "setUpOptions";
	CLASSES = {COMBO_CLASS:".comboClass",
	           SINGLE_SELECT_CLASS: ".singleClass",
	           SINGLE_INPUT_CLASS: ".inputClass",
	           SINGLE_TIME_CLASS: ".inputTimeClass",
	           SINGLE_SPINNER_CLASS: ".inputSpinnerClass",
	           SINGLE_PASSWORD_CLASS: ".inputPasswordClass",
	           SERVICE_CHOISE:".choiseContainer",
	           FLIP_CONTAINER:".flipContainer",
	           TABLE_SORTER:".sortingTable"
	};
	
	$.fn.getParameterValue = function(name)
	{
	  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
	  var regexS = "[\\?&]"+name+"=([^&#]*)";
	  var regex = new RegExp( regexS );
	  var results = regex.exec( window.location.href );
	  return results? results[1] : "" ;
	 
	}
	
	
	$.fn.renderServiceChoise = function(){
		$("div[view="+$(this).getParameterValue("VIEW_ID")+"]"
				,$(this)).addClass("activeTab");
		
		$("div",$(this)).click(function(event){
			event.stopImmediatePropagation();
			if(!$(this).hasClass("disabledTab"))
			  window.location.href=$(this).attr("href");
		});
	}
	
	/**
	 * Eval element options
	 */
	$.fn.evalOptions = function(){
		try{
		  optionsStr = $(this).attr(OPTIONS);
		  eval("options = "+ optionsStr);
		  return options;
		}catch(e){
		  alert(e);
		}
	};
	
	$.fn.renderSpinnerInput = function(){
	   options = $(this).evalOptions();
	   var s = new Ext.ux.form.SpinnerField({
			id: $(this).attr("id"),
			name: options.name,
			fieldLabel: options.fieldLabel,
			width: options.width,
			disabled: options.disabled,
			value: options.value,
			minValue: 0,
       	    maxValue: 100,
			applyTo: Ext.getDom($(this).attr("id"))
       });
	}
	
	/**
	 * Created single time input
	 */
	$.fn.renderTimeInput = function(){
		options = $(this).evalOptions();
		var txt = new Ext.form.TextField({
			id: options.id,
			preventMark: true,
			width: options.width,
			fieldClass: optionsfieldClass,
			emptyText: options.emptyText,
			readOnly: options.readOnly,
			stripCharsRe: options.timeFormat?/\s{0,}[a-zA-Z]{0,}/g:null,
			maxLength: options.maxLength,
			style: options.style,
			applyTo: Ext.getDom($(this).attr("id"))
        });
		if(options.maxLength)txt.el.dom.maxLength = options.maxLength;
		
		if(options.timeFormat == "true")
			txt.on("change", function() {
				var rawValue = txt.getRawValue();
				var timeWithoutColon = /^(([0-1]?[0-9])|([2][0-3]))[0-5][0-9]$/;
				var hours = /^(([0-1]?[0-9])|([2][0-3]))$/;
				if (timeWithoutColon.match(rawValue)) {
					txt.setRawValue(rawValue.substr(0,2) + ':' + rawValue.substr(2));
				} else if (hours.match(rawValue)) {
					txt.setRawValue(rawValue + ":00");
				}
			});
		
		
		Ext.get(txt.el.dom.form).on("submit", function(e, t, o){
			if (txt.el.dom.value == txt.emptyText) {
				txt.el.dom.value = "";
			}
		});
		
	}
	
	/**
	 * Creates single ExtJS input
	 */
	$.fn.renderSingleSelect = function(){
		 options = $(this).evalOptions();
		 select = new Ext.form.ComboBox({
			id: options.id,
			hiddenId: options.hiddenId,
			disabled: options.disabled,
			readOnly: options.readOnly,
			width: options.width,
			ctCls: options.ctCls,
			cls: options.cls,
			fieldClass: options.fieldClass,
			editable: false,
            typeAhead: true,
            value: options.value,
            triggerAction: 'all',
            transform: options.id,
        	listClass:"",
			emptyText: options.emptyText,
			style: options.style ,
            forceSelection:true
       });
	   //Fixing box width.TODO: Remove Ext JS in next app stage
	   select.on("expand",function(cmp){
		  $(".x-combo-list").css("min-width",(cmp.getWidth() - 2) + "px");
		  $(".x-combo-list").css("width","auto");
		  $(".x-combo-list-inner").css("width","auto");
	   });	 
	   if(options.sort)
			select.store.sort("text", "ASC");
	};

	
	$.fn.renderInput = function(){
		
		options = $(this).evalOptions();
		$(this).attr("class","");
		var txt = new Ext.form.TextField({
			id: $(this).attr("id"),
			width: options.width,
			fieldClass: options.fieldClass,
			emptyText: options.emptyText,
			readOnly: options.readOnly,
			disabled: options.disabled,
			inputType: options.inputType,
			maxLength: options.maxLength,
			style: options.style,
			preventMark:true,
			applyTo: Ext.getDom($(this).attr("id"))}
        );
		if(options.maxLength)txt.el.dom.maxLength = options.maxLength;
		Ext.get(txt.el.dom.form).on("submit", function(e, t, o){
			if (txt.el.dom.value == txt.emptyText) {
				txt.el.dom.value = "";
			}
		});
		
		
	}
	
	$.fn.renderPasswordInput = function(){
		options = $(this).evalOptions();
		var txt = new Ext.form.TextField({
			id: $(this).attr("id"),
			width: options.width,
			fieldClass: options.fieldClass,
			emptyText: options.emptyText,
			inputType: options.inputType,
			style: options.style,
			applyTo: Ext.getDom($(this).attr("id"))
        });
		Ext.get(txt.el.dom.form).on("submit", function(e, t, o){
			if (txt.el.dom.value == txt.emptyText) {
				txt.el.dom.value = "";
			}
		});
	}
	
	/**
	 * Creates ComboBox ExtJS 
	 */
	$.fn.renderCompobox = function(){
		options = $(this).evalOptions();
		var lang = options.lang;
		var suggest = new Ext.form.ComboBox({
			id: options.id,
			hiddenId: options.hiddenId,
			disabled: options.disabled,
			width: options.width,
			emptyText: options.emptyText,
			style: options.style,
            typeAhead: options.typeAhead,
            triggerAction: 'all',
			minChars: options.minChars,
			store: new Ext.data.Store({
				proxy: new Ext.ux.data.DwrProxy({
					apiActionToHandlerMap : {
						read : {
							dwrFunction : options.method,
							getDwrArgsFunction : function(trans) {
								return [10, suggest.lastQuery, lang];
							}
						}
					}
				}),
				reader: new Ext.data.JsonReader({
					root : 'rows',
					fields : [
						{name: 'value'},
						{name: 'text'},
						{name: 'misc'}
					]
				})
			}),
			valueField: 'value',
			displayField: 'text',
            transform: options.id,
			forceSelection:true,
			hideTrigger: true,
			lastQuery:''
        });
		var data = {
			success: true,
			rows: []
		};
		
		
        for(var i = 0; i < options.data.length; i++)
			data.rows.push(
			  {value: options.data[i].value, text: options.data[i].text, misc: options.data[i].misc}
			);
        
        
		suggest.store.loadData(data);
		suggest.setValue(options.status); 
    };
    
    /**
     * Creates widjets from inputs
     */
    $.fn.createWidgets = function(){
    	context = $(this);
    	for(var wClass in CLASSES){
    		switch(wClass){
    		  case 'COMBO_CLASS':{
    			  $(CLASSES.COMBO_CLASS,$(context)).each(function(){
    					 $(this).renderCompobox();
    			  });
    			  break;
    		  }
    		  case 'SINGLE_SELECT_CLASS':{
    			  $(CLASSES.SINGLE_SELECT_CLASS,$(context)).each(function(){
    					 $(this).renderSingleSelect();
    			  }); 
    			  break;
    		  }
    		  case 'SINGLE_INPUT_CLASS':{
    			 
    			  $(CLASSES.SINGLE_INPUT_CLASS,$(context)).each(function(){
 					 $(this).renderInput();
     			  });
    			  break;
    		  }
    		  case 'SINGLE_TIME_CLASS':{
    			  $(CLASSES.SINGLE_TIME_CLASS,$(context)).each(function(){
  					 $(this).renderTimeInput();
      			  });
     			  break;
    		  }
              case 'SINGLE_SPINNER_CLASS':{
    			  $(CLASSES.SINGLE_SPINNER_CLASS,$(context)).each(function(){
  					 $(this).renderSpinnerInput();
      			  });
     			  break;
    		  }
              
              case 'SINGLE_PASSWORD_CLASS':{
    			  $(CLASSES.SINGLE_PASSWORD_CLASS,$(context)).each(function(){
  					 $(this).renderPasswordInput();
      			  });
     			  break;
    		  }
              
              case 'SERVICE_CHOISE':{
    			  $(CLASSES.SERVICE_CHOISE,$(context)).each(function(){
  					 $(this).renderServiceChoise();
      			  });
     			  break;
    		  }
              
              case 'FLIP_CONTAINER':{
            	  $(CLASSES.FLIP_CONTAINER,$(context)).each(function(){
   					 $(this).renderTogglePanel();
       			  });
      			  break;
              }
              
              case 'TABLE_SORTER':{
            	  $(CLASSES.TABLE_SORTER,$(context)).each(function(){
   					 $(this).tablesorter();
       			  });
      			  break;
              }
              
    		}
    	}
    };
    
    
    /**
	 * Authorization Panel loader
	 */
	$.fn.authorizationPanel = function(option){
		if($("#agreeWithCustomerConditions").is(":checked"))
		{
		  $("#condAgreementBox").css("display","none");
		  popup.showPopup(option.panel,'c-t',[0,200]);
		  $("."+option.container).empty();
		  $("."+option.container).append("<div class='loading_p'></div>");
		  $("."+option.container).load(window.location.href+" " + "."+option.container + ">div"
				  ,{"methodId":option.paymentId},function(data,textStatus,xhr){
		             $("."+option.container).easySwitch(option);
		  });
		}
		else
			$("#condAgreementBox").css("display","block");
	}
	
	/**
	 * Authorization Panel and payment panel cards layout
	 */
	$.fn.easySwitch = function(options){
	  options = options?options:opts;
	  opts = options;
	  $("."+ $(this).attr("class")+" > div").css("display","none");
	  //Traversing through the options and build appropriate view
	  if($("."+ $(this).attr("class")+" > div").length = 2)
	  {
		$("."+ $(this).attr("class")+" > div:eq("
			 +(options.signIn.available?"0":"1")+")").css("display","block");
		
		if((!options.signIn.req && options.signIn.available) || options.signUp.available)
		{
		  $("."+options.controlClass,$(this)).click(function(event){
			var parent = $(this).parents("div:eq(1)");
		    $(parent).toggle(500);
		    $(parent).next().toggle(500);
		    $(parent).prev().toggle(500);
		    event.stopImmediatePropagation();
		   });
		   if(options.signIn.req)
			   $("."+options.controlClass+"[denyText]",$(this)).text($("."+options.controlClass,$(this)).attr("denyText")) 
		   $("."+options.controlClass,$(this)).css("visibility","");
			   
		}
		else
		{
		   $("."+options.controlClass,$(this)).css("visibility","hidden");
		   if($("."+ $(this).attr("class")+" > div").length == 1){
		     if(!errorContainer)
			    errorContainer = $("#errorContainer>div");
		     $("."+ $(this).attr("class")+" > div[class!=notReplaceable]:eq(0)").empty().append(errorContainer);
		     $("."+ $(this).attr("class")+" > div:eq(0)").css("display","block");
		   }
		  
		}
	  }
	  else
		$("."+ $(this).attr("class")+" > div:eq(0)").css("display","block");
	  $("#" + options.signUp.controlId,$(this))
	        .css("display",options.signUp.available?"":"none"); 
	  $(this).find("#pmId").val(options.paymentId);
	}
	
	
	/**
	 * Creates Toggle panel
	 */
	$.fn.renderTogglePanel = function(options){
		if($(this).attr("initiated") == "true")
			return $(this);
		var defaults = {
			  containerClass:'.flipContainer',
			  controllerId:'#easyTogglePanelControll'
	     };
		var options = $.extend(defaults, options);
		$(options.controllerId).append("<img  src='../../stat/b2c/img/pluss.png'/>");
		$(options.controllerId).click(function(){
			$(options.containerClass).toggle(function(){
				if($(options.containerClass).is(":visible"))
				  $(options.controllerId+">img").attr("src","../../stat/b2c/img/minus.png");
				else
					$(options.controllerId+">img").attr("src","../../stat/b2c/img/pluss.png");
			});
		})
		$(this).attr("initiated","true");
		return $(this);
		
	}
	
	
	/**
	 * Slider panels loader
	 */
	$.fn.easySlider = function(options){
		if($.browser.msie && $.browser.version.indexOf("7.0") != -1)
			return this;
		// default configuration properties
		var defaults = {
			prevId: 		'prevBtn',
			prevText: 		'Previous',
			nextId: 		'nextBtn',	
			nextText: 		'Next',
			orientation:	'', //  'vertical' is optional;
			speed: 			800			
		}; 
		
		
		var options = $.extend(defaults, options);  
		/**
		 * Initiating widget
		 */
		return this.each(function() {  
			obj = $(this); 				
			var s = $("li", obj).length;
			var w = obj.width(); 
			var h = obj.height(); 
			var ts = s-1;
			var t = 0;
			var vertical = (options.orientation == 'vertical');
			$("ul", obj).css('width',s*w);	
			if(!vertical) {
				$("li", obj).css('float','left');
				$("li",obj).css("height","1px");
				$("li:eq("+t+")",obj).css("height","");
			}
			
			if(options.changer)
			{
				
				$(obj).find(".list-icon").click(function(){
					$(obj).find("ul:eq(0)").css("margin-left","0px");
					var t = 0;
					if(s>1) $("#"+options.nextId).addClass("right_active");
					$("#"+options.prevId).removeClass("left_active");
					if($(this).attr("switched") != "true")
					{
					  $(this).addClass("up");
					  $(this).attr("switched","true");
					  $(obj).find("li").css("float","");
					  $(obj).find(".controls").css("visibility","hidden");
					  $("li",obj).css("height","");
					  $(".orderServiceTitle",obj).css("visibility","");
					}
					else{
					  $(this).removeClass("up");
					  $(this).attr("switched","false");
					  $(obj).find("li").css("float","left");
					  if(s>0)
					  {
						  $("#title_panel").text( $("ul",obj).find("li:eq(0)").find(".orderServiceTitle").text());  
					      $(obj).find(".controls").css("visibility","");
					  }
					  $("li",obj).css("height","1px");
					  $("li:eq("+t+")",obj).css("height","");
					  $(".orderServiceTitle",obj).css("visibility","hidden");
					}
				});
				
				if($(obj).attr("isOn") == "false")
					$(obj).find(".list-icon").click();
			}
			
			if(options.customButtons)
			   $(obj).after('<span id="'+ options.prevId +'"><a href=\"javascript:void(0);\">'+ options.prevText +'</a></span> <span id="'+ options.nextId +'"><a href=\"javascript:void(0);\">'+ options.nextText +'</a></span>');		
			$("#"+options.nextId).addClass("right");
			$("#"+options.prevId).addClass("left");
			$("#title_panel").text( $("ul",obj).find("li:eq("+t+")").find(".orderServiceTitle").text());
			$(".orderServiceTitle",obj).css("visibility","hidden");
			if(s>1)
			{
				$("#"+options.nextId).click(function(){		
					animate("next");
					if (t>=ts) $(this).removeClass("right_active");
					$("#"+options.prevId).addClass("left_active");
					$("#title_panel").text( $("ul",obj).find("li:eq("+t+")").find(".orderServiceTitle").text());
					
				});
				$("#"+options.prevId).click(function(){		
					animate("prev");
					if (t<=0) $(this).removeClass("left_active");
					$("#"+options.nextId).addClass("right_active");
					$("#title_panel").text( $("ul",obj).find("li:eq("+t+")").find(".orderServiceTitle").text());
				});
				$("#title_panel").text( $("ul",obj).find("li:eq("+t+")").find(".orderServiceTitle").text());
			}
			function animate(dir){
				if(dir == "next"){
					t = (t>=ts) ? ts : t+1;	
				} else {
					t = (t<=0) ? 0 : t-1;
				};								
				if(!vertical) {
					p = (t*w*-1);
					$("li",obj).css("height","");
					$("ul",obj).animate(
						{ marginLeft: p }, 
						options.speed,function(){
							$("li",obj).css("height","1px");
							$("li:eq("+t+")",obj).css("height","");
						}
					);
					
				} else {
					p = (t*h*-1);
					$("ul",obj).animate(
						{ marginTop: p }, 
						options.speed
					);					
				}
			};
			if(s>1) $("#"+options.nextId).addClass("right_active");
		});
	  
	};
    
    
    /**
     * Initiates creating process
     * TODO:remove ext js
     */
    Ext.onReady(function(){
    	 jQuery('body').createWidgets();
    	
	});
})(jQuery);