MultiStream.Toolbar = function ( Player, className )
{
	if( typeof className != "string")
	{
		className = "toolbar"
	}

	var toolbar = document.createElement("div");
	toolbar.className = className;
	toolbar.style.position = "relative";
	
	this.Element = toolbar;
	this.Player = Player;
	
}
MultiStream.Toolbar.prototype = {

	add : function ( toolbarObject )
	{
		this.Element.appendChild( toolbarObject.Element );
	}
	
}


MultiStream.ToolbarWidgets = {};

MultiStream.ToolbarWidgets.Base = function ( tool )
{
	for(var i in MultiStream.ToolbarWidgets.ToolKit)
	{
		tool[i] = MultiStream.ToolbarWidgets.ToolKit[i];
	}
	if(typeof tool["init"] == "function")
	{
		tool["init"]();
	}
	return tool;
	
}
MultiStream.ToolbarWidgets.ToolKit = {
	
	events : [],
	
	bindDOMEvent : function( el, event, func, offset )
	{	
		var run = function(e) { 
			
			e.cancelBubble = true;
			if(e.stopPropagation) e.stopPropagation();

			var x = e.clientX;
			var y = e.clientY;
			var absx = e.clientX;
			var absy = e.clientY;
			
			if(offset) {

				var target = offset;
				
				x -= target.offsetLeft;
				y -= target.offsetTop;
				
				if (target.offsetParent) {
					
					while (target = target.offsetParent) {
						x -= target.offsetLeft;
						y -= target.offsetTop;
					}
					
				}
				
			}
			
			e.pos = { x: x, y: y, absx: absx, absy: absy };
			func(e);

		};
		
		if(el.attachEvent) {
			el.attachEvent("on"+event, run);
			
		}
		else {
			el.addEventListener(event, run, false);
		}
		
		return run;
		
	},
	
	removeDOMEvent : function(el, event, func)
	{
		if(el.detachEvent) {
			el.detachEvent("on"+event, func);
		}
		else {
			el.removeEventListener(event, func, false);
		}
		
	},
	
	addEventListener : function ( state, func )
	{	
		if(!this.events[state])
		{	
			this.events[state] = [];
		}
		this.events[state].push(func)
		
	},
	
	fireEvents : function( state )
	{
		if(this.events[state])
		{
			for(var i = 0; i < this.events[state].length; i++)
			{
				this.events[state][i]();
			}
		}
		
	}
	
}


MultiStream.ToolbarWidgets.Button = function ( className )
{
	return MultiStream.ToolbarWidgets.Base({
		
		binds : [],
		
		init : function()
		{
			this.Element = document.createElement("a");
			this.Element.className = className || "button";
			
			var that = this;
			this.bindDOMEvent(this.Element, "click", function(e) { that.click(e) });
		},
		
		click : function(e)
		{
			for(var i = 0; i < this.binds.length; i++)
			{
				this.binds[i](e);
			}
			
		},
		
		bind : function( func )
		{
			if(typeof func == "function")
			{
				this.binds.push(func);
			}
			return this;
		}
	
	});

}

MultiStream.ToolbarWidgets.Slider = function ( className )
{
	return MultiStream.ToolbarWidgets.Base({
	
		position : 0,
		
		State : 0,
		
		States : {
			Update : 1,
			Change : 2,
			Busy : 3
		},
	
		init : function()
		{
			var el = document.createElement("div");
			el.className = className || "slider";
			el.style.position = "relative";
			
			var gr = document.createElement("div");
			gr.className = "slider-grip";
			
			el.appendChild(gr);
			
			this.Element = el;
			this.GripElement = gr;
			
			var that = this;
			var setPosFunc;
			
			this.bindDOMEvent(this.Element, "mousedown", function(e) 
			{ 
				that.State = that.States.Busy;
				that.setGripPosition(e.pos);
				if(!setPosFunc)
				{
					setPosFunc = that.bindDOMEvent(document.body, "mousemove", function(e) { that.setGripPosition(e.pos); }, that.Element);
					document.onselectstart = function () { return false; };
					that.bindDOMEvent(document.body, "mouseup", function(e) {
						if(setPosFunc)
						{
							that.removeDOMEvent(document.body, "mousemove", setPosFunc);
							that.removeDOMEvent(document.body, "mouseup", arguments.callee);
							document.onselectstart = null;
							setPosFunc = null;
							that.fireEvents(that.States.Change);
							that.State = 0;
						}
					});
					
				}
				
			}, this.Element);
			
		},
		
		setGripPosition : function( pos )
		{
			if(typeof pos == "object") {
				pos = pos.x;
			} 
			else if(typeof pos == "number") {
				pos = this.Element.clientWidth/100*pos;
			}
			
			//pos -= this.GripElement.clientWidth/2;
			
			if(pos < 0)
				pos = 0;
			
			if(pos > this.Element.clientWidth)
				pos = this.Element.clientWidth;
				
			this.position = pos;
			
			pos -= this.GripElement.clientWidth/2;
			
			if(pos+this.GripElement.clientWidth > this.Element.clientWidth)
				pos = this.Element.clientWidth - this.GripElement.clientWidth;
			
			if(pos < 0)
				pos = 0;
			
			this.GripElement.style.left = Math.round(pos)+"px";
			
			this.fireEvents(this.States.Update);
			
		},
		
		getGripPosition : function()
		{
			return Math.round(this.position / this.Element.clientWidth * 100);
		}
	
	});
	
}