PhotoFrame = Class.create();
PhotoFrame.prototype = {
initialize: function(fname, width, height) {
    this.fname = fname;
    this.width = width;
    this.height = height;
    
    var template = $('PhotoFrameTemplate').innerHTML.replace(/%%fname%%/g, fname);
    new Insertion.After($('frameDummy'), template);
    this.setSize(width, height);
    
    this.id = 'photo_'+fname;
    new Effect.Appear(this.id, { from: 0, duration: 0.5 });
    
    this.loadimg = new Image();
    this.loadimg.src = fname;
    this.disp = false;
    
    if(this.loadimg.complete) {
        this.dispImage();
    } else {
        Event.observe(this.loadimg, 'load', this.dispImage.bind(this), false);
    }
},
dispImage: function() {
    this.disp = true;
    Event.stopObserving(this.loadimg, 'load', this.dispImage);
    
    var image = $('image_'+this.fname);
    var spinner = $('spinner_'+this.fname);
    Element.hide(spinner);
    image.src = this.loadimg.src;
    new Effect.Appear(image, { duration: 0.5 });
},
setSize: function(w, h) {
    var photo = $('photo_'+this.fname);
    var shadow = $('shadow_'+this.fname);
    var frame = $('frame_'+this.fname);
    var image = $('image_'+this.fname);
    var spinner = $('spinner_'+this.fname);
    var fw = w + 4;
    var fh = h + 4;
    
    photo.style.width = (fw + 5) + "px";
    photo.style.height = (fh + 5) + "px";
    
    shadow.style.top = '5px';
    shadow.style.left = '5px';
    shadow.style.width = fw + 'px';
    shadow.style.height = fh + 'px';
    
    frame.style.width = fw + 'px';
    frame.style.height = fh + 'px';
      
    image.style.top = '2px';
    image.style.left = '2px';
    image.style.width = w + 'px';
    image.style.height = h + 'px';
    
    spinner.style.top = (fw/2 - 6) + 'px';
    spinner.style.left = (fh/2 - 6) + 'px';
}
}