/*
tested with jquery 1.4.2, jquery-ui-1.8.1
requires plugins: jquery.mousewheel 3.0.2, ntk.jquery.utils.js
*/
function slider(options)
{
	/* --------------------------Define options defaults-----------------------------------------------------------------*/
	var o = {
		"orientation":"horizontal",/*vertical, horizontal*/
		"wide": ntk_settings.slidersWide,/* thin, medium, thick, huge*/
		"marginsWide":4, /* number > 1*/
		"animate":true, /* true, false*/
		"maxValue":100, /* number > 1*/
		"mwSpeed":20, /* number > 1*/
		"style":ntk_settings.style,
		"pathRedirect":ntk_settings.pathRedirect, /* path is calculated from html page that contains this plugin*/
		/* if page can see ntk folder no redirection is required*/

		"pathLength": 200, /* number > 32*/
		"handleLength": 20, /* number > 16*/
		"pathColorNormal": ntk_colors.sliderPathColorNormal, /* hexadecimal color*/
		"pathColorHover": ntk_colors.sliderPathColorHover, /* hexadecimal color*/
		"handleColorNormal": ntk_colors.sliderHandleColorNormal, /* hexadecimal color*/
		"handleColorHover": ntk_colors.sliderHandleColorHover, /* hexadecimal color*/
		"handleColorClick": ntk_colors.sliderHandleColorClick, /* hexadecimal color*/
		"marginsColor": ntk_colors.sliderMarginsColor, /* hexadecimal color*/


		"slide": $.noop /* passed: percent */
	}
	$.extend(o, options || {});

	var wide;
	switch(o.wide)
	{
		case "thin": {wide = 8;break;}
		case "medium": {wide = 16;break;}
		case "thick": {wide = 24;break;}
		case "huge": {wide = 32;break;}
		default: {wide = 16;break;}
	}

	var orientation;
	switch(o.orientation)
	{
		case "horizontal": {orientation = "h";break;}
		case "vertical": {orientation = "v";break;}
	}
	/* 'url("ntk/visuals/default/images/scroll_h_8px.png';*/
	var pathToImages =  'url("' + o.pathRedirect + 'ntk/visuals/' + o.style + '/images/scroll_';

	/* ----------------------------------Create Objects---------------------------------------------------------------*/

	/* -------------Path----------------------*/


	var path = $("<div><div>");
	path.css({
		"width": o.orientation == "horizontal" ?  o.pathLength : wide,
		"height": o.orientation == "vertical" ?  o.pathLength : wide,
		"background-color":o.pathColorNormal,
		"background-image":pathToImages + orientation + '_' + wide + 'px.png")',
		"background-repeat": orientation == "h" ? 'repeat-x' : 'repeat-y',
		"background-position":'left top',
		"cursor":"pointer"
	});
	path.click(moveHandle);
	path.mousewheel(moveHandleMW);
	path.hover(
		function(evt){$(this).css({"background-color":o.pathColorHover})},
		function(evt){$(this).css({"background-color":o.pathColorNormal})}
	);

	var path_margin_1 = $("<div></div>");
	path_margin_1.css({
		"position":"absolute",
		"left":0,
		"top":0,
		"width": o.orientation == "horizontal" ? o.marginsWide : wide,
		"height": o.orientation == "vertical" ?  o.marginsWide : wide,
		"background-color":o.marginsColor,
		"background-image":pathToImages + orientation + '_' + wide + 'px.png")',
		"background-repeat": orientation == "h" ? 'repeat-x' : 'repeat-y',
		"background-position":'left top',
		"cursor":"pointer"
	});

	var path_margin_2 = $("<div></div>");
	path_margin_2.css({
		"position":"absolute",
		"left":o.orientation == "vertical"? 0 : o.pathLength-o.marginsWide,
		"top":o.orientation == "horizontal"? 0 : o.pathLength-o.marginsWide,
		"width": o.orientation == "horizontal" ? o.marginsWide : wide,
		"height": o.orientation == "vertical" ?  o.marginsWide : wide,
		"background-color":o.marginsColor,
		"background-image":pathToImages + orientation + '_' + wide + 'px.png")',
		"background-repeat": orientation == "h" ? 'repeat-x' : 'repeat-y',
		"background-position":'left top',
		"cursor":"pointer"
	});

	path.append(path_margin_1);
	path.append(path_margin_2);

	/* -------------Handle----------------------*/

	var handle = $("<div></div>");
	handle.css({
		"position":"absolute",
		"left":0,
		"top":0,
		"width": o.orientation == "horizontal" ? o.handleLength : wide,
		"height": o.orientation == "vertical" ?  o.handleLength : wide,
		"background-color":o.handleColorNormal,
		"background-image":pathToImages + orientation + '_' + wide + 'px.png")',
		"background-repeat": orientation == "h" ? 'repeat-x' : 'repeat-y',
		"background-position":'left top',
		"cursor":"pointer"
	});

	handle.draggable({containment:path, drag:slidePercent});
	handle.hover(
		function(evt){evt.stopPropagation(); $(this).css({"background-color":o.handleColorHover})},
		function(evt){evt.stopPropagation(); $(this).css({"background-color":o.handleColorNormal})}
	);
	handle.mousedown(
		function(evt){$(this).css({"background-color":o.handleColorClick})}
	);
	handle.mouseup(
		function(evt){$(this).css({"background-color":o.handleColorHover})}
	);
	handle.click(
		function(evt){evt.stopPropagation();}
	);

	var handle_margin_1 = $("<div></div>");
	handle_margin_1.css({
		"position":"absolute",
		"left":0,
		"top":0,
		"width": o.orientation == "horizontal" ? o.marginsWide : wide,
		"height": o.orientation == "vertical" ?  o.marginsWide : wide,
		"background-color":o.marginsColor,
		"background-image":pathToImages + orientation + '_' + wide + 'px.png")',
		"background-repeat": orientation == "h" ? 'repeat-x' : 'repeat-y',
		"background-position":'left top',
		"cursor":"pointer"
	});

	var handle_margin_2 = $("<div></div>");
	handle_margin_2.css({
		"position":"absolute",
		"left":o.orientation == "vertical"? 0 : o.handleLength-o.marginsWide,
		"top":o.orientation == "horizontal"? 0 : o.handleLength-o.marginsWide,
		"width": o.orientation == "horizontal" ? o.marginsWide : wide,
		"height": o.orientation == "vertical" ?  o.marginsWide : wide,
		"background-color":o.marginsColor,
		"background-image":pathToImages + orientation + '_' + wide + 'px.png")',
		"background-repeat": orientation == "h" ? 'repeat-x' : 'repeat-y',
		"background-position":'left top',
		"cursor":"pointer"
	});
	handle.append(handle_margin_1);
	handle.append(handle_margin_2);



	/* -----------------------------------------Public Methods--------------------------------------------------------*/

	path.pathLength = function(number)
	{
		if(number === undefined)
		{
			return o.pathLength;
		}
		else
		{
			o.pathLength = number;
			if(o.orientation == "horizontal")
			{
				path.width(number);
				path_margin_2.css("left",number-o.marginsWide);
			}
			else if(o.orientation == "vertical")
			{
				path.height(number);
				path_margin_2.css("top",number-o.marginsWide);
			}
			return path;
		}
	}

	path.handleLength = function(number)
	{
		if(number === undefined)
		{
			return o.handleLength;
		}
		else
		{
			o.handleLength = number;
			if(o.orientation == "horizontal")
			{
				handle.width(number);
				handle_margin_2.css("left",number-o.marginsWide);
			}
			else if(o.orientation == "vertical")
			{
				handle.height(number);
				handle_margin_2.css("top",number-o.marginsWide);
			}
			return path;
		}
	}

	path.reset = function()
	{
		var pageCoord;
		var topOrLeft;
		if(o.orientation == "horizontal")
		{
			pageCoord = "pageX";
			topOrLeft = "left";
		}
		else if(o.orientation == "vertical")
		{
			pageCoord = "pageY";
			topOrLeft = "top";
		}
		handle.css(topOrLeft,0);
		var percent =  Math.round(handle.position()[topOrLeft] / (o.pathLength - o.handleLength) * o.maxValue);
		o.slide(percent);
	}

	path.moveHandleMW = function(evt, delta)
	{
		moveHandleMW(evt, delta);
	}
	/* -------------------------------------Internal Methods---------------------------------------------------------*/

	function slidePercent(evt, ui)
	{
		if(o.orientation == "horizontal")
		{
			var percent =  Math.round(ui.position.left / (o.pathLength - o.handleLength) * o.maxValue);
			o.slide(percent);
		}
		else if(o.orientation == "vertical")
		{
			var percent =  Math.round(ui.position.top / (o.pathLength - o.handleLength) * o.maxValue);
			o.slide(percent);
		}
	}

	function moveHandle(evt)
	{
		var pageCoord;
		var topOrLeft;
		if(o.orientation == "horizontal")
		{
			pageCoord = "pageX";
			topOrLeft = "left";
		}
		else if(o.orientation == "vertical")
		{
			pageCoord = "pageY";
			topOrLeft = "top";
		}

		var p = evt[pageCoord] - $(this).offset()[topOrLeft];
		p = p > o.pathLength - o.handleLength? o.pathLength - o.handleLength : p;

		if(!o.animate)
		{
			handle.css(topOrLeft,p);
			var percent =  Math.round(handle.position()[topOrLeft] / (o.pathLength - o.handleLength) * o.maxValue);
			o.slide(percent);
		}
		else
		{
			var toAnimate = {};
			toAnimate[topOrLeft] = p;
			handle.animate(toAnimate,{step:function(){
				var percent =  Math.round(handle.position()[topOrLeft] / (o.pathLength - o.handleLength) * o.maxValue);
				o.slide(percent);
			}});
		}
	}

	function moveHandleMW(evt, delta)
	{
		var topOrLeft = o.orientation == "horizontal" ? "left" : o.orientation == "vertical" ? "top" : null;
		delta = o.orientation == "horizontal" ? delta : delta * -1;
		var p = handle.position()[topOrLeft] + delta * o.mwSpeed;
		p = p > o.pathLength - o.handleLength? o.pathLength - o.handleLength : p < 0 ? p = 0 : p ;
		handle.css(topOrLeft,p);
		var percent =  Math.round(handle.position()[topOrLeft] / (o.pathLength - o.handleLength) * o.maxValue);
		o.slide(percent);
	}

	/*--------------------------------------------------------------------------------------------------------------------------*/

	path.append(handle);
	return path;
}
/*------------------------------------------------------------------------------------------------------------------------------*/






/*-----------------------------------------  ntk_sliderOn  ---------------------------------------------------------------------*/
/*
The element must have css width and height set
and position absolute or relative
Advice: before calling ntk_sliderOn() can call ntk_space(top, left, width, height, position)
ntk_sliderOn also contains parameters for draggable and resizable
*/
(function($){
    $.fn.ntk_sliderOn = function(options)
    {

    	var thisNodeName = this[0].nodeName.toUpperCase();
    	if(thisNodeName != "DIV")
    	{
    		return this;
		}

    	var o =
    	{
    		"slidersWide": ntk_settings.slidersWide,
    		"roomSpace" : 8,
    		"resizable": false,
    		"draggable":false,
    		"drawBorders":true,
    		"bordersColor":ntk_colors.generalBordersColor,

    		"pathColorNormal": ntk_colors.sliderPathColorNormal, /* hexadecimal color*/
			"pathColorHover": ntk_colors.sliderPathColorHover, /* hexadecimal color*/
			"handleColorNormal": ntk_colors.sliderHandleColorNormal, /* hexadecimal color*/
			"handleColorHover": ntk_colors.sliderHandleColorHover, /* hexadecimal color*/
			"handleColorClick": ntk_colors.sliderHandleColorClick, /* hexadecimal color*/
			"marginsColor": ntk_colors.sliderMarginsColor, /* hexadecimal color */

			"slide": $.noop /* pased orientation(vertical horizontal), amount*/
		}
		$.extend(o, options || {});

		if(parseInt(this.css("width")) < 50)
		{
			this.css("width", 50);
		}
		if(parseInt(this.css("height")) < 50)
		{
			this.css("height", 50);
		}

		var $this = this;

		var display = $("<div></div>");
		var dataContainer = $("<div></div>");
    	var children = this.children();

    	var dragHandler; /*will be set if this is also ntk_dragOn*/

    	dataContainer.append(children);
    	display.append(dataContainer);
    	this.empty().append(display);
    	display.css({
	    	"position":"absolute",
	    	"padding":0,"margin":0,
	    	"top":o.roomSpace, "left":o.roomSpace,
	    	"width":this.css("width"),
	    	"height":this.css("height"),
	    	"overflow":"hidden"
	    	/*,"border":"1px solid blue"*/
    	});



		var vSlider = new slider({
			orientation:"vertical",
			pathLength:this.height() + o.roomSpace*2,
			wide: o.slidersWide,
			pathColorNormal: o.pathColorNormal,
			pathColorHover: o.pathColorHover,
			handleColorNormal: o.handleColorNormal,
			handleColorHover: o.handleColorHover,
			handleColorClick: o.handleColorClick,
			marginsColor: o.marginsColor,
			slide:scrollV
		});
		vSlider.css({"position":"absolute","right":- parseInt(vSlider.css("width")) - 3, "top": -1});

		var hSlider = new slider({
			orientation:"horizontal",
			pathLength:this.width() + o.roomSpace*2,
			wide: o.slidersWide,
			pathColorNormal: o.pathColorNormal,
			pathColorHover: o.pathColorHover,
			handleColorNormal: o.handleColorNormal,
			handleColorHover: o.handleColorHover,
			handleColorClick: o.handleColorClick,
			marginsColor: o.marginsColor,
			slide:scrollH
		});
		hSlider.css({"position":"absolute","bottom": - parseInt(hSlider.css("height")) - 3, "left": -1});

		this.css({
	    	"width":parseInt(this.css("width"))+o.roomSpace*2,
	    	"height":parseInt(this.css("height"))+o.roomSpace*2
		});
		if(o.drawBorders)
		{
			this.css({"border":"1px solid " + o.bordersColor});
		}



		vSlider.hide();
		hSlider.hide();

		display.mousewheel(vSlider.moveHandleMW);
		this.append(vSlider);
		this.append(hSlider);

		/* ----------------------Public Methods----------------------------------*/
		var dataContainerWidth;
		var dataContainerHeight;
		var displayWidth;
		var displayHeight;
		var hSliderWidth;
		var vSliderHeight;
		var heightDiff;
		var widthDiff;
		var heightDiff_100;
		var widthDiff_100;

		this.refresh = function()
		{
			dataContainerWidth = dataContainer.width();
			dataContainerHeight = dataContainer.height();
			displayWidth = display.width();
			displayHeight = display.height();
			hSliderWidth = parseInt(hSlider.css("width"));
			vSliderHeight = parseInt(vSlider.css("height"));
			heightDiff = dataContainerHeight-displayHeight;
			widthDiff = dataContainerWidth-displayWidth;
			heightDiff_100 = heightDiff/100;
			widthDiff_100 = widthDiff/100;


			vSlider.reset();
			hSlider.reset();

			if(dataContainerWidth > displayWidth)
			{
				var handleLength = hSliderWidth / (dataContainerWidth / displayWidth);
				handleLength = handleLength < 20 ? handleLength = 20 : handleLength ;
				hSlider.handleLength(handleLength);
				hSlider.show();
			}
			else
			{
				hSlider.hide();
			}
			if(dataContainerHeight > displayHeight)
			{
				var handleLength = vSliderHeight / (dataContainerHeight / displayHeight);
				handleLength = handleLength < 20 ? handleLength = 20 : handleLength ;
				vSlider.handleLength(handleLength);
				vSlider.show();
			}
			else
			{
				vSlider.hide();
			}
		}

		this.updateDragHandler = function(newDragHandler)
		{
			dragHandler = newDragHandler;
		}

		this.htmlData = function(html)
		{
			if(html)
			{
				dataContainer.html(html);
				this.refresh();
			}
			else
			{
				return dataContainer.html();
			}
		}

		this.textData = function(text)
		{
			if(text)
			{
				dataContainer.text(text);
				this.refresh();
			}
			else
			{
				return dataContainer.text();
			}
		}

		/*----------------------Internal Methods----------------------------------*/


		function scrollV(amount)
		{
			display.scrollTop(heightDiff_100 * amount);
			o.slide("vertical", amount);
		}

		function scrollH(amount)
		{
			display.scrollLeft(widthDiff_100 * amount);
			o.slide("horizontal", amount);
		}

		/*------------------------Dealing with resize---------------------------------*/

		if(!$.browser.opera)
		{
			if(o.resizable)
			{
				this.resizable({
					start:function(evt, ui){
						vSlider.reset();
						hSlider.reset();
						vSlider.hide();
						hSlider.hide();
					},
					stop:function(evt, ui){
						vSlider.pathLength(ui.size.height);
						hSlider.pathLength(ui.size.width);
						$this.refresh();
					},
					resize:function(evt, ui){
						if(dragHandler)
						{
							dragHandler.width(ui.size.width * ntk_settings.draggableHandlerWidthPercent);
						}
					},
					minHeight: 50,
					minWidth: 50,
					alsoResize:display
				});
			}
		}
		else
		{
			if(o.resizable)
			{
				this.ntk_resizeOn({
					start:function(width, height){
						vSlider.reset();
						hSlider.reset();
						vSlider.hide();
						hSlider.hide();
					},
					stop:function(width, height){
						vSlider.pathLength(height);
						hSlider.pathLength(width);
						$this.refresh();
					},
					resize:function(width, height){
						display.width(width - o.roomSpace*2);
						display.height(height - o.roomSpace*2);
					},
					minHeight: 50,
					minWidth: 50
				});
			}
		}
		/*------------------------Dealing with draggable---------------------------------*/
		if(o.draggable)
		{
			this.ntk_dragOn({distance:o.roomSpace, drawBorders:false});
		}


		/*----------------------------------------------------------------------------*/

		this.refresh();
		$.data(this, "ntk_sliderOn", true);
		/* if this is also ntk_dragOn*/
		if($.data(this, "ntk_dragOn"))
		{
			dragHandler = this.getDragHandler();
			dragHandler.width(parseInt(this.css("width")) * ntk_settings.draggableHandlerWidthPercent);
		}

        return this;
    }
})(jQuery);