if ((navigator.appName == "Microsoft Internet Explorer")) {
  if (document.namespaces['v'] == null) {
    document.namespaces.add('v','urn:schames-microsoft-com:vml');
   }
}

function makePolaroid(el, rotation, bordercolorvalue, borderwidthvalue, shadowcolorvalue, shadowopacityvalue) {

  var img = el;

  var bordercolor = "#FFFFFF";
  if (bordercolorvalue != "") {
    bordercolor = bordercolorvalue;
  }
  var borderwidth = Math.round((img.height+img.width)*0.03);
  if (borderwidthvalue != "") {
    borderwidth = borderwidthvalue;
  }
  var shadowcolor = "#000000";
  if (shadowcolorvalue != "") {
    shadowcolor = shadowcolorvalue;
  }
  var scRed = parseInt("0X"+shadowcolor.substring(1,2));
  var scGreen = parseInt("0X"+shadowcolor.substring(3,4));
  var scBlue = parseInt("0X"+shadowcolor.substring(5,6));  
  
  var shadowopacity = "0.4";
  if (shadowopacityvalue != "") {
    shadowopacity = shadowopacityvalue;
  }

  shadowoffset = Math.round((img.height+img.width)*0.01);

  var A1 = 0.088 * (img.width+borderwidth*2+shadowoffset*2);
  var A2 = 0.997 * (img.width+borderwidth*2+shadowoffset*2);
  var A3 = 0.088 * (img.height+borderwidth*2+shadowoffset*2);
  var A4 = 0.997 * (img.height+borderwidth*2+shadowoffset*2);
  var imageheight = A1+A4;
  var imagewidth = A2+A3;
  if (!(navigator.appName == "Microsoft Internet Explorer")) {
    parent = img.parentNode;
    canvas = document.createElement('canvas');
    canvas.height = imageheight;
    canvas.width = imagewidth;
    canvas.src = img.src;
    canvas.alt = img.alt;
    canvas.title = img.title;
    context = canvas.getContext("2d");
    // rotate 5 degrees
    var rotvalue = 0;
    var rotoffsetleft;
    var rotoffsettop;
    if (imagewidth > imageheight) {
      scalex = 0.05;
      scaley = scalex*(imagewidth/imageheight);
    } else if (imagewidth < imageheight) {
      scaley = 0.05;
      scalex = scaley*(imageheight/imagewidth);
    } else {
      scalex = 0.05;
      scaley = 0.05;
    }
    scale = 1.333333;
    transl = Math.round(Math.max(canvas.width,canvas.height)*0.05);
    if (rotation == "left") {
      rotvalue = -0.05;
      rotoffsetleft = 0;
      rotoffsettop = A1;
      context.scale(1-(scale*scalex),1-(scale*scaley));
      context.translate(0,transl);
    } else  if (rotation == "no") {
      rotvalue = 0;
      rotoffsetleft = 0;
      rotoffsettop = 0;
      context.scale(1-(scalex/scale), 1-(scaley/scale));
    } else {
      rotvalue = 0.05;
      rotoffsetleft=A3;
      rotoffsettop=0;
      context.scale(1-(scale*scalex),1-(scale*scaley));
      context.translate(transl,0);
    }
 
    context.rotate(rotvalue);

    // start drawing the shadow
    sop = Math.min(parseFloat(shadowopacity+0.1),1.0);
    context.fillStyle=shadowcolor;
    context.globalAlpha = shadowopacity;
    context.beginPath(); 
    context.rect(shadowoffset*2,imageheight-shadowoffset,imagewidth-(shadowoffset*2.25),shadowoffset); 
    context.closePath(); 
    context.fill();	
    context.beginPath(); 
    context.rect(shadowoffset,imageheight-shadowoffset,shadowoffset,shadowoffset); 
    context.closePath();
    gradient = context.createLinearGradient(shadowoffset*2,imageheight-shadowoffset, shadowoffset, imageheight-shadowoffset);
    gradient.addColorStop(0, 'rgba('+scRed+','+scGreen+','+scBlue+','+sop+')');
    gradient.addColorStop(0.25, 'rgba('+scRed+','+scGreen+','+scBlue+','+shadowopacity+')');
    gradient.addColorStop(1, 'rgba('+scRed+','+scGreen+','+scBlue+',0)');
    context.fillStyle=gradient; 
    context.fill();	 	
    context.beginPath(); 
    context.moveTo(imagewidth-shadowoffset,shadowoffset*2); 
    context.lineTo(imagewidth,shadowoffset*2); 
    context.quadraticCurveTo(imagewidth-shadowoffset,shadowoffset+(imageheight/2),imagewidth,imageheight-(shadowoffset*0.25));
    context.lineTo(imagewidth-shadowoffset,imageheight-(shadowoffset*0.25)); 
    context.quadraticCurveTo(imagewidth-(shadowoffset*2),shadowoffset+(imageheight/2),imagewidth-shadowoffset,shadowoffset*2); 
    context.closePath(); 
    context.fill();
    context.beginPath(); 
    context.rect(shadowoffset,imageheight,shadowoffset,shadowoffset); 
    context.closePath();
    gradient = context.createRadialGradient(shadowoffset*2,imageheight,0, 2*shadowoffset, imageheight, shadowoffset);
    gradient.addColorStop(0, 'rgba('+scRed+','+scGreen+','+scBlue+','+sop+')');
    gradient.addColorStop(0.25, 'rgba('+scRed+','+scGreen+','+scBlue+','+shadowopacity+')');
    gradient.addColorStop(1, 'rgba('+scRed+','+scGreen+','+scBlue+',0)');
    context.fillStyle=gradient; 
    context.fill();	 
    context.beginPath(); 
    context.rect(shadowoffset*2,imageheight,imagewidth-(shadowoffset*2.25),shadowoffset); 
    context.closePath();
    gradient = context.createLinearGradient(shadowoffset*2,imageheight,2*shadowoffset, imageheight+shadowoffset);
    gradient.addColorStop(0, 'rgba('+scRed+','+scGreen+','+scBlue+','+sop+')');
    gradient.addColorStop(0.25, 'rgba('+scRed+','+scGreen+','+scBlue+','+shadowopacity+')');
    gradient.addColorStop(1, 'rgba('+scRed+','+scGreen+','+scBlue+',0)');
    context.fillStyle=gradient; 
    context.fill();	 
    context.beginPath(); 
    context.rect(imagewidth-(shadowoffset*0.25),imageheight-(shadowoffset*0.25),shadowoffset*1.25,shadowoffset*1.25); 
    context.closePath();
    gradient = context.createRadialGradient(imagewidth-(shadowoffset*0.25),imageheight-(shadowoffset*0.25),Math.max(0,(shadowoffset*1.25)-1.5-shadowoffset), imagewidth-(shadowoffset*0.25), imageheight-(shadowoffset*0.25),shadowoffset*1.25);
    gradient.addColorStop(0, 'rgba('+scRed+','+scGreen+','+scBlue+','+sop+')');
    gradient.addColorStop(0.25, 'rgba('+scRed+','+scGreen+','+scBlue+','+shadowopacity+')');
    gradient.addColorStop(1, 'rgba('+scRed+','+scGreen+','+scBlue+',0)');
    context.fillStyle=gradient; 
    context.fill();
    context.beginPath(); 
    context.moveTo(imagewidth,shadowoffset*2); 
    context.lineTo(shadowoffset+imagewidth,shadowoffset*2); 
    context.quadraticCurveTo(imagewidth,shadowoffset+(imageheight/2),shadowoffset+imagewidth,imageheight-(shadowoffset*0.25)); 
    context.lineTo(imagewidth,imageheight-(shadowoffset*0.25)); 
    context.quadraticCurveTo(imagewidth-shadowoffset,shadowoffset+(imageheight/2),imagewidth,shadowoffset*2); 
    context.closePath();
    gradient = context.createLinearGradient(imagewidth,2*shadowoffset, imagewidth+shadowoffset, shadowoffset*2);
    gradient.addColorStop(0, 'rgba('+scRed+','+scGreen+','+scBlue+','+sop+')');
    gradient.addColorStop(0.25, 'rgba('+scRed+','+scGreen+','+scBlue+','+shadowopacity+')');
    gradient.addColorStop(1, 'rgba('+scRed+','+scGreen+','+scBlue+',0)');
    context.fillStyle=gradient; 
    context.fill();
    context.beginPath(); 
    context.rect(imagewidth,shadowoffset,shadowoffset,shadowoffset); 
    context.closePath();
    gradient = context.createRadialGradient(imagewidth,shadowoffset*2,0, imagewidth, shadowoffset*2,shadowoffset);
    gradient.addColorStop(0, 'rgba('+scRed+','+scGreen+','+scBlue+','+sop+')');
    gradient.addColorStop(0.25, 'rgba('+scRed+','+scGreen+','+scBlue+','+shadowopacity+')');
    gradient.addColorStop(1, 'rgba('+scRed+','+scGreen+','+scBlue+',0)');
    context.fillStyle=gradient; 
    context.fill();
    context.beginPath(); 
    context.rect(imagewidth-shadowoffset,shadowoffset,shadowoffset,shadowoffset); 
    context.closePath(); 
    gradient = context.createLinearGradient(imagewidth-shadowoffset,shadowoffset*2,imagewidth-shadowoffset,shadowoffset);
    gradient.addColorStop(0, 'rgba('+scRed+','+scGreen+','+scBlue+','+sop+')');
    gradient.addColorStop(0.25, 'rgba('+scRed+','+scGreen+','+scBlue+','+shadowopacity+')');
    gradient.addColorStop(1, 'rgba('+scRed+','+scGreen+','+scBlue+',0)');
    context.fillStyle=gradient; 
    context.fill();
    
    // draw border
    context.globalAlpha = 1;
    context.fillStyle = bordercolor;
    context.fillRect(0,0,imagewidth, imageheight);
    context.fillStyle = 'rgba('+scRed+','+scGreen+','+scBlue+','+shadowopacity+')';
    context.fillRect(borderwidth,borderwidth,imagewidth-(borderwidth*2),imageheight-(borderwidth*2));
    w=imagewidth-(borderwidth*2);
    h=imageheight-(borderwidth*2);
    if(imagewidth>imageheight) {
      x=0; 
      y=(((imagewidth-(borderwidth*2))*(imageheight/imagewidth))-(imageheight-(borderwidth*2)))/2; 
      h=((imagewidth-(borderwidth*2))*(imageheight/imagewidth));
    } else if(imagewidth<imageheight) { 
      y=0; 
      x=(((imageheight-(borderwidth*2))*(canvas.width/canvas.height))-((imagewidth-(borderwidth*2))))/2; 
      w=((imageheight-(borderwidth*2))*(canvas.width/canvas.height));
    } else {
      x=0; 
      y=0;
    }
    context.save();
    context.beginPath();  
    context.rect(borderwidth,borderwidth,w-(2*x),h-(2*y));
    context.closePath();
    context.clip();
    context.drawImage(img,borderwidth-x,borderwidth-y,w,h);
    context.restore();
    parent.replaceChild(canvas, img);
  } else {
    // try VML for IE
    // this should be here and not on top for IE6
    var mycss = document.createStyleSheet();
    mycss.cssText="v\\:group, v\\:rect, v\\:fill,v\\:image {behavior:url(#default#VML);}";
   
    var vml = document.createElement("v:group");
    vml.style.width = imagewidth+"px";
    vml.style.height = imageheight+"px";
    vml.style.position = "relative";
    vml.style.padding = "0px";
    vml.style.margin = "1px";
    vml.style.display = "block";
    vml.setAttribute("coordsize", imagewidth+" "+imageheight);
    if (rotation == "left") {
      vml.style.rotation = "-3";
    } else if (rotation == "no") {
      // do nothing
      ;
    } else {
      vml.style.rotation = "3";
    }
    var shadowrect = document.createElement("v:rect");
    shadowrect.style.width = (img.width+borderwidth*2)+"px";
    shadowrect.style.height = (img.height+borderwidth*2)+"px";
    shadowrect.setAttribute("stroked","f");
    shadowrect.style.position = "absolute";
   
    shadowrect.style.filter = "Alpha(opacity="+(shadowopacity*100)+"), progid:dxImageTransform.Microsoft.Blur(PixelRadius="+shadowoffset+", MakeShadow=false";
    var shadowfill = document.createElement("v:fill");
    shadowfill.setAttribute("color", shadowcolor);
    shadowfill.setAttribute("opacity", shadowopacity);
    shadowrect.appendChild(shadowfill);
    vml.appendChild(shadowrect);

    var borderrect = document.createElement("v:rect");
    var borderrectwidth = img.width+borderwidth*2;
    borderrect.style.width = borderrectwidth+"px";
    borderrect.style.height = (img.height+borderwidth*2)+"px";
    borderrect.setAttribute("fillcolor", bordercolor);
    borderrect.setAttribute("stroked","f");
    vml.appendChild(borderrect);

    var imgrect = document.createElement("v:image");
    imgrect.style.width = img.width+"px";
    imgrect.style.height = img.height+"px";
    imgrect.style.position = "absolute";
    imgrect.style.top = borderwidth+"px";
    imgrect.style.left = borderwidth+"px";
    imgrect.setAttribute("src", img.src);
    imgrect.setAttribute("stroked","f");
    vml.appendChild(imgrect);
 
    var vmldiv = document.createElement("div");
    vmldiv.style.width = imagewidth+"px";
    vmldiv.appendChild(vml);
    var parent = img.parentNode;
    vml.alt = img.alt;
    vml.title = img.title;
    parent.replaceChild(vmldiv, img);

  }
}