function View(formId) 
{
    this.formId = formId;
}

View.init = function (loadHandler)
{
    if (window.addEventListener) window.addEventListener('load', loadHandler, false);
    else if (document.addEventListener) document.addEventListener('load', loadHandler, false);
    else window.attachEvent('onload', loadHandler);
}

View.asLink = function (id)
{
    var node = document.getElementById(id);

    var a = document.createElement("a");
    a.href="#";
    a.innerHTML = node.innerHTML;
    
    node.innerHTML = "";
    node.appendChild(a);
    return a;
}

View.asHover = function (id)
{
    return new Hoverable(id);
}
    
View.check = function (id, value)
{
    document.getElementById(id).checked = id == value;
}

View.show = function (id, isVisible)
{
    var value = isVisible ? "block" : "none";
    View.display(id, value);
}

View.display = function(id, value)
{
    var e = document.getElementById(id);
    e.style.display = value;
}

View.clickOn = function (id)
{
    return new Clickable(id);
}

View.element = function (id)
{
    return new View(id);
}

View.prototype = 
{
    formId: null,
    
    asActionLink: function (id, actionName)
    {
        actionName = actionName || id;
        
        var view = this;
        View.asLink(id).onclick = function () 
            { 
                view.submitAction(actionName); 
                return false;
            }
    },

    submitAction: function (name)
    {
        this.submitValue("action", name);
    },

    submitValue: function (name, value)
    {
        var form = this.element();
        form.elements[name].value = value;
        form.submit();
    },
    
    element: function ()
    {
        return document.getElementById(this.formId);
    },
    
    backgroundImage: function (url)
    {
        this.element().style.backgroundImage = url;
    }
}




function Clickable(id)
{
    this.id = id;
}

Clickable.prototype = 
{
    id: null,
    
    sendValueTo: function (clickHandler)
    {
        var id = this.id;
        document.getElementById(id).onclick = function ()
            {
                clickHandler(this.value);
            }
    }
}



function Hoverable(id)
{
    this.id = id;
}

Hoverable.prototype = 
{
    id: null,
    
    out: function (src)
    {
        var image = this.image(src);
        var button = this.button();
        
        button.onmouseout = this.change(image);
        button.src = image.src;
    
        return this;
    },
    
    over: function (src)
    {
        var image = this.image(src);
        var button = this.button();
        
        button.onmouseover = this.change(image);
    
        return this;
    },
    
    image: function (src)
    {
        var image = new Image();
        image.src = src;

        return image;
    },
    
    change: function (image)
    {
        return function () { this.src = image.src; }
    },
    
    button: function ()
    {
        return document.getElementById(this.id);
    }
}