// there're two different style video player contoller. one is normal controller, another style is just like youtube.
(function($){
	$.fn.vController=function(options){
		var settings={
			defaultVolume:40,
			curVolume:'active',
			curValue:1,
			player:$f(),
			controller:$(this),
			clearVolume:function(){
				var ctrler=this.controller.find('a');
				ctrler.removeClass(o.curVolume);
			},
			adjustVolume:function(n){
				this.clearVolume();
				var ctrler=this.controller.find('a');
				for(var i=0;i<=n;i++){
					ctrler.eq(i).addClass(o.curVolume);
				}
			},
			init:function(){
				var n=this.defaultVolume/20-1;
				this.adjustVolume(n);
				//this.player.setVolume(40);
			}
		};
		var o = $.extend(settings,options);
		
		o.init();
		
		$(this).find("a").hover(function(){
			o.adjustVolume($(this).index());
		},function(){
			o.adjustVolume($(this).index());
		}).click(function(){
			o.curValue=$(this).index();
			o.adjustVolume(o.curValue);
			o.player.setVolume((o.curValue+1)*20);
		});
		$(this).mouseout(function(){
			o.curValue!=-1? o.adjustVolume(o.curValue) : o.clearVolume();
		});
	};
	//youtube style controller
	$.fn.ytController=function(options){
		var settings={
			defaultVolume:40,
			player:$f(),
			controllerbox:undefined,
			controller:undefined
		}
		var o = $.extend(settings,options);

		$(this).hover(function(){
			$(this).find(o.controllerbox).show();
		},function(){
			$(this).find(o.controllerbox).hide();
		});
		var _player=o.player;
		$(o.controller).slider({
			orientation: "vertical",
			range: "min",
			min: 0,
			max: 100,
			value: 40,
			slide: function( event, ui ){
				_player.setVolume(ui.value);
			}
		});		

	}
	
})(jQuery);
//end volume controller