var is_ie = (document.all && document.getElementById);


function makePolaroid(el) {

  var img = el;
  
  canvasspace = Math.round((img.height+img.width)*0.1);
  borderwidth = Math.round((img.height+img.width)*0.02);  
  shadowoffset = Math.round((img.height+img.width)*0.005);  
  if (!is_ie) {
    parent = img.parentNode;
    canvas = document.createElement('canvas');
    // we need some extra space for border and shadow
    canvas.height = img.height+canvasspace*2;
    canvas.width = img.width+canvasspace*2;
    canvas.src = img.src;
    parent.replaceChild(canvas, img);
    // for border-width take height+width * 2%
    context = canvas.getContext("2d");
    // rotate 5 degrees
    context.rotate(0.05);
    context.translate(borderwidth,borderwidth);
    // draw shadow
    context.fillStyle = "rgba(0,0,0,0.2)";
    context.fillRect(shadowoffset,shadowoffset,img.width+2*borderwidth+shadowoffset, img.height+2*borderwidth+shadowoffset);
    // draw border
    context.fillStyle = "rgb(250,250,250)";
    context.fillRect(0,0,img.width+2*borderwidth, img.height+2*borderwidth);
    // put the image back
    context.drawImage(img,borderwidth,borderwidth, img.width,  img.height);
    canvas.style.visibility = 'visible';
  } else {
    // try VML for IE
    // add the vml name-space
    if (document.namespaces.item('v') == null) {
      document.namspaces.add('v','urn:schames-microsoft-com:vml','#default#VML');
   }
    var vml = document.createElement("v:group");
    var imgwidth = img.width+canvasspace*2;
    var imgheight= img.height+canvasspace*2;
    vml.style.width = imgwidth+"px";
    vml.style.height = imgheight+"px";
    vml.style.position = "relative";
    vml.style.padding = "0px";
    vml.style.margin = "1px";   
    vml.style.display = "block";
    vml.setAttribute("coordsize", imgwidth+" "+imgheight);
    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.top = shadowoffset*2+"px";
    shadowrect.style.left = shadowoffset*2+"px";
    shadowrect.setAttribute("opacity", "0");
    var shadowfill = document.createElement("v:fill");
    shadowfill.setAttribute("color", "#000000");
    shadowfill.setAttribute("opacity", "0.2");
    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", "#FAFAFA");
    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 parent = img.parentNode;
    parent.replaceChild(vml, img);
  }
}