/** * reflex.js 1.2 (11-Sep-2008) * (c) by Christian Effenberger * All Rights Reserved * Source: reflex.netzgesta.de * Distributed under Netzgestade Software License Agreement * http://www.netzgesta.de/cvi/LICENSE.txt * License permits free of charge * use on non-commercial and * private web sites only **/ var tmp = navigator.appName == 'Microsoft Internet Explorer' && navigator.userAgent.indexOf('Opera') < 1 ? 1 : 0; if(tmp) var isIE = document.namespaces ? 1 : 0; if(isIE) { if(document.namespaces['v'] == null) { var stl = document.createStyleSheet(); stl.addRule("v\\:*", "behavior: url(#default#VML);"); document.namespaces.add("v", "urn:schemas-microsoft-com:vml"); } } function getImages(className){ var children = document.getElementsByTagName('img'); var elements = new Array(); var i = 0; var child; var classNames; var j = 0; for (i=0;i0) {ctx.lineTo(x,y+h-s); ctx.lineTo(w,y+h-t-(z*s)); ctx.lineTo(w,y+h-t-(z*(s+d))); ctx.lineTo(x,y+h-s-d);} ctx.closePath(); } function clipPolyLeft(ctx,x,y,w,h,t,d,s) { var z = (h-t-t)/h; ctx.beginPath(); ctx.moveTo(x,y+t); ctx.lineTo(w,y+1); ctx.lineTo(w,y+h); ctx.lineTo(x,y+h-t); if(d>0) {ctx.lineTo(x,y+h-t-(z*s)); ctx.lineTo(w,y+h-s); ctx.lineTo(w,y+h-s-d); ctx.lineTo(x,y+h-t-(z*(s+d))); } ctx.closePath(); } function strokePolyRight(ctx,x,y,w,h,t,d,s,b) { var z = (h-t-t)/h; var n = (b>=1?1:0); ctx.beginPath(); ctx.moveTo(x+b,y+b); ctx.lineTo(w-b,y+t+b-n); ctx.lineTo(w-b,y+h-t-(z*(s+d))-b); ctx.lineTo(x+b,y+h-s-d-b); ctx.closePath(); } function strokePolyLeft(ctx,x,y,w,h,t,d,s,b) { var z = (h-t-t)/h; var n = (b>=1?1:0); ctx.beginPath(); ctx.moveTo(x+b,y+t+b-n); ctx.lineTo(w-b,y+b); ctx.lineTo(w-b,y+h-s-d-b); ctx.lineTo(x+b,y+h-t-(z*(s+d))-b); ctx.closePath(); } function clipReflex(ctx,x,y,w,h,t,d,s,o) { var z = (h-t-t)/h; ctx.beginPath(); if(o=='r') { ctx.moveTo(x,y+h-s); ctx.lineTo(w,y+h-t-(z*s)); ctx.lineTo(w,y+h-t+2); ctx.lineTo(x,y+h+2); }else { ctx.moveTo(w,y+h+2); ctx.lineTo(w,y+h-s); ctx.lineTo(x,y+h-t-(z*s)); ctx.lineTo(x,y+h-t+2); } ctx.closePath(); } function clearReflex(ctx,x,y,w,h,t,d,s,o) { var z = (h-t-t)/h; ctx.beginPath(); if(o=='r') { ctx.moveTo(x,y+h-1); ctx.lineTo(w,y+h-t-1); ctx.lineTo(w,y+h-t+1); ctx.lineTo(x,y+h+1); }else { ctx.moveTo(w,y+h-1); ctx.lineTo(x,y+h-t-1); ctx.lineTo(x,y+h-t+1); ctx.lineTo(w,y+h+1); } ctx.closePath(); } function addIEReflex() { var theimages = getImages('reflex'); var image, object, vml, display, flt, classes, newClasses, head, fill, flex, foot; var i, j, z, q, p, dist, stl, iter, rest, radi, higt, divs, opac, colr, bord, wide, half, ih, iw, ww, hh, fb, xb; var itiltright, itiltnone, itiltleft, iheight, iopacity, idistance, iborder, icolor, iradius; var children = document.getElementsByTagName('img'); var tilt = 'r'; for(i=0;i=32 && image.height>=32) { classes = image.className.split(' '); iradius = getClassValue(classes,"iradius"); iborder = getClassValue(classes,"iborder"); iheight = getClassValue(classes,"iheight"); iopacity = getClassValue(classes,"iopacity"); idistance = getClassValue(classes,"idistance"); icolor = getClassColor(classes,"icolor"); itiltleft = getClassAttribute(classes,"itiltleft"); itiltright = getClassAttribute(classes,"itiltright"); itiltnone = getClassAttribute(classes,"itiltnone"); if(itiltright==true) tilt = 'r'; if(itiltnone==true) tilt = 'n'; if(itiltleft==true) tilt = 'l'; newClasses = getClasses(classes,"reflex"); ih = image.height; iw = image.width; dist = idistance; radi = Math.min(iradius,Math.max(iw,ih)/10); colr = (icolor!=0?icolor:'#000000'); opac = (iopacity>0?iopacity:33); divs = 100/(iheight>=10?iheight:33); p = (iheight>=10?iheight:33)/100; higt = Math.floor(ih/divs); wide = 12; if(iborder==1) { bord = 0; }else { iborder = Math.floor(Math.round(Math.min(Math.min(iborder,higt/4),Math.max(iw,ih)/20))/2)*2; bord = (iborder>0?iborder/2:0); } ww = parseInt(iw/20); q = 1; iter = Math.floor((iw-ww-ww)/wide); rest = ((iw-ww-ww)%wide); half = (((iw-ww-ww)/wide)-1)/2; hh = iter+(rest>0?1:0); z = (ih-hh-hh)/ih; 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; head = ''; if(tilt=='n') { fill = ''; fb = ''; xb = ''; flex = ''; }else if(tilt=='r') { fill = ''; for(j=0;j0?1:0); fill += ''; } if(rest>0) { fill += ''; } q = ((iter*z)/(ih/100))/2; if(bord>0||iborder>0) { fb = ''; xb = ''; }else {fb = ''; xb = ''; } flex = ''; }else if(tilt=='l') { fill = ''; for(j=0;j0?1:0); fill += ''; } if(rest>0) { fill += ''; } q = 100-(((iter*z)/(ih/100))/2); if(bord>0||iborder>0) { fb = ''; xb = ''; }else {fb = ''; xb = ''; } flex = ''; } foot = ''; vml.innerHTML = head+flex+xb+fill+fb+foot; vml.className = newClasses; vml.style.cssText = image.style.cssText; vml.style.height = ih+higt+dist+'px'; vml.width = iw; vml.height = ih+higt+dist; vml.style.width = iw+'px'; 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')); object.replaceChild(vml,image); if(tilt=='r') {tilt='n';}else if(tilt=='n') {tilt='l';}else if(tilt=='l') {tilt='r';} vml.style.visibility = 'visible'; } } } function addReflex() { var theimages = getImages('reflex'); var image, object, canvas, context, classes, newClasses, resource, tmp; var i, j, dist, stl, iter, rest, radi, higt, divs, opac, colr, bord, wide, ih, iw; var itiltright, itiltnone, itiltleft, iheight, iopacity, idistance, iborder, icolor, iradius; var children = document.getElementsByTagName('img'); var tilt = 'r'; var isWK = navigator.appVersion.indexOf('WebKit')!=-1?1:0; var isOP = window.opera?1:0; var isW5 = document.defaultCharset&&!window.execScript?1:0; for(i=0;i=32 && image.height>=32) { classes = image.className.split(' '); iradius = getClassValue(classes,"iradius"); iborder = getClassValue(classes,"iborder"); iheight = getClassValue(classes,"iheight"); iopacity = getClassValue(classes,"iopacity"); idistance = getClassValue(classes,"idistance"); icolor = getClassColor(classes,"icolor"); itiltleft = getClassAttribute(classes,"itiltleft"); itiltright = getClassAttribute(classes,"itiltright"); itiltnone = getClassAttribute(classes,"itiltnone"); if(itiltright==true) tilt = 'r'; if(itiltnone==true) tilt = 'n'; if(itiltleft==true) tilt = 'l'; newClasses = getClasses(classes,"reflex"); ih = image.height; iw = image.width; dist = idistance; radi = Math.min(iradius,Math.max(iw,ih)/10); colr = (icolor!=0?icolor:'#000000'); opac = (100-(iopacity>0?iopacity:33))/100; divs = 100/(iheight>=10?iheight:33); higt = Math.floor(image.height/divs); iborder = Math.round(Math.min(Math.min(iborder,higt/4),Math.max(iw,ih)/20)); wide = 12; bord = (iborder>0?iborder/2:0); canvas.className = newClasses; canvas.style.cssText = image.style.cssText; canvas.style.height = ih+higt+dist+'px'; canvas.width = iw; canvas.style.width = iw+'px'; canvas.height = ih+higt+dist; canvas.src = image.src; canvas.alt = image.alt; if(image.id!='') canvas.id = image.id; if(image.title!='') canvas.title = image.title; if(image.getAttribute('onclick')!='') canvas.setAttribute('onclick',image.getAttribute('onclick')); iter = Math.floor(canvas.width/wide); rest = (canvas.width%wide); if(tilt=='l'||tilt=='r') { resource = document.createElement('canvas'); if(resource.getContext) { resource.style.position = 'fixed'; resource.style.left = -9999+'px'; resource.style.top = 0+'px'; resource.height = canvas.height; resource.width = canvas.width; resource.style.height = canvas.height+'px'; resource.style.width = canvas.width+'px'; if(isWK&&!isW5) {object.appendChild(resource);} } } context = canvas.getContext("2d"); object.replaceChild(canvas,image); context.clearRect(0,0,canvas.width,canvas.height); context.globalCompositeOperation = "source-over"; context.fillStyle = 'rgba(0,0,0,0)'; context.fillRect(0,0,canvas.width,canvas.height); context.save(); context.translate(0,canvas.height); context.scale(1,-1); context.drawImage(image,0,-(canvas.height-higt-higt-dist),canvas.width,canvas.height-higt-dist); context.restore(); if(iborder>0) { context.strokeStyle = colr; context.lineWidth = iborder; context.beginPath(); context.rect(bord,canvas.height-higt+bord,canvas.width-iborder,higt); context.closePath(); context.stroke(); } if(!isWK||tilt=='n') { context.globalCompositeOperation = "destination-out"; stl = context.createLinearGradient(0,canvas.height-higt,0,canvas.height); stl.addColorStop(1,"rgba(0,0,0,1.0)"); stl.addColorStop(0,"rgba(0,0,0,"+opac+")"); context.fillStyle = stl; } if(isWK) { context.beginPath(); context.rect(0,canvas.height-higt,canvas.width,higt); context.closePath(); context.fill(); }else { context.fillRect(0,canvas.height-higt,canvas.width,higt); } context.globalCompositeOperation = "source-over"; context.drawImage(image,0,0,iw,ih); context.save(); if(isWK&&dist>0&&tilt!='n') { context.fillStyle = '#808080'; context.fillRect(0,canvas.height-higt-dist,canvas.width,dist); } if(iborder>0) { if(tilt=='n') { context.beginPath(); context.rect(bord,bord,canvas.width-iborder,canvas.height-higt-dist-iborder); context.closePath(); context.stroke(); } } if(tilt=='l'||tilt=='r') { if(resource.getContext) { context = resource.getContext("2d"); context.globalCompositeOperation = "source-over"; context.clearRect(0,0,resource.width,resource.height); if(tilt=='r') { for(j=0;j0) { rest = canvas.width-(iter*wide); context.drawImage(canvas,j*wide,0,rest,resource.height,j*wide,j*1,rest,resource.height-(j*2)); } }else { for(j=0;j0) { rest = canvas.width-(iter*wide); context.drawImage(canvas,j*wide,0,rest,resource.height,j*wide,0,rest,resource.height); } } context.save(); if(canvas.getContext) { context = canvas.getContext("2d"); context.clearRect(0,0,canvas.width,canvas.height); if(tilt=='r') { clipPolyRight(context,canvas.width/20,0,canvas.width*0.95,canvas.height,iter+(rest>0?1:0),dist,higt); }else { clipPolyLeft(context,canvas.width/20,0,canvas.width*0.95,canvas.height,iter+(rest>0?1:1),dist,higt); } context.clip(); context.drawImage(resource,parseInt(canvas.width/20),0,parseInt(canvas.width*0.9),canvas.height); context.save(); if(iborder>0) { context.lineWidth = iborder; if(tilt=='r') { strokePolyRight(context,canvas.width/20,0,canvas.width*0.95,canvas.height,iter+(rest>0?1:0),dist,higt,bord); context.stroke(); }else { strokePolyLeft(context,canvas.width/20,0,canvas.width*0.95,canvas.height,iter+(rest>0?1:0),dist,higt,bord); context.stroke(); } } if(isWK) { context.globalCompositeOperation = "destination-out"; stl = context.createLinearGradient((tilt=='l'?canvas.width:0),canvas.height-higt,(tilt=='l'?canvas.width-parseInt(wide/divs):parseInt(wide/divs)),canvas.height); stl.addColorStop(1,"rgba(255,0,0,1.0)"); stl.addColorStop(0,"rgba(255,0,0,"+opac+")"); context.fillStyle = stl; clipReflex(context,canvas.width/20,0,canvas.width*0.95,canvas.height,iter+(rest>0?1:0),dist,higt,tilt); context.fill(); globalCompositeOperation = "source-in"; clearReflex(context,canvas.width/20,0,canvas.width*0.95,canvas.height,iter+(rest>0?1:0),dist,higt,tilt); context.clip(); context.clearRect(0,0,canvas.width,canvas.height); context.clearRect(0,0,canvas.width,canvas.height); context.clearRect(0,0,canvas.width,canvas.height); context.clearRect(0,0,canvas.width,canvas.height); if(isWK&&!isW5) {object.removeChild(resource);} } } } } if(tilt=='r') {tilt='n';}else if(tilt=='n') {tilt='l';}else if(tilt=='l') {tilt='r';} context.save(); canvas.style.visibility = 'visible'; } } } var reflexOnload = window.onload; window.onload = function () { if(reflexOnload) reflexOnload(); if(isIE){addIEReflex(); }else {addReflex(); }}