var VolumeComponent=function(){this.width=50;this.height=17;this.padding=5;this.value=70;this.video=null;this.createCanvas=function(){var a=document.createElement("canvas");a.setAttribute("width",this.width+Math.round(0.7*this.width));a.setAttribute("height",this.height+Math.round(0.5*this.height));a.onmousemove=this.mousemove.bind(this);a.onclick=this.click.bind(this);a.style.cursor="pointer";return a};this.canvas=function(){if(this._canvas){return this._canvas}else{return this._canvas=this.createCanvas()}};this.ctx=function(){return this.canvas().getContext("2d")};this._onchange=function(a){this.onchange(a)};this.onchange=function(a){};this.setValue=function(a){var b=this;fakeClick(function(){b._setValue(a)})};this._setValue=function(a){this._onchange(a);if(a>100){a=100}if(a<0){a=0}if(this.value<a){this.setValueAnimatedPluse(this.value,a)}if(this.value>a){this.setValueAnimatedMinus(this.value,a)}};this.click=function(f){var c=f.clientX;var b=f.clientY;var a=c-Element.viewportOffset(this.canvas())[0];var g=b-Element.viewportOffset(this.canvas())[1];var d=Math.round(a/(this.width-this.padding*2)*100);this.setValue(d)};this.setValueAnimatedMinus=function(c,a){this.value=c;this.displayValue();if(c>a){window.ActiveVolumeComponent=this;c-=5;var b="window.ActiveVolumeComponent.setValueAnimatedMinus("+c+","+a+");";setTimeout(b,50)}};this.setValueAnimatedPluse=function(c,a){this.value=c;this.displayValue();if(c<a){window.ActiveVolumeComponent=this;c+=5;var b="window.ActiveVolumeComponent.setValueAnimatedPluse("+c+","+a+");";setTimeout(b,50)}};this.mousemove=function(a){};this.displayComponent=function(){this.ctx().beginPath();this.ctx().rect(0,0,this.canvas().getAttribute("width"),this.canvas().getAttribute("height"));this.ctx().fillStyle="#325491";this.ctx().fill();this.ctx().closePath();this.ctx().beginPath();this.ctx().moveTo(this.padding,this.height-this.padding);this.ctx().strokeStyle="#5B76A7";this.ctx().lineWidth=1;this.ctx().lineTo(this.width-this.padding,this.height-this.padding);this.ctx().stroke();this.ctx().closePath();this.ctx().beginPath();this.ctx().lineWidth=1;this.ctx().moveTo(this.width-this.padding,this.height-this.padding);this.ctx().strokeStyle="#46659C";this.ctx().lineTo(this.width-this.padding,this.padding);this.ctx().stroke();this.ctx().closePath();this.ctx().beginPath();this.ctx().moveTo(this.width-this.padding,this.padding);this.ctx().strokeStyle="#20365E";this.ctx().lineTo(this.padding,this.height-this.padding);this.ctx().stroke();this.ctx().closePath()};this.drawTriangle=function(){this.ctx().beginPath();this.ctx().fillStyle="white";this.ctx().strokeStyle="white";var c=(this.width-this.padding*2);var b=(this.height-this.padding*2);var a=Math.round(c/100*this.value)+this.padding;var d=this.height;this.ctx().moveTo(a,d);this.ctx().lineTo(a+3,d+4);this.ctx().lineTo(a-3,d+4);this.ctx().closePath();this.ctx().fill();this.ctx().stroke()};this.displayValueLevel=function(){var h=(this.width-this.padding*2);var f=(this.height-this.padding*2);var b=Math.sqrt(h*h+f*f);var d=f/h;var g=Math.round(h/100*this.value)-1;var a=Math.round(d*g);var e=this.padding+1;var c=this.height-this.padding-1;this.ctx().beginPath();this.ctx().moveTo(e,c);this.ctx().lineTo(e+g,c);this.ctx().lineTo(e+g,c-a+1);this.ctx().closePath();this.ctx().fillStyle="#294577";this.ctx().fill()};this.displayValue=function(){this.ctx().clearRect(0,0,this.width,this.height);this.displayComponent();this.displayValueLevel();this.drawTriangle()};this.show=function(a){a.appendChild(this.canvas());this.displayValue()}};