!function ($) {

  "use strict"; // jshint ;_;


 /* SWITCHY CLASS DEFINITION
  * ====================== */

  var Switchy = function (element, options) {
    this.options = options;
	this.options.draggable = (this.options.draggable) ? !($(element).is(':disabled')) : this.options.draggable;
	this.options.doubleConfirm = (this.options.doubleConfirm == undefined) ? false : this.options.doubleConfirm;
    this.$element = $(element);
    this.$container = $("<div class='"+((options.css != undefined) ? options.css : "switchy-container")+"'></div>");
	//alert(this.$container.html());
    this.$bar = $("<div class='switchy-bar'></div>");
    this.$slider = $("<div class='switchy-slider' draggable='"+((this.options.draggable) ? 'true' : 'false' )+"'></div>");
    this.$options = $(element).children('option');
    this.numberOfOptions = this.$options.length;
    this.initialOptionIndex = this.$options.filter('[value="'+$(element).val()+'"]').index(); 
    this.init();
  }

  Switchy.prototype = {
    constructor: Switchy,

    lastSliderPosition: null,
	
    init: function(){
      var that = this;
      
	  
	  var str = this.$element.val();
	  var element_val_arr = str.split('-');
	  var element_val = Number(element_val_arr[0]);
	  
	  
		  
	  if(this.$element.next().find('.switchy-bar').length ){
		  
		  if(this.options.slideTo != undefined){
			  
			  this.$container =  this.$element.next();
			  this.$bar = this.$container.find('.switchy-bar');
			  this.$slider = this.$bar.find('.switchy-slider');
			  
			  str = this.options.slideTo;
			  element_val_arr = str.split('-');
			  element_val = Number(element_val_arr[0]);
			  
			  that.$element.val(element_val);
			  
			  //var barGrid = this.$bar.innerWidth() / (this.numberOfOptions - 1);
			  var barGrid = this.$container.width() / (this.numberOfOptions - 1);
			  var nextOptionIndex = that.$options.filter('[value="'+that.$element.val()+'"]').index();
			  
				if(this.lastSliderPosition != nextOptionIndex){
					that.moveSliderTo(barGrid, nextOptionIndex, false);
				}
			
		  } //if(this.options.slideTo != undefined){
		  
	  } else { //if(this.$element.next().find('.switchy-bar').length){
		  // hide original select
		 
		  this.$element.css({ position: 'absolute', left: '-9999px' })
		  // Prepare the slider for the DOM
		  this.$container.append(this.$bar.append(this.$slider));
		  // Append the slider to the DOM
		  this.$element.after(this.$container);
	
		  this.lastSliderPosition = this.initialOptionIndex;
		  
		  //var barGrid = this.$bar.innerWidth() / (this.numberOfOptions - 1);
		  var barGrid = this.$container.width() / (this.numberOfOptions - 1);
		  
		  
		  // Position slider to initial value
		  this.$slider.css({
			left: that.sliderPosition(barGrid, this.initialOptionIndex)
		  });
		 
		  
		  if (this.options.triggerByOption != undefined){
			  
			  this.$bar.css("background", (element_val == 1 || element_val == 2) ? ((this.options.color != undefined) ? this.options.color : "#39BEAA") : ((this.options.secondaryColor != undefined) ? this.options.secondaryColor : "#EEEEEE"));
		  } else {
		  	this.$bar.css("background", (element_val == 1) ? ((this.options.color != undefined) ? this.options.color : "#39BEAA") : ((this.options.secondaryColor != undefined) ? this.options.secondaryColor : "#EEEEEE"));
		  }
	
		  // When original select is updated
		  this.$element.on('change', function(e){
			  
			var nextOptionIndex = that.$options.filter('[value="'+that.$element.val()+'"]').index();
	
			if (that.lastSliderPosition != nextOptionIndex){
			  that.moveSliderTo(barGrid, nextOptionIndex, false);
			}
			
			
		  });
		  
	
		  if (this.$slider.drag != undefined && this.options.draggable == true){
			  
			this.$slider.
			  drag('end', function(ev, dd){
				var currentSliderPosition = that.$slider.position().left + (that.$slider.outerWidth(true) / 2),
					currentOptionIndex = Math.round(currentSliderPosition / barGrid);
				
				that.moveSliderTo(barGrid, currentOptionIndex, true);
			  }).
			  drag(function(ev, dd){
				var limit = {
				  left: 0,
				  right: that.$bar.innerWidth() - that.$slider.outerWidth(true)
				}
				$(this).css({
				  left: Math.min(limit.right, Math.max(limit.left, dd.offsetX))
				});
			  }, { relative: true });
		  } //if (this.$slider.drag != undefined && this.options.draggable == true){
	  
	  
	  
	  
	  
	  
	  	  if(!(this.$element.prop('disabled'))){
	  
	  			var doubleConfirm = Boolean(this.options.doubleConfirm);
				
				
			  if (this.options.triggerByOption != undefined){
				  this.$bar.on('click', function(e){
					  
					  var currentSliderPosition = that.$slider.position().left,
						currentOptionIndex = Math.ceil(currentSliderPosition / barGrid),
						clickPosition = e.pageX - that.$bar.offset().left,
						nextOptionIndex = Math.round(clickPosition / barGrid);
						
						
						if (currentOptionIndex != nextOptionIndex){
							
						   if(doubleConfirm){
							   
							   
							   if($( "#dialog" ).length){
											
									var t = '';
									var confirmBtn_t 	= '';
									var cancelBtn_t 	= '';
									
									
									switch(Number(global_js_params.lang)){
										default:
										case 1:
											t 				= 'Double Confirm';
											confirmBtn_t 	= 'Confirm';
											cancelBtn_t 	= 'Cancel';
											
											$( "#dialog" ).html('Are you sure to confirm ?');
											break;
										case 2:
											t 				= '再次確認';
											confirmBtn_t 	= '確定';
											cancelBtn_t 	= '取消';
											
											$( "#dialog" ).html('您是否確定更改？');
											break;
										case 3:
											t 				= '再次确认';
											confirmBtn_t 	= '确定';
											cancelBtn_t 	= '取消';
											
											$( "#dialog" ).html('您是否确定更改？');
											break;
									}
									
									
									$( "#dialog" ).dialog({
										dialogClass:"ui-datepicker-dialog",
										open: function(){
											$('.ui-widget-overlay').hide().fadeIn();
											$('.ui-widget-overlay').bind('click', function() {
												$('#dialog').dialog('close');
											})
										},
										show: {
											effect: "clip",
											duration: 200
										}, 
										hide:  {
											effect: "clip",
											duration: 200
										}, 
										title:t,
										resizable: false,
										autoOpen: true,
										draggable: false,
										width: 'auto',
										modal: true,
										closeOnEscape: false,
										buttons: [
											{
												text: confirmBtn_t,
												click: function() {
													
													// move slider position
								  					that.moveSliderTo(barGrid, nextOptionIndex, true);
								  
													$( this ).dialog( "close" );
												}
											},
											{
												text: cancelBtn_t,
												click: function() {
													$( this ).dialog( "close" );
												}
											}
											
										]
									});
									
							   } else { // if($( "#dialog" ).length){
								   that.moveSliderTo(barGrid, nextOptionIndex, true);
								} // if($( "#dialog" ).length){
									
							} else { //  if(doubleConfirm){
								
								
								  // move slider position
								  that.moveSliderTo(barGrid, nextOptionIndex, true);
								
								
							} //  if(doubleConfirm){
					  
					  
						} // if (currentOptionIndex != nextOptionIndex){
			
					
				  });
			  } else { //if (this.options.triggerByOption != undefined){
				  // ---- tomyccc ----
				  this.$container.on('click', function(e){
					  
					  var nextOptionIndex = that.$options.filter('[value="'+that.$element.val()+'"]').index();
					  nextOptionIndex = (nextOptionIndex+1 > that.numberOfOptions-1) ? 0 : nextOptionIndex+1;
					  
					  
					   if(doubleConfirm){
						   
						   
						   if($( "#dialog" ).length){
										
								var t = '';
								var confirmBtn_t 	= '';
								var cancelBtn_t 	= '';
								
								
								switch(Number(global_js_params.lang)){
									default:
									case 1:
										t 				= 'Double Confirm';
										confirmBtn_t 	= 'Confirm';
										cancelBtn_t 	= 'Cancel';
										
										$( "#dialog" ).html('Are you sure to confirm ?');
										break;
									case 2:
										t 				= '再次確認';
										confirmBtn_t 	= '確定';
										cancelBtn_t 	= '取消';
										
										$( "#dialog" ).html('您是否確定更改？');
										break;
									case 3:
										t 				= '再次确认';
										confirmBtn_t 	= '确定';
										cancelBtn_t 	= '取消';
										
										$( "#dialog" ).html('您是否确定更改？');
										break;
								}
								
								
								$( "#dialog" ).dialog({
									dialogClass:"ui-datepicker-dialog",
									open: function(){
										$('.ui-widget-overlay').hide().fadeIn();
										$('.ui-widget-overlay').bind('click', function() {
											$('#dialog').dialog('close');
										})
									},
									show: {
										effect: "clip",
										duration: 200
									}, 
									hide:  {
										effect: "clip",
										duration: 200
									}, 
									title:t,
									resizable: false,
									autoOpen: true,
									draggable: false,
									width: 'auto',
									modal: true,
									closeOnEscape: false,
									buttons: [
										{
											text: confirmBtn_t,
											click: function() {
												
												that.moveSliderTo(barGrid, nextOptionIndex, true);
												
												$( this ).dialog( "close" );
											}
										},
										{
											text: cancelBtn_t,
											click: function() {
												$( this ).dialog( "close" );
											}
										}
										
									]
								});
								
						   } else { // if($( "#dialog" ).length){
							   that.moveSliderTo(barGrid, nextOptionIndex, true);
							} // if($( "#dialog" ).length){
								
						
						} else { //  if(doubleConfirm){
							that.moveSliderTo(barGrid, nextOptionIndex, true);
					  	} //  if(doubleConfirm){
					  
					  
					  
					  
			  });
			  // ---- END --- tomyccc ----
		   
		  
			  
			} //if(!(this.$element.prop('disabled'))){
		  
	  } //if(this.$element.next().find('.switchy-bar').length){
		  
		  
	
	} //if(this.options.slideTo){
			 
		
		this.$bar.css("cursor", (this.$element.prop('disabled')) ? "default" : "pointer");
		this.$slider.css("cursor", (this.$element.prop('disabled')) ? "default" : "pointer");
		this.$container.css("opacity", (this.$element.prop('disabled')) ? "0.6" : "1.0");
		
	  
		  
    },

    sliderPosition: function(barGrid, optionIndex){
      var add = null;

      if (optionIndex == 0){
        add = 0;
      } else if (optionIndex == this.numberOfOptions - 1){
        add = -(this.$slider.outerWidth(true));
      } else {
        add = -(this.$slider.outerWidth(true) / 2);
      }
      return (barGrid * optionIndex) + add;
    },

    moveSliderTo: function(barGrid, nextOptionIndex, triggerChange){
		
      var leftPosition = this.sliderPosition(barGrid, nextOptionIndex);
	 
      // move slider position
      if (leftPosition != null){
        this.$slider.stop().animate({
          left: leftPosition
        }, "fast");
      }
      // update original select value
      this.$options.removeAttr('selected');
      this.$options.eq(nextOptionIndex).prop('selected', 'selected');
	  
	  //this.$element.val()
	  var str = this.$element.val();
	  var element_val_arr = str.split('-');
	  var element_val = Number(element_val_arr[0]);
	  
	  
	  if (this.options.triggerByOption != undefined){
		  this.$bar.stop().animate({"backgroundColor": (element_val == 1 || element_val == 2) ? ((this.options.color != undefined) ? this.options.color : "#39BEAA") : ((this.options.secondaryColor != undefined) ? this.options.secondaryColor : "#EEEEEE")}, "fast");
	  } else {
	  	this.$bar.stop().animate({"backgroundColor": (element_val == 1) ? ((this.options.color != undefined) ? this.options.color : "#39BEAA") : ((this.options.secondaryColor != undefined) ? this.options.secondaryColor : "#EEEEEE")}, "fast");
	  }
	  
      if (triggerChange == true)
        this.$element.trigger('change');
        this.lastSliderPosition = nextOptionIndex;
	  
    }
	
	
  }

  /* SWITCHY PLUGIN DEFINITION
   * ======================= */

  $.fn.switchy = function (option) {
    return this.each(function () {
      var $this = $(this),
        options = $.extend({}, $.fn.switchy.defaults, typeof option == 'object' && option);
      new Switchy(this, options);
    })
  }

  $.fn.switchy.defaults = {
    draggable: true
  }

  $.fn.switchy.Constructor = Switchy
}(window.jQuery);