if ((navigator.appName == "Microsoft Internet Explorer")) {
  if (document.namespaces['v'] == null) {
    document.namespaces.add('v','urn:schames-microsoft-com:vml');
// IE6 can't handle this here
//   var mycss = document.createStyleSheet();
//    mycss.cssText="v\\:*{behavior:url(#default#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.02);
  if (borderwidthvalue != "") {
    borderwidth = 30;
  } 
  var shadowcolor = "#000000";
  if (shadowcolorvalue != "") {
    shadowcolor = shadowcolorvalue;
  }
  var shadowopacity = "0.2";
  if (shadowopacityvalue != "") {
    shadowopacity = shadowopacityvalue;
  }
   
  shadowoffset = Math.round((img.height+img.width)*0.01);  
  if (!(navigator.appName == "Microsoft Internet Explorer")) {
  
    parent = img.parentNode;
    canvas = document.createElement('canvas');
    // we need some extra space for border and shadow
    var rotationoffset = 0.05*(img.width+img.height);
    canvas.height = img.height+borderwidth*2+rotationoffset*2;
    canvas.width = img.width+borderwidth*2+rotationoffset*2;
    canvas.src = img.src;
    canvas.alt = img.alt;
    canvas.title = img.title;
//    parent.replaceChild(canvas, img);
    // for border-width take height+width * 2%
    context = canvas.getContext("2d");
    // rotate 5 degrees
    var rotvalue = 0;
    var rotoffsetleft;
    var rotoffsettop;
    if (rotation == "left") {
      rotvalue = -0.05;
      rotoffsetleft = 0;
      rotoffsettop = rotationoffset;
    } else  if (rotation == "no") {
      rotvalue = 0;
      rotoffsetleft = 0;
      rotoffsettop = 0;
    } else {
      rotvalue = 0.05; 
      rotoffsetleft=rotationoffset;
      rotoffsettop=0;   
    }
    
    context.rotate(rotvalue);   
    context.translate(borderwidth,borderwidth);
    // draw shadow
    context.fillStyle = shadowcolor;
    context.globalAlpha = shadowopacity;
    context.fillRect(shadowoffset+rotoffsetleft,shadowoffset+rotoffsettop,img.width+(2*borderwidth), img.height+(2*borderwidth));
    // draw border
    context.globalAlpha = 1;
    context.fillStyle = bordercolor;
  //  alert(MochiKit.Color.Color.whiteColor().toRGBString());
  //  context.fillStyle = Color.fromHexString(bordercolor).toRGBString();
    context.fillRect(rotoffsetleft,rotoffsettop,img.width+2*borderwidth, img.height+2*borderwidth);
    // put the image back
    context.drawImage(img,borderwidth+rotoffsetleft,borderwidth+rotoffsettop, img.width,  img.height);
    canvas.style.visibility = 'visible';
    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\\:*{behavior:url(#default#VML);}";
    var vml = document.createElement("v:group");
    var imgwidth = img.width+borderwidth*2;
    var imgheight= img.height+borderwidth*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);
    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.top = shadowoffset+"px";
    shadowrect.style.left = shadowoffset+"px";
//    shadowrect.setAttribute("opacity", "0");
    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 parent = img.parentNode;
    vml.alt = img.alt;
    vml.title = img.title;
    parent.replaceChild(vml, img);
    
  }
}