(function($){ 
  $.fn.HSlider = function(options)
  {
    var options = jQuery.extend({
      auto: false,
      auto_speed: 1500,
      direction: 'right',
      speed: 500,
      addControl: true
    },options);
    return jQuery.each(this, function(){
       var _this = $(this);
       var item_container = $('ul', _this);
       var item_width = $('li', item_container).outerWidth(true);
       var item_count = $('li', item_container).length;
       var slider_width = _this.innerWidth();
       var class_area = 'uid'+randomString(8);
       function init(){
         _this.before('<div class="hslider-area '+class_area+'"></div>');
         $('.'+class_area).append(_this).css({position: 'relative', width: _this.outerWidth()+'px'});
         if( item_container.width() <= 0 )
         {
	         item_container.css({width: item_count * item_width +'px'});
         }
         if(options.auto){
           initAutoSlide();
         } else {
           addControls();
         }
       }
       function initAutoSlide(){
         eval(options.direction + '()');
         setTimeout(initAutoSlide, options.auto_speed);
       }
       function addControls(){
         if( options.addControl || (item_count * item_width > slider_width) ){
           $('.'+class_area).prepend('<div class="left-handle" style="cursor: pointer; position: absolute; top: 25%; left: -10px; width: 8px; height: 23px; background: url(\'/slider/images/slide-handle.png\') 0 0;"></div>');
           $('.'+class_area).append('<div class="right-handle" style="cursor: pointer; position: absolute; top: 25%; right: -10px; width: 8px; height: 23px;  background: url(\'/slider/images/slide-handle.png\') -15px 0;"></div>');
           $('.left-handle', _this.parents('.hslider-area')).click(function(){return left();});
           $('.right-handle', _this.parents('.hslider-area')).click(function(){return right();});
         }
       }
       var left = function()
       {
         var last_item = $('li:last-child',item_container);
         item_container.prepend(last_item).css({marginLeft: '-'+item_width+'px'});
         item_container.stop(true, true).animate({marginLeft: '0px'}, options.speed);
         return false;
       };
       var right = function()
       {
         var first_item = $('li:first-child',item_container);
         item_container.stop(true, true).animate({marginLeft: '-'+item_width+'px'}, options.speed, function(){
	         $(this).css({marginLeft: '0px'});
            item_container.append(first_item);
         });
         return false;
       };
       init();
   });
  };
  
  $.fn.VSlider = function(options)
  {
    var options = jQuery.extend({
      auto: false,
      auto_speed: 1500,
      direction: 'bottom',
      speed: 500
    },options);
    return jQuery.each(this, function(){
       var _this = $(this);
       var item_container = $('ul', _this);
       var item_height = $('li', item_container).outerHeight(true);
       var item_count = $('li', item_container).length;
       var slider_height = _this.innerHeight();
       var class_area = 'uid'+randomString(8);
       function init(){
         _this.before('<div class="vslider-area '+class_area+'"></div>');
         $('.'+class_area).append(_this).css({position: 'relative', width: _this.outerWidth()+'px'});
         if(options.auto){
           initAutoSlide();
         } else {
           addControls();
         }
       }
       function initAutoSlide(){
         eval(options.direction + '()');
         setTimeout(initAutoSlide, options.auto_speed);
       }
       function addControls(){
         if(item_count * item_height > slider_height){
           $('.'+class_area).prepend('<div class="top-handle" style="cursor: pointer; position: absolute; top: -18px; left: 40%; width: 45px; height: 15px; background: url(\'/slider/images/slide-handle.png\') 0 -45px;"></div>');
           $('.'+class_area).append('<div class="bottom-handle" style="cursor: pointer; position: absolute; bottom: -18px; left: 40%; width: 45px; height: 15px;  background: url(\'/slider/images/slide-handle.png\') 0 -60px;"></div>');
           $('.top-handle', _this.parents('.vslider-area')).click(function(){return top();});
           $('.bottom-handle', _this.parents('.vslider-area')).click(function(){return bottom();});
         }
       }
       var top = function()
       {
         var last_item = $('li:last-child',item_container);
         item_container.prepend(last_item).css({marginTop: '-'+item_height+'px'});
         item_container.stop(true, true).animate({marginTop: '0px'}, options.speed);
         return false;
       };
       var bottom = function()
       {
         var first_item = $('li:first-child',item_container);
         item_container.stop(true, true).animate({marginTop: '-'+item_height+'px'}, options.speed, function(){
            $(this).css({marginTop: 0});
            item_container.append(first_item);
         });
         return false;
       };
       init();
   });
  }
})(jQuery);

function randomString(length) {
  var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz'.split('');
  if (! length) {
    length = Math.floor(Math.random() * chars.length);
  }
  var str = '';
  for (var i = 0; i < length; i++) {
    str += chars[Math.floor(Math.random() * chars.length)];
  }
  return str;
}