/** * corner.js 2.1 (10-Aug-2010) (c) by Christian Effenberger * All Rights Reserved. Source: corner.netzgesta.de * Distributed under Netzgestade Software License Agreement. * This license permits free of charge use on non-commercial * and private web sites only under special conditions. * Read more at... http://www.netzgesta.de/cvi/LICENSE.html * Commercial licenses available via... cvi[at]netzgesta[dot]de **/ var tmp = navigator.appName == 'Microsoft Internet Explorer' && navigator.userAgent.indexOf('Opera') < 1 ? 1 : 0; if(tmp) var isIE = document.namespaces && ( !document.documentMode || document.documentMode < 9 ) ? 1 : 0; if(isIE) { if(document.namespaces['v']==null) { var e=["shape","shapetype","group","background","path","formulas","handles","fill","stroke","shadow","textbox","textpath","imagedata","line","polyline","curve","roundrect","oval","rect","arc","image"],s=document.createStyleSheet(); for(var i=0; i0?0.25:0.2); tmp.addColorStop(0,'rgba('+color+','+color+','+color+',0.9)'); tmp.addColorStop(val,'rgba('+color+','+color+','+color+','+opacity+')'); tmp.addColorStop(0.75,'rgba('+color+','+color+','+color+',0)'); tmp.addColorStop(1,'rgba('+color+','+color+','+color+',0)'); return tmp; } function addRadialStyle(ctx,x1,y1,r1,x2,y2,r2,opacity) { var tmp = ctx.createRadialGradient(x1,y1,r1,x2,y2,r2); var opt = Math.min(parseFloat(opacity+0.1),1.0); tmp.addColorStop(0,'rgba(0,0,0,'+opt+')'); tmp.addColorStop(0.25,'rgba(0,0,0,'+opacity+')'); tmp.addColorStop(1,'rgba(0,0,0,0)'); return tmp; } function addLinearStyle(ctx,x,y,w,h,opacity) { var tmp = ctx.createLinearGradient(x,y,w,h); var opt = Math.min(parseFloat(opacity+0.1),1.0); tmp.addColorStop(0,'rgba(0,0,0,'+opt+')'); tmp.addColorStop(0.25,'rgba(0,0,0,'+opacity+')'); tmp.addColorStop(1,'rgba(0,0,0,0)'); return tmp; } function addShine(ctx,width,height,radius,opacity,extra) { var style; var color = (extra!=1?254:0); style = addGradient(ctx,0,radius,radius,radius,color,opacity); ctx.beginPath(); ctx.moveTo(0,0); ctx.lineTo(0,height); ctx.lineTo(radius,height); ctx.lineTo(radius,radius); ctx.closePath(); ctx.fillStyle = style; ctx.fill(); style = addGradient(ctx,radius,0,radius,radius,color,opacity); ctx.beginPath(); ctx.moveTo(0,0); ctx.lineTo(width,0); ctx.lineTo(width,radius); ctx.lineTo(radius,radius); ctx.closePath(); ctx.fillStyle = style; ctx.fill(); } function addShade(ctx,width,height,radius,opacity) { var style; style = addGradient(ctx,width,radius,width-radius,radius,0,opacity); ctx.beginPath(); ctx.moveTo(width,0); ctx.lineTo(width,height); ctx.lineTo(width-radius,height-radius); ctx.lineTo(width-radius,0); ctx.closePath(); ctx.fillStyle = style; ctx.fill(); style = addGradient(ctx,radius,height,radius,height-radius,0,opacity); ctx.beginPath(); ctx.moveTo(width,height); ctx.lineTo(0,height); ctx.lineTo(0,height-radius); ctx.lineTo(width-radius,height-radius); ctx.closePath(); ctx.fillStyle = style; ctx.fill(); } function roundedShadow(ctx,x,y,width,height,radius,opacity){ var style; ctx.beginPath(); ctx.rect(x,y+height-radius,radius,radius); ctx.closePath(); style = addRadialStyle(ctx,x+radius,y+height-radius,radius-x,x+radius,y+height-radius,radius,opacity); ctx.fillStyle = style; ctx.fill(); ctx.beginPath(); ctx.rect(x+radius,y+height-y,width-(radius*2.25),y); ctx.closePath(); style = addLinearStyle(ctx,x+radius,y+height-y,x+radius,y+height,opacity); ctx.fillStyle = style; ctx.fill(); ctx.beginPath(); ctx.rect(x+width-(radius*1.25),y+height-(radius*1.25),radius*1.25,radius*1.25); ctx.closePath(); style = addRadialStyle(ctx,x+width-(radius*1.25),y+height-(radius*1.25),(radius*1.25)-1.5-x,x+width-(radius*1.25),y+height-(radius*1.25),radius*1.25,opacity); ctx.fillStyle = style; ctx.fill(); ctx.beginPath(); ctx.rect(x+width-x,y+radius,x,height-(radius*2.25)); ctx.closePath(); style = addLinearStyle(ctx,x+width-x,y+radius,x+width,y+radius,opacity); ctx.fillStyle = style; ctx.fill(); ctx.beginPath(); ctx.rect(x+width-radius,y,radius,radius); ctx.closePath(); style = addRadialStyle(ctx,x+width-radius,y+radius,radius-x,x+width-radius,y+radius,radius,opacity); ctx.fillStyle = style; ctx.fill(); } function addIECorners() { var theimages = getImages('corner'); var image; var object; var vml; var div; var pos; var i; var classes = ''; var iradius = null; var ishadow = null; var ishade = null; var inverse = null; var newClasses = ''; var maxdim = null; var offset = null; var radius = null; var display = ""; var flt = null; var width = null; var height = null; var start, head, soft, shadow, fill, foot, end; var left, top, bottom, right, lt, br, linear, inset; for (i=0;i0?(inverse>0?0:Math.min(Math.max(offset,iradius/2),16)):0); radius = getRadius(iradius,width,height); display = (image.currentStyle.display.toLowerCase()=='block')?'block':'inline-block'; vml = document.createElement([''].join('')); flt = image.currentStyle.styleFloat.toLowerCase(); display = (flt=='left'||flt=='right')?'inline':display; start = ''; fill = ''; foot = (iradius>0?'':''); end = ''; soft = ''; shadow = ''; lt = ''; left = ''; top = ''; bottom = ''; right = ''; if(iradius<=0) { if (ishadow>0) { if(inverse<=0) { ishadow = ishadow/50; offset = 8; inset = 4; soft = ''; head = ''; }else if(inverse>0) { ishadow = ishadow/50; iradius = 12; linear = "linear"; head = ''; shadow = ''; top = ''; left = ''; } }else { head = ''; } if(ishade>0) { ishade = ishade/50; iradius = 12; top = ''; left = ''; bottom = ''; right = ''; } } else { if(ishadow>0) { linear = "linear sigma"; pos = 2; if(inverse<=0) { ishadow = ishadow/50; inset = Math.round(offset*0.5); soft = ''; head = ''; }else if(inverse>0) { ishadow = ishadow/50; head = ''; shadow = ''; top = ''; left = ''; lt = ''; } }else { pos = 1; offset = 0; head = ''; } if(ishade>0) { ishade = ishade/50; linear = "linear"; top = ''; left = ''; lt = ''; } } vml.innerHTML = start + soft + head + fill + shadow + foot + right + bottom + top + left + lt + end; vml.className = newClasses; vml.style.cssText = image.style.cssText; vml.style.height = image.height+'px'; vml.style.width = image.width+'px'; vml.height = image.height; vml.width = image.width; vml.src = image.src; vml.alt = image.alt; if(image.id!='') vml.id = image.id; if(image.title!='') vml.title = image.title; if(image.getAttribute('onclick')!='') vml.setAttribute('onclick',image.getAttribute('onclick')); if(image.getAttribute("usemap")) { if (iradius>0){pos = offset;}else {pos = 0;} object.style.position = 'relative'; object.style.height = height+'px'; object.style.width = width+'px'; image.left = 0; image.top = 0; image.style.position = 'absolute'; image.style.height = height+'px'; image.style.width = width+'px'; image.style.left = 0 + 'px'; image.style.top = 0 + 'px'; image.style.filter = "Alpha(opacity=0)"; object.insertBefore(vml,image); }else { object.replaceChild(vml,image); } } } function addCorners() { var theimages = getImages('corner'); var image; var object; var canvas; var context; var i; var iradius = null; var ishade = null; var ishadow = null; var inverse = null; var classes = ''; var newClasses = ''; var maxdim = null; var style = null; var offset = null; for (i=0;i0?(inverse>0?0:Math.min(Math.max(offset,iradius/2),16)):0); context = canvas.getContext("2d"); if(image.getAttribute("usemap")) { object.style.position = 'relative'; object.style.height = image.height+'px'; object.style.width = image.width+'px'; canvas.left = 0; canvas.top = 0; canvas.style.position = 'absolute'; canvas.style.left = 0 + 'px'; canvas.style.top = 0 + 'px'; image.left = 0; image.top = 0; image.style.position = 'absolute'; image.style.height = image.height+'px'; image.style.width = image.width+'px'; image.style.left = 0 + 'px'; image.style.top = 0 + 'px'; image.style.opacity = 0; object.insertBefore(canvas,image); }else { object.replaceChild(canvas,image); } context.clearRect(0,0,canvas.width,canvas.height); context.save(); if (ishadow>0 && inverse<=0) { ishadow = ishadow/100; if (iradius>0) { roundedShadow(context,offset,offset,canvas.width-offset,canvas.height-offset,iradius,ishadow); }else { offset = 8; roundedShadow(context,offset,offset,canvas.width-offset,canvas.height-offset,offset,ishadow); } } if (iradius<=0) { context.beginPath(); context.rect(0,0,canvas.width-offset,canvas.height-offset); context.closePath(); }else { roundedRect(context,0,0,canvas.width-offset,canvas.height-offset,iradius); } context.clip(); context.fillStyle = 'rgba(0,0,0,0)'; context.fillRect(0,0,canvas.width,canvas.height); context.drawImage(image,0,0,canvas.width-offset,canvas.height-offset); if (ishadow>0 && inverse>0) { ishadow = ishadow/100; if (iradius>0) { addShine(context,canvas.width,canvas.height,iradius,ishadow,1); roundedRect(context,0,0,canvas.width,canvas.height,iradius); }else { iradius = 16; addShine(context,canvas.width,canvas.height,iradius,ishadow,1); context.beginPath(); context.rect(0,0,canvas.width,canvas.height); context.closePath(); } context.strokeStyle = 'rgba(0,0,0,'+ishadow+')'; context.lineWidth = 2; context.stroke(); } if (ishade>0) { ishade = ishade/100; if (iradius<=0) iradius = 16; addShade(context,canvas.width-offset,canvas.height-offset,iradius,ishade); addShine(context,canvas.width-offset,canvas.height-offset,iradius,ishade); } canvas.style.visibility = 'visible'; } } } if(window.addEventListener) window.addEventListener("load",addCorners,false); else window.attachEvent("onload",addIECorners);