
Proto.UI.Corner=Class.create({
        ie:Prototype.Browser.IE,
        ie9:(/MSIE 9/.test(navigator.userAgent)),
        initialize: function() 
        {
               /*TODO: any width/height; fix Ie animation*/       
        	this.options = Object.extend({
        	           container:document.body,
        	           width:160,
        	           height:110,
        	           background:"#fff",
        	           color:"#ff0000",
        	           imgOpacity:0.4,
        	           type:'right',//or left
        	           onClick:function(){},
        	           dura:200,
        	           bgImg:false
                }, arguments[0] || { });
                if(Prototype.Browser.IE&&!this.ie9) { this.options.dura=this.options.dura/50}
              this.type=this.options.type;
              
              this.render();    
              return(this);                   
        },
        render:function()
        {
            this.first=true;
            if(typeof this.paper=="undefined"){this.paper = Raphael(_(this.options.container), this.options.width, this.options.height);}
           _(this.options.container).style.overflow="hidden";
            this.all = this.paper.set();
            this.corners = this.paper.set();
            this.p = "M4,110  L-20000,110  L -20000, -20000 L 160,-20000 L160,22 S 154,40 3,110 z";
            this.c = "M4,110 S80,44 106.5,0 L 106.5, 0 S116.5,55 160,23 L 150, 32  S 104, 66 4,109 z";
            var svgg = "http://www.w3.org/2000/svg";
        
            if(this.type=="left")
            {
                this.i = Proto.path.replace(/js\/$/,"")+"img/l.png";
                this.pIe = "M320,-110  L0, -110 L0,22 S 6,40 157,110 M156,110 L 320,110z";
                this.pIe2 = "M-160,110 L -160, -110 L 160,-100 L160,110 z";              
            }
            else
            {
                this.i = Proto.path.replace(/js\/$/,"")+"img/r.png";
                this.pIe = "M4,110  L-160,110  L -160, -110 L 160,-110 L160,22 S 154,40 3,110 z";
                this.pIe2 = "M-160,110 L -160, -110 L 160,-100 L160,110 z";
            }
            
            this.point=[160,110];  
            this.sc=[0.01,0.01];
            this.sct=[1,1];
            this.bg = this.paper.path(this.p);
            this.preId=_(this.options.container).identify();
            this.bg.node.id=this.preId+"_bg";
             this.bg.attr({fill: this.options.background,"stroke-width":0});
            if(this.options.bgImg)
            {
            
               try{
               this.clippath=document.createElementNS(svgg,"clipPath");
               this.clippath.setAttribute("id",this.preId+"_clip");
               this.obj = _(this.options.container).select('svg')[0];
               this.obj.appendChild( this.clippath);

                this.n=this.paper.image(this.options.bgImg,0,0,160,110).attr({fill:"#111"});
                this.n.node.setAttribute("clip-path","url(#"+this.preId+"_clip"+")");
                
                this.clippath.appendChild(_(this.bg.node.id));
                
                }catch(x){
                this.noClipPatch=1;
                this.bg2 = this.paper.path(this.pIe);
                this.bg2.attr({fill:'url('+this.options.bgImg+')',"stroke-width":0});
                 }
            }else{ }
            
            this.all.push(this.bg);
            this.curve = this.paper.path(this.c);
            this.curve.attr({fill: this.options.color,"stroke-width":0});
            this.corners.push(this.curve);
            this.img = this.paper.image(this.i, 0, 0, 160, 110);
            /*
            if(!Prototype.Browser.IE||this.ie9)
            {
                this.img.attr({ opacity:this.options.imgOpacity });}
            else{
            this.img.hide();
            }*/
            //this.img.hide();
            this.all.push(this.corners);   
            if(this.type=="left")
            {
                 this.all.scale(-1,1,80,55);
                 this.point=[0,110];
                 this.sc=[-0.01,0.01];
                 this.sct=[-1,1];
                 if(Prototype.Browser.IE)
                 {
                 this.point=[0.1,110];
                 }
            }
            this.clz();
        },
        clz:function(){
            this.img.attr({x:0,y:0});
            this.all.attr({scale:this.sc[0]+','+this.sc[1]+','+this.point[0]+','+this.point[1]});
            this.img.attr({scale:'0.01,0.01,'+this.point[0]+','+this.point[1]});
            if(this.noClipPatch){ this.bg2.attr({path:this.pIe2})}
             
        },
        _open:function()
        {
                
               if( this.first){this.reset();  this.first=false;}
              
                if(!_(this.options.container).visible() || this.opened ){return;}
                this.all.stop();
                this.img.stop();
                this.all.animate({scale:this.sct[0]+','+this.sct[1]+','+this.point[0]+','+this.point[1]}, this.options.dura, "<>",function(){ this.opened = true; }.bind(this));
                this.img.animate({scale:'1,1,'+this.point[0]+','+this.point[1]}, this.options.dura, "<>");  
                if(this.noClipPatch){ this.bg2.animate({path:this.pIe}, this.options.dura, "<>")}
        },
        _close:function()
        {
                if(!_(this.options.container).visible() || !this.opened   ){return;}
                this.all.stop();
                this.img.stop();
                this.all.animate({scale:this.sc[0]+','+this.sc[1]+','+this.point[0]+','+this.point[1]}, this.options.dura, "<>",function(){ this.opened = false; }.bind(this));
                this.img.animate({scale:'0.01,0.01,'+this.point[0]+','+this.point[1]}, this.options.dura, "<>");
                if(this.noClipPatch){ this.bg2.animate({path:this.pIe2}, this.options.dura, "<>")}
                           
        },
        sepopivainie:function()
        {
                if(!_(this.options.container).visible() || !this.opened   ){return;}
                this.all.stop();
                this.img.stop();
                this.all.animate({scale:this.sc[0]+',1,'+this.point[0]+','+this.point[1]}, this.options.dura, "<>");
                this.img.animate({scale:'0.01,1,'+this.point[0]+','+this.point[1]}, this.options.dura, "<>");
                (function(){ this.opened = false; }.bind(this)).delay(0.33)            
        },
        rm:function(){
         this.all.remove();
            this.img.remove();
        },
        reset:function()
        {
            this.rm();
            this.render();
        },
        open:function(e){
            try{ Event.stop(e); }catch(x){}
            window.clearTimeout(this.tmr);
            this.tmr = this._open.bind(this).delay(0.1);
        },
        close:function(e){
          try{ Event.stop(e); }catch(x){}
            window.clearTimeout(this.tmr);
            this.tmr = this._close.bind(this).delay(0.1);
        },
        fill:function(a,b)
        {
            this.bg.attr({fill: b });
            this.curve.attr({fill: a });
            
        },
        hide:function()
        {
            this.options.container.hide();
        },
        show:function(){
            this.options.container.show();
        },
        scale:function(a,b)
        {
            this.paper.setSize(this.options.width*a,this.options.height*b);
            this.all.scale(a,b,0,0);
        }
});
