var borderJS = Class.create({
  initialize: function(elements, options){    
    this.options = {
      radius: 30,
      backgroundColor: "#FFFFFF",
      borderColor: "#000000",
      autosize: false,
      overflow: false,
      leftTop: true,
      rightTop: true,
      leftBottom: true,
      rightBottom: true
    };
    Object.extend(this.options, options || { }); 
    
    this.elements = (typeof(elements) == "undefined" || elements == '') ? $$(".borderJS") : this.initializeElements(elements);       
    this.setCheckClass();
    this.newElementPosition();
    this.borderInitialize();
  },
  
  setCheckClass: function(){
    this.elements.collect(function(el){
      if(!el.hasClassName("borderJS")){
        el.addClassName("borderJS");
      }
    });
  },
  
  initializeElements: function(elements){
    switch (typeof(elements)) {
      case "object":
        return elements;
      break;      
      case "string":
        if(typeof($$(elements)[0]) != "undefined"){
          return $$(elements);
        }else{
          if(typeof($$(elements)[0]) != "undefined"){
            return $$(elements);
          }else{
            if(typeof($(elements)) != "undefined"){
              return $$("#"+elements);
            }else{
              if(typeof($$("."+elements)[0]) != "undefined"){
                return $$("."+elements);
              }else{
                alert("error: wrong first parameter");
              }
            }
          }
        }        
      break;
    }
  },
  
  borderInitialize: function(){    
    var radius = this.options.radius;
    var overflows = this.options.overflow;
    this.elements.collect(function(ele){
      ele.down("div").setStyle({
        position: "absolute",
        left: parseInt(radius/2)+"px",
        top: "0px",
        height: parseInt(ele.getHeight()-radius)+"px",
        width: parseInt(ele.getWidth()-radius)+"px",
        whiteSpace: "normal"
      });

      if(overflows){
        ele.down("div").setStyle({overflow: "auto"});
      }
    });
    this.browserControl();           
  },
  
  browserControl: function(){
    if(Prototype.Browser.IE){
      this.createRoundrect();
    }else{
      this.createCanvas();
    }
  },
  
  newElementPosition: function(){
    oldPos = this.elements.invoke("cumulativeOffset");
    radius = this.options.radius;
    var autosize = this.options.autosize; 
    i = 0;
    this.elements.collect(function(el){         
      if(!autosize){
        el.setStyle({
          position: "relative"
          //top: oldPos[i].top+"px",
          //left: oldPos[i].left+"px"
        });
        
      }else{
        if(typeof(el.down("div").down(0)) != "undefined"){
          
          elPos = el.down("div").down(0).getDimensions();
          innerDim = {
            
            height: parseInt(elPos.height+radius),
            width: el.getWidth()
          }  
        }else{
          if(el.getHeight()){
            elPos = el.getDimensions();
            innerDim = {
              height: parseInt(elPos.height),
              width: parseInt(elPos.width)
            }
          }else{
            innerDim = {
              height: 100,
              width: 100
            }
          }          
        }        
        el.setStyle({
          position: "relative",
          //top: oldPos[i].top+"px",
          //left: oldPos[i].left+"px",
          width: innerDim.width+"px",        
          height: innerDim.height+"px"        
        });
      }
      i++;
    });
  },
  
  createCanvas: function(){
    var radius = this.options.radius;
    var bgColor = this.options.backgroundColor;          
     
    var leftTop = this.options.leftTop;   
    var rightTop = this.options.rightTop;   
    var leftBottom = this.options.leftBottom;   
    var rightBottom = this.options.rightBottom;  
    
    this.elements.collect(function(el){   
      var bordColor = el.getStyle("backgroundColor");      
      
      el.insert("<div class='borderJS_topLeft'><canvas></canvas></div>").insert("<div class='borderJS_topRight'><canvas></canvas></div>").insert("<div class='borderJS_bottomLeft'><canvas></canvas></div>").insert("<div class='borderJS_bottomRight'><canvas></canvas></div>");
      
      elTopLeft     = el.down(".borderJS_topLeft");
      elTopRight    = el.down(".borderJS_topRight");
      elBottomLeft  = el.down(".borderJS_bottomLeft");
      elBottomRight = el.down(".borderJS_bottomRight");
      
      
      if(leftTop){
        var canvas = elTopLeft.setStyle({
          position: "absolute",
          top: 0, 
          left: 0, 
          backgroundColor: bgColor, 
          width: parseInt(radius/2)+"px", 
          height: parseInt(radius/2)+"px", 
          zIndex: 0, 
          overflow: "hidden"
        }).down(0).writeAttribute("height", radius).writeAttribute("width", radius).setStyle({
          position: "absolute",
          //left: "-"+parseInt(radius/2)+"px",
          width: radius+"px",
          height: radius+"px"        
        });
      }
      
      if(rightTop){
        elTopRight.setStyle({
          position: "absolute",
          top: 0, 
          right: 0, 
          backgroundColor: bgColor, 
          width: parseInt(radius/2)+"px", 
          height: parseInt(radius/2)+"px", 
          zIndex: 0, 
          overflow: "hidden"
        }).down(0).writeAttribute("height", radius).writeAttribute("width", radius).setStyle({
          position: "absolute",
          top: 0,
          left: "-"+parseInt(radius/2)+"px",
          width: radius+"px",
          height: radius+"px"        
        });
      }
      
      if(leftBottom){
        elBottomLeft.setStyle({
          position: "absolute",
          bottom: 0, 
          left: 0, 
          backgroundColor: bgColor, 
          width: parseInt(radius/2)+"px", 
          height: parseInt(radius/2)+"px", 
          zIndex: 0, 
          overflow: "hidden"
        }).down(0).writeAttribute("height", radius).writeAttribute("width", radius).setStyle({
          top: "-"+parseInt(radius/2)+"px",
          left: 0,
          position: "absolute", 
          width: radius+"px",
          height: radius+"px"        
        });
      }
      
      if(rightBottom){
        elBottomRight.setStyle({
          position: "absolute",
          bottom: 0, 
          right: 0, 
          backgroundColor: bgColor, 
          width: parseInt(radius/2)+"px", 
          height: parseInt(radius/2)+"px", 
          zIndex: 0, 
          overflow: "hidden"
        }).down(0).writeAttribute("height", radius).writeAttribute("width", radius).setStyle({
          top: "-"+parseInt(radius/2)+"px",
          left: "-"+parseInt(radius/2)+"px",
          position: "absolute", 
          width: radius+"px",
          height: radius+"px"        
        });  
      }  
    });
    this.canvasAttribute($$(".borderJS canvas"));
  },
  
  canvasAttribute: function(canvasElements){
    
    canvasElements.collect(function(canvas){      
      bordColor = canvas.up(".borderJS").getStyle("backgroundColor");
  		canvas = canvas.getContext("2d");  
  		canvas.beginPath();
  		canvas.arc( radius/2, radius/2, radius/2, 0, 2*Math.PI, true);
  		canvas.fillStyle = bordColor;
  		canvas.strokeStyle = bordColor;
  		canvas.fill();		  		
  		canvas.stroke();
		});
  },
  
  createRoundrect: function(){
    var radius = this.options.radius;
    var bgColor = this.options.backgroundColor;     
    
    var leftTop = this.options.leftTop;   
    var rightTop = this.options.rightTop;   
    var leftBottom = this.options.leftBottom;   
    var rightBottom = this.options.rightBottom;   
    
    htmlElement = document.all.tags('HTML')[0];
    htmlElement.setAttribute("dir", "ltr");
    htmlElement.setAttribute("lang", "de-DE");
    htmlElement.setAttribute("xmlns:v", "urn:schemas-microsoft-com:vml");    
    document.createStyleSheet().addRule("v\\:*","behavior: url(#default#VML);")
           
    this.elements.collect(function(el){           
      var bordColor = el.getStyle("backgroundColor");      
      var elRoundCords = "arcsize = '0.5' coordsize = '21600,21600' fillcolor = '"+bordColor+"' strokecolor = '"+bordColor+"' strokeweight = 0.75pt";      
      if(leftTop){
        el.insert("<div class='borderJS_topLeft'><v:roundrect "+elRoundCords+"></v:roundrect></div>");
        
        el.down(".borderJS_topLeft").setStyle({
          position: "absolute",
          top: 0, 
          left: 0, 
          backgroundColor: bgColor, 
          width: parseInt(radius/2)+"px", 
          height: parseInt(radius/2)+"px", 
          zIndex: 0, 
          overflow: "hidden"
        }).down(0).setStyle({
          position: "absolute",
          top: 0, 
          left: 0, 
          width: radius+"px",
          height: radius+"px"        
        });
      }
      
      if(rightTop){
        el.insert("<div class='borderJS_topRight'><v:roundrect "+elRoundCords+"></v:roundrect></div>");
        el.down(".borderJS_topRight").setStyle({
          position: "absolute",
          top: 0, 
          right: 0, 
          backgroundColor: bgColor, 
          width: parseInt(radius/2)+"px", 
          height: parseInt(radius/2)+"px", 
          zIndex: 0, 
          overflow: "hidden"
        }).down(0).setStyle({
          position: "absolute",
          top: 0, 
          left: "-"+parseInt(radius/2)+"px", 
          width: radius+"px",
          height: radius+"px"        
        });
      }
      
      if(leftBottom){
        el.insert("<div class='borderJS_bottomLeft'><v:roundrect "+elRoundCords+"></v:roundrect></div>");
        el.down(".borderJS_bottomLeft").setStyle({
          position: "absolute",
          bottom: 0, 
          left: 0, 
          backgroundColor: bgColor, 
          width: parseInt(radius/2)+"px", 
          height: parseInt(radius/2)+"px", 
          zIndex: 0, 
          overflow: "hidden"
        }).down(0).setStyle({
          position: "absolute",
          top: "-"+parseInt(radius/2)+"px",
          left: 0, 
          width: radius+"px",
          height: radius+"px"        
        });
      }
      
      if(rightBottom){
        el.insert("<div class='borderJS_bottomRight'><v:roundrect "+elRoundCords+"></v:roundrect></div>");
        
        el.down(".borderJS_bottomRight").setStyle({
          position: "absolute",
          bottom: 0, 
          right: 0, 
          backgroundColor: bgColor, 
          width: parseInt(radius/2)+"px", 
          height: parseInt(radius/2)+"px", 
          zIndex: 0, 
          overflow: "hidden"
        }).down(0).setStyle({
          position: "absolute",
          top: "-"+parseInt(radius/2)+"px",  
          left: "-"+parseInt(radius/2)+"px",  
          width: radius+"px",
          height: radius+"px"        
        }); 
      }
  
    });
  }
});

var roundImageJS = Class.create({
  initialize: function(elements, options){   
    this.options = {
      radius: 15,
      backgroundColor: "#FFFFFF",
      borderColor: "#000000",
      autosize: false,
      overflow: false,
      roundTop: true,
      roundBottom: true,
      border: false,
      borderColor: "#F00FF0",
      borderSize: 1,
      position: "absolute"
    };
    Object.extend(this.options, options || { }); 
    
    this.elements = (typeof(elements) == "undefined" || elements == '') ? $$("img.roundImageJS") : this.initializeElements(elements);   
    this.setCheckClass();
    this.newElementPosition();
    this.borderInitialize();
  },
  
  setCheckClass: function(){
    this.elements.collect(function(el){
      if(!el.hasClassName("borderJS")){
        el.addClassName("borderJS");
      }
    });
  },
  
  initializeElements: function(elements){
    switch (typeof(elements)) {
      case "object":
        return elements;
      break;      
      case "string":
        if(typeof($$(elements)[0]) != "undefined"){
          return $$(elements);
        }else{
          if(typeof($$(elements)[0]) != "undefined"){
            return $$(elements);
          }else{
            if(typeof($(elements)) != "undefined"){
              return $$("#"+elements);
            }else{
              if(typeof($$("."+elements)[0]) != "undefined"){
                return $$("."+elements);
              }else{
                alert("error: wrong first parameter");
              }
            }
          }
        }        
      break;
    }
  },
  
  borderInitialize: function(){    
    this.browserControl();           
  },
  
  browserControl: function(){
    if(Prototype.Browser.IE){
      //alert("IE");
      this.createRoundrect();
    }else{
      //alert("Firefox");
      this.createCanvas();
    }
  },
  
  newElementPosition: function(){
    
    oldPos = this.elements.invoke("cumulativeOffset");
    radius = this.options.radius;
    var autosize = this.options.autosize; 

    this.elements.collect(function(el){    
      
      if(typeof(el.src) != "undefined" && el.readAttribute("src") != ''){           
        /*el.setStyle({
          position: "relative",
          width: el.getWidth()+"px",        
          height: el.getHeight()+"px"        
        });*/
      }else{
        alert("nor src element found!");
      }
    });    
  },
  
  createRoundrect: function(){    
    var radius = this.options.radius;
    var bgColor = this.options.backgroundColor;      
    roundTop = this.options.roundTop;
    roundBottom = this.options.roundBottom;  
    positionCss = this.options.position;  
    
    rand = GetRandom(1, 20000);
    borderRoundedSpanJS = "borderRoundedSpanJS"+rand;    
    borderRoundedJS = "borderRoundedJS"+rand; 
    
    border = this.options.border;
    borderColor = this.options.borderColor;
    borderSize = this.options.borderSize;  
    
    
    htmlElement = document.all.tags('HTML')[0];
    htmlElement.setAttribute("dir", "ltr");
    htmlElement.setAttribute("lang", "de-DE");
    htmlElement.setAttribute("xmlns:v", "urn:schemas-microsoft-com:vml");    
    document.createStyleSheet().addRule("v\\:*","behavior: url(#default#VML);")
    
    pos = this.elements.invoke("positionedOffset");
    k = 0;           
    bordering = '';
    if(border){
      bordering = "strokecolor='"+borderColor+"' stroked = '"+border+"' strokeweight = '"+borderSize+"px'";
    }else{
      bordering = "strokecolor='#FFFFFF' stroked = 'false' strokeweight = '0'";
    }
    this.elements.collect(function(el){      
      if(positionCss == "relative"){
        pos[k].top  = 0;
        pos[k].left = 0;
      }
      var bordColor = el.getStyle("backgroundColor");      
      var elRoundCords = "arcsize = '20pt' coordsize = '21600,21600' fillcolor = '"+bordColor+"' strokecolor = '"+bordColor+"' strokeweight = 0.75pt";      
      //pos = el.cumulativeOffset();
      inset = Math.round(2*0.5);
      
      if(roundTop == false && roundBottom == true){
        el.insert({ 
          before: "<span class='"+borderRoundedSpanJS+"'><span class='"+borderRoundedJS+"'><v:roundrect style='PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: -1px 0px 0px -1px; WIDTH: "+el.getWidth()+"px; PADDING-TOP: 0px; POSITION: absolute; HEIGHT: "+el.getHeight()+"px;' arcsize = '0.1' coordsize = '22200,22200' filled = 't' fillcolor = 'white' "+bordering+"><v:fill src = '"+el.src+"' type = 'frame'></v:fill></v:roundrect></span></span>"
        });
        
        
        $$("."+borderRoundedJS)[k].setStyle({
          position: positionCss,        
          display: "block",
          top: "-"+parseInt(radius/2)+"px",
          left: "2px",
          width: parseInt(el.getWidth()+borderSize)+"px",
          height: el.getStyle("height")       
        });                
        
        $$("."+borderRoundedSpanJS)[k].setStyle({
          position: "absolute",        
          display: "block",
          top: parseInt(pos[k].top+1)+"px",
          left: pos[k].left+"px",
          width: parseInt(el.getWidth())+"px",
          height: parseInt(el.getHeight()-(radius/2))+"px",
          overflow: "hidden"          
        });
        
        
        if(border){
          $$("."+borderRoundedSpanJS)[k].setStyle({
            borderTop: parseInt(borderSize-1)+"px solid "+borderColor
          });
        }
      }

      if(roundBottom == false && roundTop == true){
        el.insert({ 
          before: "<span class='"+borderRoundedSpanJS+"'><span class='"+borderRoundedJS+"'><v:roundrect style='PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: -1px 0px 0px -1px; WIDTH: "+el.getWidth()+"px; PADDING-TOP: 0px; POSITION: absolute; HEIGHT: "+el.getHeight()+"px' arcsize = '0.1' coordsize = '22200,22200' filled = 't' fillcolor = 'white' "+bordering+"><v:fill src = '"+el.src+"' type = 'frame'></v:fill></v:roundrect></span></span>"
        });
        
        $$("."+borderRoundedJS)[k].setStyle({
          position: positionCss,        
          display: "block",
          top: parseInt(radius/2)+"px",
          width: parseInt(el.getWidth()+borderSize)+"px",
          height: el.getStyle("height")        
        });
        
        $$("."+borderRoundedSpanJS)[k].setStyle({
          position: "absolute",        
          display: "block",
          top: pos[k].top+"px",
          left: pos[k].left+"px",
          width: parseInt(el.getWidth())+"px",
          height: parseInt(el.getHeight()-(radius/2))+"px",
          overflow: "hidden"
        });
        
        if(border){
          $$("."+borderRoundedSpanJS)[k].setStyle({
            borderTop: parseInt(borderSize-1)+"px solid "+borderColor
          });
        }
      }
      
      if(roundBottom == true && roundTop == true){
        el.insert({ 
          before: "<span class='"+borderRoundedJS+"'><v:roundrect style='PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: -1px 0px 0px -1px; WIDTH: "+el.getWidth()+"px; PADDING-TOP: 0px; POSITION: absolute; HEIGHT: "+el.getHeight()+"px' arcsize = '0.05' coordsize = '22100,22100' filled = 't' fillcolor = 'white' "+bordering+"><v:fill src = '"+el.src+"' type = 'frame'></v:fill></v:roundrect></span>"
        }); 
        $$("."+borderRoundedJS)[k].setStyle({
          position: positionCss,        
          display: "block",
          top: pos[k].top+"px",
          left: pos[k].left+"px",
          width: el.getStyle("width"),
          height: el.getStyle("height")        
        });
      }       
      
      //el.hide();
      el.remove();
      
      //alert(el.style.position);
      k++;
    });
  },
  
  createCanvas: function(){       
    var radius = this.options.radius;
    var bgColor = this.options.backgroundColor;    
    pos = this.elements.invoke("positionedOffset");
    dim = this.elements.invoke("getDimensions");
    positionCss = this.options.position;  
    
    rand = GetRandom(1, 20000);
    borderRoundedSpanJS = "borderRoundedSpanJS"+rand;    
    borderRoundedJS = "borderRoundedJS"+rand; 
       
    roundTop = this.options.roundTop;
    roundBottom = this.options.roundBottom;
    
    border = this.options.border;
    borderColor = (this.options.border) ? this.options.borderColor : 0;
    borderSize = (this.options.border) ? this.options.borderSize*2 : 0;  
    
    
    
    k = 0;           
    this.elements.collect(function(el){            
      if(roundTop == false && roundBottom == true){
        el.insert({ 
          before: "<span class='"+borderRoundedSpanJS+"'><canvas class='"+borderRoundedJS+"' width='"+parseInt(dim[k].width+borderSize)+"' height='"+parseInt(dim[k].height+borderSize)+"' ></span>"
        });
              
        
        $$("."+borderRoundedJS)[k].setStyle({
          position: positionCss,        
          display: "block",
          top: "-"+parseInt(radius)+"px",
          width: el.getWidth()+"px",
          height: el.getStyle("height")       
        });
        
        $$("."+borderRoundedSpanJS)[k].setStyle({
          position: "absolute",        
          display: "block",
          top: pos[k].top+"px",
          left: pos[k].left+"px",
          width: parseInt(el.getWidth()+borderSize)+"px",
          height: parseInt(el.getHeight()-(radius))+"px",
          overflow: "hidden",
          borderTop: parseInt(borderSize/2)+"px solid "+borderColor
        });
        canPosTop = borderSize*4;
      }
      
      if(roundBottom == false && roundTop == true){
        el.insert({ 
          before: "<span class='"+borderRoundedSpanJS+"'><canvas class='"+borderRoundedJS+"' width='"+parseInt(dim[k].width+borderSize)+"' height='"+parseInt(dim[k].height+borderSize)+"' /></span>"
        });
        $$("."+borderRoundedJS)[k].setStyle({
          position: positionCss,        
          display: "block",
          top: parseInt(radius)+"px",
          width: el.getStyle("width"),
          height: el.getStyle("height")        
        });
        
        $$("."+borderRoundedSpanJS)[k].setStyle({
          position: "absolute",        
          display: "block",
          top: pos[k].top+"px",
          left: pos[k].left+"px",
          width: el.getStyle("width"),
          height: parseInt(el.getHeight()-(radius))+"px",
          overflow: "hidden",
          borderBottom: parseInt(borderSize/2)+"px solid "+borderColor
        });
        canPosTop = borderSize/2;
      }
      
      if(roundBottom == true && roundTop == true){
        el.insert({ 
          before: "<canvas class='"+borderRoundedJS+"' width='"+parseInt(dim[k].width+borderSize)+"' height='"+parseInt(dim[k].height+borderSize)+"' />"
        }); 
        
        $$("."+borderRoundedJS)[k].setStyle({
          position: positionCss,        
          display: "block",
          top: pos[k].top+"px",
          left: pos[k].left+"px",
          width: el.getStyle("width"),
          height: el.getStyle("height")        
        });
        canPosTop = borderSize/2;
      }
       

      var canvas = $$("."+borderRoundedJS)[k];
      context = canvas.getContext("2d");
      if(border){
        this.roundedRect(context, 0, 0, dim[k].width+borderSize, dim[k].height+borderSize, radius);
        context.fillStyle = borderColor;
        
        context.closePath();
        //context.stroke();
        context.fill();
        context.globalCompositeOperation = "source-over";
    	  context.clip();
      }
      
  	  this.roundedRect(context, borderSize/2, borderSize/2, dim[k].width, dim[k].height, radius);
  	  context.fillStyle = borderColor;
  	  context.strokeStyle = borderColor;
  	  context.fill();
  	  context.clip();
      //
      
    	
  	  context.fillRect(borderSize/2, borderSize/2, dim[k].width, dim[k].height);
  	  
      context.drawImage(el, borderSize/2, canPosTop, dim[k].width, dim[k].height);
      context.stroke();

    	k++;
    	//el.hide();    	
    	el.remove();
    });
  }  
});


function GetRandom( min, max ) {
  if( min > max ) {
    return( -1 );
  }
  if( min == max ) {
    return( min );
  }
  
  var r = parseInt( Math.random() * ( max+1 ) );
  
  return( r + min <= max ? r + min : r );
}

function roundedRect(canvas_ctx, x, y, width, height, radius, nopath){
  if (!nopath) canvas_ctx.beginPath();
	canvas_ctx.moveTo(x, y+radius);
	canvas_ctx.lineTo(x, y+height-radius);
	canvas_ctx.quadraticCurveTo(x, y+height,x+radius,y+height);
	canvas_ctx.lineTo(x+width-radius, y+height);
	canvas_ctx.quadraticCurveTo(x+width, y+height, x+width, y+height-radius);
	canvas_ctx.lineTo(x+width,y+radius);
	canvas_ctx.quadraticCurveTo(x+width, y, x+width-radius, y);
	canvas_ctx.lineTo(x+radius, y);
	canvas_ctx.quadraticCurveTo(x, y, x, y+radius);
	if (!nopath) canvas_ctx.closePath();
}