﻿function ImageMenu( xmlDocument, idElement, nbCol, skinUrl, defaultImageName, className )
{
    this._x = xmlDocument.getElementsByTagName( "m" )[0];
    this._id = idElement;
    this._div = $( idElement );
    this._div.className = className;
    this._col = nbCol;
    this._row = 0;
    this._defaultImageName = defaultImageName;
    this.LoadSkin( skinUrl );
    this.Build();
}
ImageMenu.prototype.GetValue = function( xmlNode, nodeName, nodeAttribute )
{
    var n = xmlNode.getElementsByTagName( nodeName );
    if( n.length && ( n = n[0] ) ) 
    {
        if( nodeAttribute ) return n.getAttribute( nodeAttribute );
        else if( n.firstChild && n.firstChild.nodeValue ) return n.firstChild.nodeValue;
        else if( !Cuke.BrowserInfo.IsIE ) return n.textContent;
        return "";
    }
    else
    {
        if( nodeAttribute ) return xmlNode.getAttribute( nodeAttribute );
        return xmlNode.firstChild.nodeValue;
    }
    return "";
};
ImageMenu.prototype.BuildItem = function( x, c, r )
{
    var t = this.GetValue( x, "m", "text" );
    var u = this.GetValue( x, "m", "url" );
    var ui = this.GetValue( x, "m", "image" );
    var pre = "", w = "", h = "";
    var m = /_\d*x\d*/;
    if( m.test( this._defaultImageName ) ) 
    {
        pre = this._defaultImageName.match( m )[0].split( "x" );
        w = pre[0].substring( 1 );
        h = pre[1];
    }
    ui += ui.charAt(ui.length-1) == '/' ? this._defaultImageName : "/" + this._defaultImageName;
    var i = this._id + "_" + r + "_" + c;
    var pw = Math.round( 100/this._col );
    if( pw * this._col > 100 ) pw = pw - 1;
    return {id:i,text:t,url:u,imageUrl:ui,width:w,height:h,widthPercent:pw};
};
ImageMenu.prototype.BuildSkin = function( x )
{
    var r = x.getElementsByTagName( "Row" )[0];
    if( !r ) return null;
    var h = this.GetValue( x, "Header" );
    var s = this.GetValue( x, "Separator" );
    var f = this.GetValue( x, "Footer" );
    var rh = this.GetValue( r, "Header" );
    var ri = this.GetValue( r, "Item" );
    var rs = this.GetValue( r, "Separator" );
    var rf = this.GetValue( r, "Footer" );
    h = h ? h : ""; s = s != "" ? s : " "; f = f ? f : "";
    rh = rh ? rh : ""; ri = ri ? ri : ""; rs = rs != "" ? rs : " "; rf = rf ? rf : "";
    return {header:h,separator:s,footer:f,row:{header:rh,item:ri,separator:rs,footer:rf}};
};
ImageMenu.prototype.LoadSkin = function( u )
{
    u = Cuke.GetUrl( u );
    if( u ) this._skin = this.BuildSkin( u );
    if( !this._skin ) 
    {
        this._skin = {
            header:"<div>",
            separator:"</div><div>",
            footer:"</div>",
            row:
            {
                header:"<table><tr><td align=\"center\">",
                item:"<a href=\"##Container.url##\"><img src=\"##Container.imageUrl##\" alt=\"##Container.title##\"/><br />##Container.title##",
                separator:"</td></tr><tr><td align=\"center\">",
                footer:"</td></tr></table>"
            }
        };
    }
};
ImageMenu.prototype.Build = function()
{
    var p = this._x.getElementsByTagName( "m" );
    var l = p.length;
    var k = 0;
    var rows = new Array();
    this._row = l / this._col;
    for( var i = 0 ; i < this._row ; i++ )
    {
        if( k >= l ) break;
        var items = new Array();
        for( var j = 0 ; j < this._col ; j++ )
        {
            if( k >= l ) break;
            var o = this.BuildItem( p[k], j+1, i+1 );
            items[j] = Cuke.ApplyTemplate( this._skin.row.item, o );
            k++;
        }
        rows[i] = this._skin.row.header + items.join( this._skin.row.separator ) + this._skin.row.footer;
    }
    this._div.innerHTML = this._skin.header + rows.join( this._skin.separator ) + this._skin.footer;
};
