AXPositionBar = function(divId)
{
    this.playbackControl = $(divId);
    this.positionSliderTrack = this.playbackControl.getElementsByClassName('axp-playbackcontrol-slider')[0];
    this.positionSliderHandle = this.playbackControl.getElementsByClassName('axp-playbackcontrol-slider-handle')[0];
    this.positionSlider = new Control.Slider(this.positionSliderHandle,this.positionSliderTrack,{sliderValue:0, onSlide:this.positionSlider_onSlide.bindAsEventListener(this), onChange:this.positionSlider_onChange.bindAsEventListener(this)});
    //this.positionSlider.options.parent = this;
    this.positionBarBg = this.playbackControl.getElementsByClassName('axp-playbackcontrol-position')[0];
    this.arrow = this.playbackControl.getElementsByClassName('axp-playbackcontrol-fill-arrow')[0];
    this.fill = this.playbackControl.getElementsByClassName('axp-playbackcontrol-fill-bg')[0]; 
	this.currentControl = '';
	this.currentPositionTxt = this.playbackControl.getElementsByClassName('axp-playbackcontrol-timedisplay')[0];
	this.remainingDurationTxt = this.playbackControl.getElementsByClassName('axp-playbackcontrol-timedisplay2')[0];
	this.statusTxt = this.playbackControl.getElementsByClassName('axp-playbackcontrol-fill-text')[0];
	this.duration = 0;
	this.position = 0;
	this.playState = 0;
	this.bufferProgress = 0;
	this.downloadProgress = 0;
	this.downloadProgressTrack = this.playbackControl.getElementsByClassName('axp-playbackcontrol-fill-download')[0];
	this.sendEvent = false;
	this.volumeLevel = 0;
	
	this.volumeBtn = new ToggleButton(this.playbackControl.getElementsByClassName('axp-playbackcontrol-volume')[0], 'axp-playbackcontrol-volume', 'axp-playbackcontrol-volume-down');
	this.volumeBtn.onclick = this.volumeBtn_click.bindAsEventListener(this);
	try
	{
	    this.volumeTimer = new PeriodicalExecuter(this.volume_checkActive.bindAsEventListener(this), 3);
	}
	catch(e){}
	
	
	//cursor
	this.positionSliderHandle.style.cursor = "pointer";
	this.positionSliderTrack.style.cursor = "pointer";
	
	//events
	this.positionChange = null;
	this.volumeChange = null;
	
	//init
	Element.hide(this.remainingDurationTxt); //wait for duration
	this.setVolume(75);
	this.showControl('playback');
	this.arrow.style.left = '-5px';
    this.fill.style.width = '0px';
    this.setSize(50, null);
}
AXPositionBar.prototype.positionSlider_onSlide = function(x) // 0 < x < 1
{
    this.isSliding = true;
    if(this.currentControl == 'playback')
    {
        if(!isLive)
        {
            if(this.downloadProgress > 0 && x > this.downloadProgress/100.0)
            {
               x = this.downloadProgress/100.0-0.01;
               x = x<0?0:x;
               this.positionSlider.setValue(x, 0);  
            }
            this.updatePosition(Math.round(x*this.duration));
        }
    }
    else if(this.currentControl == 'volume')
    {
        this.setVolume(Math.round(100*x));
        if(this.volumeTimer.isAlive)
        {
            this.volumeTimer.reset();
        }
    } 
}
AXPositionBar.prototype.positionSlider_onChange = function(x) // 0 < x < 1
{
    if(this.sendEvent)
    {
        if(this.currentControl == 'playback')
        {
            if(!isLive)
            {
                if(this.downloadProgress > 0 && x > this.downloadProgress/100.0)
                {
                   x = this.downloadProgress/100.0-0.01;
                   x = x<0?0:x;
                   this.positionSlider.setValue(x, 0);  
                }
                if(this.positionChange != null)
                {
                    this.positionChange(Math.round(x*this.duration));
                }
                this.updateElements();
            }            
        }
        else if(this.currentControl == 'volume')
        {
            this.setVolume(Math.round(100*x));
            if(this.volumeTimer.isAlive)
            {
                this.volumeTimer.reset();
            }
        }  
    }
}
AXPositionBar.prototype.setBuffering = function(p)
{
	p = (p < 0) ? 0 : p;
	p = (p > 100) ? 100 : p;
	
	this.bufferProgress = (p > this.bufferProgress)?p:this.bufferProgress;
	if(this.playState == 6 && this.downloadProgress < 1)
	{
	    this.sendEvent = false;
        this.positionSlider.setValue(this.bufferProgress/100.0, 0);
        this.sendEvent = true;
        this.updateElements();
	    this.statusTxt.update("Buffering "+this.bufferProgress+"%");
	}
}
AXPositionBar.prototype.setDownloadProgress = function(p)
{
    p = (p < 0) ? 0 : p;
	p = (p > 100) ? 100 : p;
	this.downloadProgress = p;
	if(this.downloadProgress > 0)
	{
	    this.downloadProgressTrack.style.width = (this.positionSliderTrack.getDimensions().width*p/100.0)+'px';
	}
}
AXPositionBar.prototype.slider_outsideRange = function()
{
    return this.downloadProgress/100.0;
}
AXPositionBar.prototype.setDuration = function(s)
{
    //alert("setDuration "+s);
	if(s > 0)
	{
		this.duration = s;
		//Element.hide(this.remainingDurationTxt);
		this.positionSliderHandle.style.visibility = '';
	    this.arrow.style.visibility = '';
	    this.positionSlider.setEnabled();
		this.showControl('playback', true);
	}
	else
	{
	    this.duration = -1;
	    this.positionSlider.setDisabled();
	    this.positionSliderHandle.style.visibility = 'hidden';
	    this.arrow.style.visibility = 'hidden';
	}
	
}
AXPositionBar.prototype.showControl = function(control, forceUpdate)
{
    forceUpdate = forceUpdate ? forceUpdate : false;
    
    if(control != this.currentControl)
    {
        //hide current
        this.showControl2(this.currentControl, false);
        
        //show control     
        this.showControl2(control, true);
        this.showTimeControls();
    }
    else if(forceUpdate)
    {
        //show control
        this.showControl2(control, true);
        this.showTimeControls();
    } 
}
AXPositionBar.prototype.showControl2 = function(control, show)
{
    switch(control)
    {
        case 'buffering':
                this.showBufferControl(show);
            break;
        case 'playback':
                this.showPlaybackControl(show);
            break;
        case 'volume':
                this.showVolumeControl(show);
            break;
        default:
            break;
    }
}
AXPositionBar.prototype.showBufferControl = function(show)
{
    if(show)
    {
        this.arrow.hide();
        this.currentControl = 'buffering';
        this.fill.style.width = '0%';
        this.fill.addClassName('axp-playbackcontrol-fill-bg-buffer');
        this.statusTxt.show();
        this.positionSliderHandle.style.visibility = 'hidden'; 
    }
    else
    {
        this.arrow.hide();
        this.fill.removeClassName('axp-playbackcontrol-fill-bg-buffer');
        this.bufferProgress = 0;
    }
}
AXPositionBar.prototype.showPlaybackControl = function(show)
{
    if(show)
    {
        this.currentControl = 'playback';    
        this.setPosition(this.position);
        this.fill.addClassName('axp-playbackcontrol-fill-bg');
        this.statusTxt.show();
        if(!isLive)
        {
            this.arrow.show();
            this.positionSliderHandle.style.visibility = '';
        }
        else
        {
            this.positionSliderHandle.style.visibility = 'hidden';
        }	
    }
    else
    {
        this.fill.removeClassName('axp-playbackcontrol-fill-bg');
    }
}
AXPositionBar.prototype.showVolumeControl = function(show)
{
    if(show)
    {
        this.currentControl = 'volume';
        this.setVolume(this.volumeLevel);
        this.fill.addClassName('axp-playbackcontrol-fill-bg-volume');
        this.currentPositionTxt.addClassName('axp-playbackcontrol-volumeicon1');
        this.remainingDurationTxt.addClassName('axp-playbackcontrol-volumeicon2');
        this.statusTxt.hide();
        this.arrow.hide();
        this.positionSliderHandle.style.visibility = 'hidden';
    }
    else
    {
        this.fill.removeClassName('axp-playbackcontrol-fill-bg-volume');
        this.currentPositionTxt.removeClassName('axp-playbackcontrol-volumeicon1');
        this.remainingDurationTxt.removeClassName('axp-playbackcontrol-volumeicon2');
    }
}
AXPositionBar.prototype.showTimeControls = function(show)
{
    if(this.duration > 0)
    {
		this.positionSliderHandle.show();
		this.currentPositionTxt.show();
        this.remainingDurationTxt.show();
    }
    else
    {
        this.arrow.hide();
		//this.positionSliderHandle.hide();
        //this.remainingDurationTxt.hide();
    }
}
AXPositionBar.prototype.setPosition = function(s)
{
    if(this.currentControl == 'playback' && !this.positionSlider.dragging && s > -1)
    {
        this.position = s;
        if(this.duration > 0 && this.position < this.duration)
        {
            var progress = this.position/(1.0*this.duration);
            this.sendEvent = false;
            this.positionSlider.setValue(progress, 0);
            this.sendEvent = true;
        }
        else if(s == 0)
        {
            this.sendEvent = false;
            this.positionSlider.setValue(0, 0);
            this.sendEvent = true;
        }
        
        //update time display
        this.updatePosition(this.position);
    }
    else
    {
        this.position = s;
    }
}      
AXPositionBar.prototype.setPlayState = function(state)
{
    var playStateTxt = "Stopped";
	switch(state)
	{
		case 1://stopped
		{
			playStateTxt = "Stopped";
			break;
		}
		case 2://pause
		{
			playStateTxt = "Paused";
			break;
		}
		case 3://playing
		{
			if(isLive)
			{
			    playStateTxt = "Playing Live";
			}
			else
			{
			    playStateTxt = "Playing";
			}
			break;
		}
		case 6://buffering
		{
		    if(this.downloadProgress < 1)
		    {
		        playStateTxt = "Buffering";
		        this.showControl('buffering');
		    }
		    else
		    {
		        playStateTxt = "Playing";
		    }
			break;
		}
		case 9://transitioning
		{
			playStateTxt = "Connecting";
			break;
		}
		case 10://ready
		{
			playStateTxt = "Connecting";
			break;
		}
		case 11://download progress
		{
			
			break;
		}
	}
	if(state == 2 || state == 3)
	{
	    if(this.currentControl != 'volume')
		{
		    this.showControl('playback');
		    if(isLive)
            {
                this.positionSlider.setEnabled();
                this.positionSlider.setValue(0);
                this.positionSlider.setDisabled();
            }
            else
            {
                this.arrow.show();
            }
		}		
	}
	this.playState = state;
	Element.update(this.statusTxt, playStateTxt);
}
AXPositionBar.prototype.setSize = function(w, h)
{
    w = w<0?50:w;
    this.positionBarBg.style.width = w+"px";
    this.positionSlider.trackLength = this.positionSlider.maximumOffset() - this.positionSlider.minimumOffset();
}
AXPositionBar.prototype.setVolume = function(level)
{
    if(this.currentControl == 'volume')
    {
        this.sendEvent = false;
        this.positionSlider.setValue(level/100.0, 0);
        this.sendEvent = true;
        this.updateElements();
    }  
    if(this.volumeLevel != level)
    {
        this.volumeLevel = level;
        if(this.volumeChange != null)
        {
           this.volumeChange(this.volumeLevel); 
        }
    }
}
AXPositionBar.prototype.updateElements = function()
{
    var x = this.positionSliderHandle.offsetLeft+2;
    this.arrow.style.left = (x-5)+'px';
    this.fill.style.width = x+'px';   
}
AXPositionBar.prototype.updatePosition = function(s)
{
    //update time display
    if(this.currentControl == 'playback')
    {
        Element.update(this.currentPositionTxt, this.toTime(s));       
        if(this.duration > 0 && s < this.duration)
        {
            Element.update(this.remainingDurationTxt, '-'+this.toTime(this.duration-s)); 
        } 
    }      
    this.updateElements();
}
AXPositionBar.prototype.volumeBtn_click = function(state)
{
    if(state == 'up')
    {
        this.volumeTimer.pause();
        this.showControl('playback');
        if(isLive)
        {
            this.positionSlider.setEnabled();
            this.positionSlider.setValue(0);
            this.positionSlider.setDisabled();
        }
    }
    else
    { 
        this.volumeTimer.start();
        this.positionSlider.setEnabled();
        this.showControl('volume');
        this.setVolume(this.volumeLevel);
    }
}
AXPositionBar.prototype.volume_checkActive = function()
{
    if(this.volumeBtn.state == 'down')
    {
        this.volumeTimer.pause();
        this.volumeBtn.setState('up');
        this.showControl('playback'); 
        if(isLive)
        {
            this.positionSlider.setEnabled();
            this.positionSlider.setValue(0);
            this.positionSlider.setDisabled();
        }    
    }
}
AXPositionBar.prototype.toTime = function(s)
{
	if(s <= 0 || isNaN(s))
	{
		return "00:00";
	}
	var h = Math.floor(s/3600);
	if(h > 0)
	{
		s = s - h*3600;
	}
	if(h > 0 && h < 10)
	{
	    h = "0"+h;
	}
	var min = Math.floor(s/60);
	if(min < 10)
	{
		min = "0" + min;
	}
	var sec = s - min * 60;
	if(sec < 10)
	{
		sec = "0" + sec;
	}
	sec = sec.toString();
	sec = (sec.length > 2)?sec.substring(0,2):sec;
	
	var time;
	if(h > 0)
	{
		time = h + ":" + min + ":" + sec;
	}
	else
	{
		time = min + ":" + sec;
	}
	return time;
}

ToggleButton = function(element, up, down)
{
    this.element = $(element);
    this.up = up;
    this.down = down;
    this.state = 'up';
    this.onclick = null;
    
    //init
    Event.observe(this.element, 'click', this.toggleBtn_click.bindAsEventListener(this));
}
ToggleButton.prototype.toggleBtn_click = function(e)
{
    this.setState((this.state != 'up') ? 'up' : 'down');
    if(this.onclick != null)
    {
        this.onclick(this.state);
    }
}
ToggleButton.prototype.setState = function(state)
{
    if(state == 'up')
    {
        this.state = 'up';
        this.element.removeClassName(this.down);
        this.element.addClassName(this.up);
    }
    else
    {
        this.state = 'down';
        this.element.removeClassName(this.up);
        this.element.addClassName(this.down);
    }
}