// Constructor
function GlyphChart(id, bgImgSrc, glyphImgSrcs, glyphWidth, glyphHeight, coords) 
{
    LComponent.call(this, id);
    this.bgImg = this.addImageToLoad(bgImgSrc);

    // load glyph images
    this.glyphImgs = new Array();
    for(var row = 0; row < glyphImgSrcs.length; row++) {
        var clip = { 
            x: 0, 
            y: 0, 
            width: glyphWidth, 
            height: glyphHeight 
        };
        var img = new LImage(this.id + "_img_" + row, glyphImgSrcs[row], clip);
        img.setStyle( { 
            position: 'absolute', 
            left: coords[row][0], 
            top: coords[row][1] 
        } );
        this.glyphImgs[row] = img;
        this.addChild(img);
    }
    
    // store coordinates
    this.glyphWidth = glyphWidth;
    this.glyphHeight = glyphHeight;
    this.coords = coords;
    
    // initial index
    this.glyphIndex = 0;
}

GlyphChart.derives(LComponent);

GlyphChart.prototype.render = function()
{
    var div = document.createElement("DIV");
    div.id = this.id;
    div.style.width = this.bgImg.width + "px";
    div.style.height = this.bgImg.height + "px";
    div.style.background = "url(" + this.bgImg.src + ")";
    div.style.position = "relative";
    this.element = div;
}

GlyphChart.prototype.setGlyph = function(index)
{
    this.glyphIndex = index;
    for(var i = 0; i < this.glyphImgs.length; i++) {
        var clip = { 
            x: 0, 
            y: index * this.glyphHeight, 
            width: this.glyphWidth, 
            height: this.glyphHeight 
        };
        this.glyphImgs[i].setClip(clip);
    }
}