// JavaScript Document


// written by Dan Rothman 2011.
// no copyright. Imitation is the sincerest form of flattery. Not sure about outright stealing, but it's all good.
//
// this is a volume control slider with bars.  when the value of the slider changes, the component fires an event called "sliderchange", returning an integer with a value of 0-10.

// dependencies in the html document:
// a link to the jQuery js file and css file
// a link to the jQueryUI js file and css file
// a div element with id = [vcName] .
// the following javascript code (or something like it):
//
/*


			 $('#volControl').addControl("volControl1","volControlImage1");
			 $('#volControl').bind('sliderchange', function(e,value) {
  				//
				// code to be executed when event "sliderchange" is triggered
				//
				});

where 'volControl' is the name of an empty div to which the volume control will be appended, and 'volControl1' is the id of the volume control
				
*/

$.fn.addControl = function(vcName,vISrc) {
	
	var thisID =$(this).attr('id');
	var i;
	var vcNS = "#"+vcName;
	var sliderName = vcName+"Slider";
	var sliderNameNS = "#"+sliderName;

	// create a table with 1 row and 2 divisions
	//
	
	jQuery(document.createElement('table')).attr('id',vcName+'container').addClass('volControlContainer').appendTo('#'+ thisID);
	
	jQuery(document.createElement('tr')).attr('id',vcName+'containertr').appendTo(vcNS+'container');
	
	jQuery(document.createElement('td')).attr('id',vcName+'containertd1').addClass('containerCol1').appendTo(vcNS+'containertr');
	jQuery(document.createElement('td')).attr('id',vcName+'containertd2').addClass('containerCol2').appendTo(vcNS+'containertr');

	
	jQuery(document.createElement('img')).attr('id',vcName+"volImg").attr('src',vISrc).addClass('volControlImage').appendTo(vcNS + 'containertd1');
	

	jQuery(document.createElement('table')).attr('id',vcName).addClass('volControl').appendTo(vcNS + 'containertd2');
	jQuery(document.createElement('tr')).attr('id',vcName+'vGtr').appendTo(vcNS);
	
	for (i=1;i<=10;i=i+1)
	{
		// add the bars 
		jQuery(document.createElement('td')).attr('id',vcName+'vGtrtd'+i).appendTo(vcNS+'vGtr');
		jQuery(document.createElement('div')).attr('id',vcName+'bar'+i).css('height',i+'0%').appendTo(vcNS +'vGtrtd'+i);
	}
	
	//add the slider to the document as well
		jQuery(document.createElement('div')).attr('id',sliderName).addClass('volControlSlider').appendTo(vcNS + 'containertd2');

	var maxVal=$('.volControlSlider').css('width').replace('px','');

	$( sliderNameNS ).slider({
			range: false,
			min: 0,
			max: maxVal,
			value: [ 10 ],
			slide: function( event, ui ) 
			{
				//$( "#amount" ).val( "$" + ui.value );
				 
  				var e = jQuery.Event("sliderchange");
			    var returnVal = Math.round((ui.value/maxVal)* 10);
				// color the bars
				//$("td:lt(4)").css("color", "red");
				if(returnVal==0)
				{
					$(vcNS+'vGtr td div').css('background-color','#FCC');
				}
				else
				{
				$(vcNS+'vGtr td div:lt('+returnVal+')').css('background-color','#00F');
				
				$(vcNS+'vGtr td div:gt('+(returnVal-1)+')').css('background-color','#FCC');
				}
		  		// trigger an artificial click event
		  
		 		jQuery('#'+thisID).trigger( e,returnVal);
		  
			}
		});
		
		var setBarPadding = function()
		{
			var barPaddingConstant= .0242;
			return (barPaddingConstant * $('.volControl tr td').css('width').replace('px',''))+"px";
		};
		
		
		var controlPaddingConstant=.20;
		
		
		<!--override jquery ui default css and set up proportions -->
		$('.ui-slider .ui-slider-handle').css('height','95%');
		$('.ui-slider .ui-slider-handle').css('width','8%');
		$('.ui-slider .ui-slider-handle').css('vertical-align','bottom');

		
		// get the div all centered.
		$('#'+ thisID).css('padding',($('#'+ thisID).css('height').replace('px','')*controlPaddingConstant)+'px');
	
		
			// the table that acts as the container
		//
		
		$('.volControlContainer').css('height','100%');
		$('.volControlContainer').css('width','100%');

		$('.containerCol1').css('width','15%');
		$('.containerCol2').css('width','82%');
		$('.volControl').css('height','75%');
		$('.volControl').css('width','100%');
		$('.volControl tr').css('width','100%');



		$('.volControl tr td').css('padding-left',setBarPadding());
		$('.volControl tr td').css('padding-right',setBarPadding());

		$('.volControl tr td').css('height','100%');
		$('.volControl tr td').css('width','6%');	
		
		$('.volControl tr td').css('vertical-align','bottom');
		$('.volControl tr td div').css('background-color','#FCC');
		$('.volControl tr td div').css('width','100%');
		
		$('.volControlSlider').css('width','100%');
		$('.volControlSlider').css('height','25%');
		$('.volControlSlider').css('float','right');

		$('.volControlImage').css('height','100%');
		$('.volControlImage').css('float','left');
		$('.volControlImage').css('padding-right','5px');
		
		$('.volControlImage').css('width','100%');
		$('.volControlImage').css('margin-top','3px');
		
		
		//style="height:120%; width:5%; margin-top:3px; float:right" />

};