/* 

   proScroll v0.3 (26.08.2010)
   plugin for jQuery
   (c) http://developing.name/, http://otpro.ru/
   
   demo-page: http://developing.name/divscroll/
   
*/


(function($) {
  


  $.event.special.mousewheel = {

    setup: function() {

      if (this.addEventListener)
        this.addEventListener('DOMMouseScroll', $.event.special.mousewheel.handler, false);

      this.onmousewheel = $.event.special.mousewheel.handler;

    },

    teardown: function() {

      if (this.removeEventListener)
        this.removeEventListener('DOMMouseScroll', $.event.special.mousewheel.handler, false);

      this.onmousewheel = null;
    },

    handler: function( event ) {

      event = $.event.fix(event || window.event);

      event.type = "mousewheel";
      event.delta = 0;

      if ( event.wheelDelta < 0 || event.detail > 0 )
        event.delta = -1;
      else if (  event.wheelDelta > 0 || event.detail < 0 )
        event.delta = 1;

      $.event.handle.apply( this, [event] );

      return ;
    }
  };

  
  
  $.fn.scroll = function(options) {
    
    options = $.extend({
      width: 600,
      height: 100,
      background: "#EEEEEE",
      style: "", 
      
      button_img_up: "/img/scroll/btn-up.gif",
      button_img_down: "/img/scroll/btn-dn.gif",
      button_width: 13,
      button_height: 15,
      
      bar_img_top: "/img/scroll/btn1.png",
      bar_img_middle: "/img/scroll/btn2.png",
      bar_img_bottom: "/img/scroll/btn3.png",
      bar_drag: "/img/scroll/dragbar.gif",
      bar_width: 13,
      
      scroll_speed: 80,
      
      bar_align: "right",
      
      box_style: "border: 1px solid #000;"

    }, options);
    

    if (options.button_height * 2 > options.height)
    {
      options.height = options.button_height * 2;
    }
    
    $(this).each( function(i) {

      if ( $(this).attr("id") == '' )
      {
        $(this).attr("id", 'scrollingrnd' + i);
      }
      
      var id_prosc = 'prosc';
      var id_rnd = $(this).attr("id") + id_prosc;
      var id_box = 'box' + id_rnd;
      var id_content = 'content' + id_rnd;
      var id_bar = "bar" + id_rnd;
      var id_line = "line" + id_rnd;
      var id_up = "up" + id_rnd;
      var id_down = "down" + id_rnd;

      code_bar  = '<table cellpadding="0" cellspacing="0" width="100%" height="100%" border="0" id="' + id_bar + '">';
      code_bar += '<tr><td height="4" style="background: url(' + options.bar_img_top + ') no-repeat;"></td></tr>';
      code_bar += '<tr><td style="background: url(' + options.bar_img_middle + ') repeat-y; width: ' + options.button_width + 'px;"></td></tr>';
      code_bar += '<tr><td height="4" style="background: url(' + options.bar_img_bottom + ') no-repeat;"></td></tr>';
      code_bar += '</table>';

      code_scrollbar  = '<table height="' + options.height + '" width="' + options.bar_width + '" cellpadding="0" cellspacing="0">';
      code_scrollbar += '<tr><td width="' + options.button_width + '" height="' + options.button_height + '"><a href="" id="' + id_up + '"><img src="' + options.button_img_up + '" border="0"></a></td></tr>';
      code_scrollbar += '<tr><td style="background: url(' + options.bar_drag + ') center repeat-y;" valign="top" id="' + id_line + '">' + code_bar + '</td></tr>';
      code_scrollbar += '<tr><td width="' + options.button_width + '" height="' + options.button_height + '"><a href="" id="' + id_down + '"><img src="' + options.button_img_down + '" border="0"></a></td></tr>';
      code_scrollbar += '</table>';

      code_box  = '<table id="' + id_box + '" border="0" cellpadding="0" cellspacing="0" width="' + options.width + '" height="' + options.height + '" bgcolor="' + options.background + '" style="' + options.style + '">';
      code_box += '<tr>' + (options.bar_align == 'left' ? '<td width="' + options.bar_width + '">' + code_scrollbar + '</td>' : '' ) + '<td><div style="position:relative; overflow:hidden; width:' + (options.width - options.bar_width) + 'px; height:' + options.height + 'px; ' + options.box_style + ' ">';
      code_box += '<div id="' + id_content + '" style="position:absolute; left:0px; top:0px; visibility: visible;">' + $(this).html() + '</div></div></td>' + (options.bar_align == 'right' ? '<td width="' + options.bar_width + '">' + code_scrollbar + '</td>' : '' ) + '</tr><table>';

      $(this).replaceWith(code_box);
      
      var bar_top = $('#' + id_line).position().top;    

      var content_height = 0;
      var content_top = 0;
      var bar_height_max = options.height - options.button_height * 2;
      var bar_height_cur = 0;
      var bar_top_max = 0;
      var bar_top_cur = 0;
      var bar_move = false;
      var bar_top_max = 0;

      setInterval(function() {

        var content_height_true = parseInt($('#' + id_content).innerHeight());

        if (content_height == content_height_true)
        {
          return;
        }
        
        content_height = content_height_true;
        
        content_top = options.height - content_height;

        if (content_height > options.height)
        {
          bar_height_cur = bar_height_max * options.height / content_height;
        } else {
          bar_height_cur = bar_height_max;
        }

        bar_top_max = bar_height_max - bar_height_cur;

        $('#' + id_bar).css({
          'height' : bar_height_cur
        });

      }, 500);


      $('#' + id_down).bind("mouseover", function(e) {
        if (!bar_move)
        {
          $('#' + id_bar).animate({marginTop: bar_top_max + "px"}, 1500)
          $('#' + id_content).animate({"top": content_top + "px"}, 1500);
        }
      });


      $('#' + id_up).bind("mouseover", function(e) {
        if (!bar_move)
        {
          $('#' + id_bar).animate({marginTop: "0px"}, 1500);
          $('#' + id_content).animate({"top": "0px"}, 1500);
        }
      });

      $('#' + id_down + ', #' + id_up).bind("mouseout", function(e) {
        if (!bar_move)
        {
          $('#' + id_content).stop();
          $('#' + id_bar).stop();
        }
      });

      $('#' + id_down).bind("click", function(e) {

        bar_top_get();

        $('#' + id_content).stop();
        $('#' + id_bar).stop();

        move_content_bar(bar_top_cur + 15, options.scroll_speed, false);

        return false;
      });

      $('#' + id_up).bind("click", function(e) {

        bar_top_get();

        $('#' + id_content).stop();
        $('#' + id_bar).stop();

        move_content_bar(bar_top_cur - 15, options.scroll_speed, false);

        return false;
      });


      $('#' + id_bar).bind("mousedown", function(e) {

        if (bar_move) return false;

        bar_top_get();
        bar_top_cur = (e.pageY - bar_top) - bar_top_cur;

        $("body").bind("mousemove", function(e) {

          bar_move = true;

          move_margin = (e.pageY - bar_top) - bar_top_cur;
          move_content_bar(move_margin, 0, true);

          return false;
        });

        $("body").one("mouseup", function(e) {
          $("body").unbind("mousemove");
          bar_move = false;
        });

        return false;
      });


      $('#' + id_line).bind("click", function(e) {

        if (bar_move) return false;

        bar_move = true;

        bar_top_get();
                
        move_margin = (e.pageY - bar_top - bar_height_cur / 2);
        
//        alert(e.pageY + '-' + bar_top + '=' + move_margin + ' ' + bar_top_max);

        move_content_bar(move_margin, 0, false);

        return false;
      });


      $('#' + id_box).bind('mousewheel', function (event) {

        if (bar_move) return false;

        bar_move = true;

        bar_top_get();

        move_margin = bar_top_cur + (-1 * event.delta * 90 * 50 / content_height);
        move_content_bar(move_margin, options.scroll_speed, false);

        return false;
      });


      function bar_top_get()
      {

        if (bar_top != $('#' + id_line).position().top )
        {
          bar_top = $('#' + id_line).position().top;
        }

        bar_top_cur = parseInt($('#' + id_bar).css('marginTop'));
        bar_top_cur = (isNaN(bar_top_cur) ? 0 : bar_top_cur);

        return ;
      }


      function move_content_bar(top, sec, move)
      {

        if (top > bar_top_max)
        {
          top = bar_top_max;
        }
        else if (top < 0)
        {
          top = 0;
        }

        $('#' + id_bar).animate({marginTop: top + "px"}, sec)

        top = top * content_top / bar_top_max;

        $('#' + id_content).animate({"top": top + "px"}, sec, function () {
          bar_move = move;
        });
      }

    });

  }
          
})(jQuery);