/* 

   proScroll v0.2 (18.09.2009)
   plugin for jQuery
   (c) http://developing.name/, http://otpro.ru/
   
   using: <div id="scrolling"></div>
   
*/


(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",
			
			button_img_up: "/images/scroll/btn-up.gif",
			button_img_down: "/images/scroll/btn-dn.gif",
			button_width: 13,
			button_height: 15,
			
			bar_img_top: "/images/scroll/btn1.png",
			bar_img_middle: "/images/scroll/btn2.png",
			bar_img_bottom: "/images/scroll/btn3.png",
			bar_drag: "/images/scroll/dragbar.gif",
			bar_width: 13,
			
			box_style: "border:1px solid #000;"

		}, options);

		
		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;

		var box_top = $(this).position().top;	
		
    	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;"></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 + '">';
		code_box += '<tr><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><td width="' + options.bar_width + '">' + code_scrollbar + '</td></tr><table>';
		
		$(this).replaceWith(code_box);
		
		var content_height = parseInt($('#' + id_content).innerHeight());	

		var content_top = options.height - content_height;
		content_top = (content_top < 0 ? 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;
	
		if (content_height > options.height)
		{	
			bar_height_cur = bar_height_max * options.height / content_height;
		} else {
			bar_height_cur = bar_height_max;
		}
		
		var bar_top_max = bar_height_max - bar_height_cur;
		
		$('#' + id_bar).css({
			'height' : bar_height_cur
		});
		
		
		$('#' + 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 + 5, 120, false);
				
			return false;
		});
		
		$('#' + id_up).bind("click", function(e) {	
			
			bar_top_get();
			
			$('#' + id_content).stop();
			$('#' + id_bar).stop();
			
			move_content_bar(bar_top_cur - 5, 120, false);
				
			return false;
		});

		
		$('#' + id_bar).bind("mousedown", function(e) {
			
			if (bar_move) return false;
			
			bar_top_get();
			bar_top_cur = (e.pageY - box_top - options.button_height) - bar_top_cur;
					
			$("body").bind("mousemove", function(e) {
				
				bar_move = true;	
					
				move_margin = (e.pageY - box_top - 15) - 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 - box_top - 15) - bar_height_cur / 2;	
			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, 150, false);
			
			return false;		
		});		

		
		function bar_top_get()
		{
			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);