var MOV = 'yes';
var INDEX = 1;
//-------------------------------------------------------------------------------------------
(
    //------------------------------------------------------------------------------------------------------------------------------------------------------------------------
    function($)
    {
        //--------------------------------------------------------------------------------------------------------------------------------------------------------------------
         $.fn.slider = function(settings)
        {
            var config = {
                              nav_ul:           "#nav-ul____",
                              nav_items:        "#nav-ul____ li",
                              nav_slider:       ".drag-slider____",
                              nav_slider_arrow: ".drag-slider-arrow____",
                              handle:           ".handle____",
                              use_hashchange:   false,
                              color_on:         "#00ff00",
                              color_off:        "#ff0000"
                          };
            //---------------------------------------------------------------------------------------------------------------------------------------------------------------
            if (settings) $.extend(config, settings);
            //---------------------------------------------------------------------------------------------------------------------------------------------------------------
            this.each(function(i)
            {
                var $this             = $(this),
                    $nav_ul           = $this.find(config.nav_ul),
                    $nav_items        = $this.find(config.nav_items),
                    $nav_slider       = $this.find(config.nav_slider),
                    $nav_slider_arrow = $this.find(config.nav_slider_arrow);
                //-----------------------------------------------------------------------------------------------------------------------------------------------------------
                $nav_items.data("borderLeftColor", $nav_items.css("borderLeftColor"));
                //-----------------------------------------------------------------------------------------------------------------------------------------------------------
                // handle navigate by click
                /*$nav_ul.delegate("li", "click", function(evt)
                                                 {
                                                      var $this          = $(this),
                                                          nav_item_width = $nav_ul.find("li").width(),
                                                          index          = $nav_ul.find("li").index(this),
                                                          slide_to_xpos  = index * nav_item_width;
      
                                                      //$nav_slider.trigger("moveto", [index * nav_item_width, 300, "easeOutQuad"]);
                                                  }
                                )
                        .delegate("li", "mouseover", function() { if(!$nav_slider.hasClass("ui-draggable-dragging")) { var index = $nav_ul.find("li").index(this); } } )
                        .delegate("li", "mouseout", function() { if(!$nav_slider.hasClass("ui-draggable-dragging")) { var index = $nav_ul.find("li").index(this); } } );*/
                //-----------------------------------------------------------------------------------------------------------------------------------------------------------
                $nav_slider.find(config.handle).mousedown ( function() {  $(this).addClass("selected");    } )
                                               .mouseup   ( function() {  $(this).removeClass("selected"); } );
                //-----------------------------------------------------------------------------------------------------------------------------------------------------------
                $nav_slider.draggable
                (
                    {
                        containment: 'parent',
                        axis:        'x',
                        handle:      config.handle,
                        stop: function(evt, ui)
                        {
                            //alert('83: .nav_slider function');
                            // determine proxity/place to nearest nav item
                            var $nav_items     = $nav_ul.find("li"),
                                nav_item_width = $nav_items.width(),
                                index          = Math.ceil((ui.position.left - (nav_item_width / 2)) / nav_item_width),
                                slide_to_xpos  = 0;
                            INDEX = index;
                            if(index > $nav_items.length - 1)  {  index = $nav_items.length - 1;  }
 
                            slide_to_xpos = index * nav_item_width;

                            $(this).trigger("moveto", slide_to_xpos);
							//------------------------------------------------------------------------------------------
							$("#nav-ul____ li.current____").removeClass("current____");
							//$nav_items.eq(index).addClass("current");
							//------------------------------------------------------------------------------------------
                        },
                        
                        drag: function(evt, ui)
                        {
                            //alert('101: .nav_slider:drag function');
                            $nav_slider.css({"left": 0})    
                            $nav_slider_arrow.css({"margin-left": ui.position.left});         
                        }
                    }
                )
                .bind("mousedown", function()
                                   {
                                       $nav_items.animate({"borderLeftColor": config.color_off}, 200, "easeOutQuad");
                                   }
                      )
                .bind( "mouseup", function()
                                  {
									  MOV = 'no';
									  //$nav_items.eq(INDEX).addClass("current");
                                      //$("#nav-ul li.current").trigger("click");
									  //$nav_items.eq(INDEX).trigger("click");
                                  }
                     )
                .bind("moveto", function(evt, slide_to_xpos, duration, easing)
                                {
                                     $(this).animate({left: slide_to_xpos}, duration || 200, easing || "easeOutBack");
                                     $nav_slider_arrow.animate({"margin-left": slide_to_xpos}, duration || 200, easing || "easeOutBack");
									 $nav_items.eq(INDEX).trigger("click");
                               }
                     );
                //-----------------------------------------------------------------------------------------------------------------------------------------------------------
                if(config.use_hashchange)
                {
                    
                }
                //-----------------------------------------------------------------------------------------------------------------------------------------------------------
            });
            //---------------------------------------------------------------------------------------------------------------------------------------------------------------
            return this;
            //---------------------------------------------------------------------------------------------------------------------------------------------------------------
        };
        //-------------------------------------------------------------------------------------------------------------------------------------------------------------------
    }
    //-----------------------------------------------------------------------------------------------------------------------------------------------------------------------
)(jQuery);
//###########################################################################################################################
$(
    function()
    {
        $("#nav-wrapper____").slider();
    }
);