/* 

jquery slider - slider with CSS and Javascript
Copyright 2009 Philippe IBANEZ MOLINA (xpertdev@hotmail.com)

This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 2 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA


HOW TO USE:

	1) In the HTML page place the DIV that will contain the slider, ex:
	
				ex1:	<div class='slider' id='sb1' value='49' type='percent'>MY SLIDER1</div>
					a) the value is the initial value , here 49% at startup
					b) MY SLIDER1 will normaly not appear
					c) construct: $('#sb1').slider(callback, 20);
					
				ex2:	<div class='slider' id='sb2' value='3' max='11' type='num'>MY SLIDER2</div>
					a) type: if different as "percent" the amount is a number between 0 and max value
					b) the value is the initial value , here 3 at startup
					b) max is the max value, here 11
					c) MY SLIDER2 will normaly not appear
					d) construct: $('#sb2').slider(callback, 20, 'Send'); // Send is the button text, "Accept" by defaut
	
	2) place the javascript code for implementing the slider:				

					$().ready(function() {
						$('#sb1').slider(cb, 20);
					});
					
			a) 1st parameter is the callback function to trigg the blur event, receiving the new percent in argument:
					parameter a receive the action either 'accept' or 'click'
					
					var cb = function(a, p) { 
						alert('action: ' + a + ', amount: ' + p); 
						return true;
					};			
			
			b) 2nd parameter is the amount of increase or decrease (%) of the buttons (default = 10).
			
			c) 3rd parameter, if the style is not 'percent' this parameter set the validation text button
	
	3) Set the styles at your convenience

CSS TEXT example with bar = 200 + cursor = 10

.sliderbar {
	display: block; 
	float: left;
	position: relative;
	width: 100%; 
	height: 15px; 
	margin: 0px; 
	padding: 0px; 
	top: 0px;
	left: 40px;
	border: solid 0px blue;

}
.bar {
	display: block; 
	overflow: hidden;
	float: left; 
  position: relative;
  top: 0px;
  left: 0px;
	margin: 0px; 
	padding: 0px;  
	width: 210px; 
	height: 100%;  
	border: solid 1px black;
	
}
.leftbar {
	display: block; 
	float: left; 
	margin: 0px; 
	padding: 0px; 
	width: 100px; 
	background: blue; 
	height: 100%;

}
.cursor  {
	display: block; 
	float: left; 
	margin-top: -1px; 
	margin-left: -2px; 
	margin-bottom:0px; 
	margin-right: 0px; 
	padding: 0px auto;  
	width: 10px; 
	background: gray; 
	border: solid 1px orange;
	cursor: col-resize;
	height: 100%;
}
.rightbar {
	display: block; 
	float: left; 
	margin: 0px; 
	padding: 0px;  
	width: 100px; 
	background: red; 
	height: 100%;
	background: red; 
}
.percent {
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 0;
	margin-left: 0px;
	height: 17px;
	font-size: .8em;
	float: left;
	
}

#minus {
	display: none;
}
.lt {
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 0;
	margin-right: 5px;
	margin-left: 0px;
	height: 17px;
	float: left;
	text-decoration: none;
} 
#plus {
	display: none;
}
.gt {
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 0;
	margin-right: 5px;
	margin-left: 5px;
	height: 17px;
	float: left;
}
a.lt {
  text-decoration: none;
  color: gray;
}
a.gt {
  text-decoration: none;
  color: gray;
}
 															//////////////////////////////
CSS GRAPHIC example with bar = 200 + cursor = 10

.sliderbar {
	display: block; 
	float: left;
	position: relative;
	width: 100%; 
	height: 15px; 
	margin: 0px; 
	padding: 0px; 
	top: 0px;
	left: 40px;
	border: solid 0px blue;

}
.bar {
	display: block; 
	overflow: hidden;
	float: left; 
  position: relative;
  top: 0px;
  left: 0px;
	margin: 0px; 
	padding: 0px;  
	width: 210px; 
	height: 100%;  
	border: solid 1px black;
	
}
.leftbar {
  position: relative;
	display: block; 
	float: left; 
	margin: 0px; 
	padding: 0px; 
	width: 100px; 
	background: green; 
	height: 100%;

}
.cursor  {
	display: block; 
	float: left; 
	margin-top: -1px; 
	margin-left: -2px; 
	margin-bottom:0px; 
	margin-right: 0px; 
	padding: 0px auto;  
	width: 10px; 
	background: gray; 
	border: solid 1px orange;
	cursor: col-resize;
	height: 100%;
}
.rightbar {
	display: block; 
	float: left; 
	margin: 0px; 
	padding: 0px;  
	width: 100px; 
	background: red; 
	height: 100%;
	background: red; 
}
.value {
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 0;
	margin-left: 0px;
	height: 100%;
	font-size: .8em;
	float: left;
	
}
#minus {
	padding: 0;
	margin: 0;
  background: url('../images/icons/minus.png') no-repeat;
}
.lt {
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 0;
	margin-right: 5px;
	margin-left: 0px;
	height: 17px;
	width: 17px;
	float: left;
} 
#plus {
	padding: 0;
	margin: 0;
  background: url('../images/icons/plus.png') no-repeat;
}
.gt {
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 0;
	margin-right: 5px;
	margin-left: 5px;
	height: 17px;
	width: 17px;
	float: left;
}
a.lt {
  display: none;
}
a.gt {
  display: none;
} 															


*/



jQuery.fn.extend({
	slider: function (fn, incr, acceptTxt) {
			var amount= 0;
			var mousex= 0;
			var racio=  0;
			var id= '';
			var bar_width= 0;
			var max = 100;
			var type = 'percent';
			var acceptStr = 'Accept';
			
			var setValue= function(a) {
//					$(id).attr('VALUE', a);
//					$('#value_' + id).val(a)
					amount = a;
					var eOffset = $('#bar_' + id).offset();
					var offsetX = eOffset.left;
					var	racio = a / max;
					var pos = Math.ceil(bar_width * racio);
//alert('racio: ' + racio + ' offsetX: ' + offsetX + ' pos: ' + pos);
					mousex = offsetX + pos;    
					$('#bar_' + id).trigger('click');
				};
				
				var getRacio= function(event) { 
								if(event.which == 13) {
									var p = $('#value_' + id).val();
									amount = p;
									racio = p / max ;
									var eOffset = $('#bar_' + id).offset();
									var offsetX = eOffset.left;
									var pos = bar_width * racio;
									mousex = offsetX + pos;
									$('#bar_'+id).trigger('click');
								}		
				};
				var position= function(event) {
						mousex = event.pageX;
						if(isOnCursor) {
								setCursor(event);
						}
						return false;
				};
				
				var accept = function() {
					callback('accept', amount);
				};
				
				var doClick= function(event) {
					setCursor(event);
// 					$('#value_' + id).val(amount);
 					if(init) init = false; else	callback('click', amount);
				};
				
				var setCursor= function(event) {
						var eOffset = $('#bar_' + id).offset();
						var offsetX = eOffset.left;
						var X = Math.min(mousex - offsetX, bar_width);

						var curs = $('#cursor_' + id).width();
						$('#leftbar_' + id).width(X);
						     
						var cursor = $('#cursor_' + id).position();
						cursor.left = X - curs;
						$('#cursor_' + id).css(cursor);
						    
						var right = $('#rightbar_' + id).position();
						$('#rightbar_' + id).css(right);
						var rightWidth =  bar_width - $('#leftbar_' + id).width() ;
						$('#rightbar_' + id).width( rightWidth); 
						racio = X / bar_width ;
						amount = Math.floor(racio * max) ;
						
 					$('#value_' + id).val(amount);
//						$(id).attr('VALUE', amount);
						return true;
				};	
				var	increase= function() {
					var v = amount + increment;
					if(v > max)  v = max;
					setValue(v);
				};
				var	decrease= function() {
					var v = amount - increment;
					if(v < 0)  v = 0;
					setValue(v);
				};
			
			var self = this;
			id = this.attr('ID');
			var isOnCursor= false;
			var init = true;
			amount = this.attr('VALUE') | 0;
			incr > 0 ? increment = incr : increment = 10;
			var callback = function(a, p) { if(fn) fn(a, p);};
			this.attr('MAX') > 0 ? max = this.attr('MAX') : max=100;
			this.attr('TYPE') > '' ? type=this.attr('TYPE') : type='percent';
			if (type=='percent') max = 100;
			if (amount > max) amount = max;
			if(acceptTxt != '') acceptStr = acceptTxt;
			
//alert(max + " " + type);
			var DIV = "";
			DIV += "<div class='sliderbar' id='" + id + "' value='" + amount + "' max= '"+max+"' type='"+type+"' >\n";
			DIV += "  <span class='lt' id='lt_" + id + "'><img class='lt' id='minus' alt= '' src='images/icons/blank.gif'/><a class='lt' href=\"javascript:;\" >[&lt;]</a></span>\n";
			DIV += "  <span class='bar' id='bar_" + id + "' >\n";
			DIV += "    <span class='leftbar'  id='leftbar_" + id + "' ></span>\n";
			DIV += "    <span class='cursor'   id='cursor_" + id + "' ></span>\n";
			DIV += "    <span class='rightbar' id='rightbar_" + id + "' ></span>\n";
			DIV += "  </span>\n";
			DIV += "  <span class='gt' id='gt_" + id + "' ><img class='gt' id='plus' alt= '' src='images/icons/blank.gif'/><a class='gt' href=\"javascript:;\" >[&gt;]</a></span>\n";
			DIV += "  <input type='text' id='value_" + id + "' class='value' name='value_" + id + "' size='2' /><b>";
			type=='percent' ? DIV += "  %" :  DIV += " <input id='accept_" + id + "' type='button' value='" + acceptStr + "' />"; 
			DIV += "  </b>\n";
			DIV += "</div>\n";		
			this.replaceWith(DIV);

			bar_width = $('#bar_' + id).width() - $('#cursor_' + id).width();
			
			$('#bar_'+id).mousemove(position);
			$('#bar_'+id).bind('click', doClick);
			$('#lt_'+id).bind('click', decrease);
			$('#gt_'+id).bind('click', increase);
			$('#accept_'+id).bind('click', accept);
			$().mouseup(function(){isOnCursor=false; return false;});	
			$('#cursor_'+id).mousedown(function(){isOnCursor=true; return false;});
			$('#cursor_'+id).mouseup(function(){isOnCursor=false; return false;});	
			$('#value_'+id).bind('keyup', getRacio);
			
			setValue(amount);
			
		}		


}); //extends

		jQuery.fn.slider.version= function() {return 	"jQuery.slider 1.2.0" };