(function($) {
	$.fn.main_feature_widget = function(seconds, random) {

    var item_num = $("#feature_selector_list > div").size();
    var item_height = 76 // Item height is 74px
    var total_height = item_num * item_height; // 8 is your main feature number. need to change it with ruby code.
    var display_height = 4 * item_height; // If we want cycle the side list, we need to change 5 to 4.
    var position_bottom = total_height - display_height;  
    var $feature_selector_list = $("#feature_selector_list");
    var random_selected_item = Math.floor(Math.random()*item_num+1); // Generate a radom from 1 to item_num .
    var future_position = $feature_selector_list.position().top;
    var in_animation = false;
    
    var disable_prev_and_next_button = function() {
      var position_top = $feature_selector_list.position().top;
      if (position_top == 0) {
        $('#feature_prev').css('cursor', 'auto');       
        $('#feature_prev').find("img").attr("src", "/images/feature_scroller_up_off.gif");
      }
      if (position_top == -position_bottom) {
        $('#feature_next').css('cursor', 'auto');       
        $('#feature_next').find("img").attr("src", "/images/feature_scroller_down_off.gif");      
      }
    }
    
    var can_scroll_up = function() {
      if (future_position > 0) { 
        feature_prev_bind_event();
        return false; 
      }
      return true;      
    }
    
    var can_scroll_down = function() {
      if (future_position < -parseInt(position_bottom)) { 
        feature_next_bind_event();
        return false;
      }
      return true;
    }    

    var prev_and_next_hover = function(position_top) {
      var $feature_prev = $('#feature_prev img');
      var $feature_next = $('#feature_next img');
      var feature_prev_img = "/images/feature_scroller_up.gif";
      var feature_prev_on_img = "/images/feature_scroller_up_on.gif";
      var feature_next_img = "/images/feature_scroller_down.gif";
      var feature_next_on_img = "/images/feature_scroller_down_on.gif";
      // var position_top = position.top; 
      if (position_top != 0) {
        $feature_prev.hover(function() {
          $feature_prev.attr("src", feature_prev_on_img);
        }, function() {
          $feature_prev.attr("src", feature_prev_img);        
        })
      }
      if (position_top != -position_bottom) {
        $feature_next.hover(function() {
          $feature_next.attr("src", feature_next_on_img);
        }, function() {
          $feature_next.attr("src", feature_next_img);        
        })
      };
      // Notice, we need to unbind hover action.
      if (position_top == 0) {
        $feature_prev.unbind('mouseenter mouseleave');
      }
      if (position_top == -position_bottom) {
        $feature_next.unbind('mouseenter mouseleave');
      };
    }

    var feature_prev_bind_event = function() { 
      $('#feature_prev').bind('click', feature_prev_handler); 
    }
    var feature_next_bind_event = function() { 
      $('#feature_next').bind('click', feature_next_handler);      
    }    

    var feature_prev_handler = function() {
      if (in_animation) {
        return false;
      };      
      combine_unbind_actions();
      if (can_scroll_up()) {
        var position = $feature_selector_list.position();
        if (position.top <= -parseInt(item_height)) {
          future_position = position.top + parseInt(item_height);
          in_animation = true;
          $feature_selector_list.animate({top: '+=' + item_height}, 500, function() { 
            combine_bind_actions($feature_selector_list.position());
            $('#feature_next').css('cursor', 'pointer');       
            $('#feature_next').find("img").attr("src", "/images/feature_scroller_down.gif");
            in_animation = false;
          });
        } else {
          // go to bottom
          future_position = position.top - parseInt(position_bottom);
          $feature_selector_list.animate({top: -position_bottom}, 500, function() { feature_prev_bind_event(); });      
        }        
      };
    };

    var feature_next_handler = function() {
      if (in_animation) {
        return false;
      };      
      combine_unbind_actions();
      if (can_scroll_down()) {
        var position = $feature_selector_list.position();
        // var position = $("#feature_selector_list").position();     
        if (position.top > -position_bottom) {
          future_position = position.top - parseInt(item_height);
          in_animation = true;          
          $feature_selector_list.animate({top: '-=' + item_height}, 500, function() {
            combine_bind_actions($feature_selector_list.position().top);
            $('#feature_prev').css('cursor', 'pointer');       
            $('#feature_prev').find("img").attr("src", "/images/feature_scroller_up.gif");
            in_animation = false;             
          });
        } else {
          // go to top
          future_position = 0;
          $feature_selector_list.animate({top: 0}, 500, function() { feature_next_bind_event(); });
        }        
      };
    };  

    var combine_unbind_actions = function(position_top) {
      $('#feature_prev').unbind('click', feature_prev_handler);
      $('#feature_next').unbind('click', feature_next_handler);
    }
    var combine_bind_actions = function(position_top) {
      feature_prev_bind_event();
      feature_next_bind_event();
      // disable_prev_and_next_button();
      prev_and_next_hover(position_top);          
    }

    // Set a defatule banner.
    // $(".feature_large_wrap:first").show();    

    // When click small image change background color and change big banner.
    var $feature_selector_items = $(".feature_selector", $feature_selector_list)
    var feature_selector_list_handler = function() {
      $feature_selector_items.css('cursor', 'auto');
      $feature_selector_items.unbind('click', feature_selector_list_handler);
      $feature_selector_items.removeClass("feature_selector_on").addClass("feature_selector_off");
      $(this).removeClass("feature_selector_off").addClass("feature_selector_on");
      var num = $(".feature_selector").index(this);
      if ($(".feature_large_wrap:visible").length == 1) {
        $(".feature_large_wrap:visible").fadeOut("slow", function() {
          $(".feature_large_wrap:eq("+(num - 1)+")").fadeIn();
          $(".feature_selector_off").bind('click', feature_selector_list_handler);
          $(".feature_selector_off").css('cursor', 'pointer');
        });      
      } else {
        $(".feature_large_wrap:eq("+(num - 1)+")").show();
        $(".feature_selector_off").bind('click', feature_selector_list_handler);
        $(".feature_selector_off").css('cursor', 'pointer');   
      };
    }
    
    var feature_selector_list_handler_with_out_timer = function() {
      $(document).stopTime();
    }

    $feature_selector_items.bind('click', feature_selector_list_handler);
    $feature_selector_items.bind('click', feature_selector_list_handler_with_out_timer);
    $feature_selector_items.css('cursor', 'pointer');

    var select_item = function(item_num)  {
      if (in_animation) {
        return false;
      };
      $feature_selector_items.unbind('click', feature_selector_list_handler_with_out_timer);
      $("#feature_selector_list > div:nth-child("+item_num+")").click();
      $feature_selector_items.bind('click', feature_selector_list_handler_with_out_timer);
      // We display 4 item and hide others when page load successful.
      if (item_num > 4) {
        var top_position = (item_num - 4) * item_height;
        var position = $feature_selector_list.position();
        future_position = position.top - parseInt(top_position);
        in_animation = true;
        $feature_selector_list.animate({top: -top_position}, 500, function() {
          // combine_actions($feature_selector_list.position().top);
          in_animation = false;          
        });      
      } else {
        // combine_actions($feature_selector_list.position().top);
      };
    }
    // set random_selected_item value again.
    if (random == false) {
      random_selected_item = 1;
    } 
    select_item(random_selected_item);      
    var circle = function(seconds) {
      $(document).everyTime(seconds, function(i) {
        if (random_selected_item + i <= item_num) {
          select_item(random_selected_item + i);
        } else {
          future_position = 0;
          $feature_selector_list.animate({top: 0});          
          random_selected_item = 1;
          select_item(1);          
          $(document).stopTime();
          circle(seconds); 
        }
      });    
    }
    if (seconds != 0) {
      circle(seconds);      
    };
    combine_bind_actions($feature_selector_list.position().top);
	};  
})(jQuery);