## Code [javascript]

var ImageFullSimpleView = Class.create(AbstractView, {
    // View for full size image with only navigation buttons
    //
    initialize: function($super) {
        $super("fullSimple");
    },

    createWidgets: function($super) {

        // Create widgets
        document.write("<div id=\"" + this._name + "_mask\" class=
\"fullMask\"></div>\n");
        document.write("<div id=\"" + this._name + "_content\" class=
\"fullContent\">\n");
        document.write("    <img id=\"" + this._name + "_image\" class=
\"fullImage\" />\n");
        document.write("    <div id=\"" + this._name + "_prevButton\"
class=\"fullPrevButton\"></div>\n");
        document.write("    <div id=\"" + this._name + "_nextButton\"
class=\"fullNextButton\"></div>\n");
        document.write("    <div id=\"" + this._name + "_hideButton\"
class=\"fullHideButton\"></div>\n");
        document.write("</div>\n");

        // Create bindings for widgets
        this.mask = $(this._name + "_mask");
        this.content = $(this._name + "_content");
        this.image = $(this._name + "_image");
        this.prevButton = $(this._name + "_prevButton");
        this.nextButton = $(this._name + "_nextButton");
        this.hideButton = $(this._name + "_hideButton");

//         // Create widgets using DOM (doesn't work well with IE)
//         this.mask = new Element('div', {'id': this._name + "_mask",
'class': "fullMask"});
//         document.body.appendChild(this.mask);
//         this.content = new Element('div', {'id': this._name +
"_content", 'class': "fullContent"});
//         document.body.appendChild(this.content);
//         this.image = new Element('img', {'id': this._name +
"_image", 'class': "fullImage"});
//         this.content.appendChild(this.image);
//         this.prevButton = new Element('div', {'id': this._name +
"_prevButton", 'class': "fullPrevButton"});
//         this.content.appendChild(this.prevButton);
//         this.nextButton = new Element('div', {'id': this._name +
"_nextButton", 'class': "fullNextButton"});
//         this.content.appendChild(this.nextButton);
//         this.hideButton = new Element('div', {'id': this._name +
"_hideButton", 'class': "fullHideButton"});
//         this.content.appendChild(this.hideButton);

        this.mask.hide();
        this.content.hide();
    },

});

## CSS [css]

.fullMask {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0.75;
    filter: alpha(opacity=75);
    z-index: 2;

}

.fullContent {
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 3;

}

.fullImage {
    border: 10px solid white;
    z-index: 4;

}

/* Common settings for navigation buttons */
.fullPrevButton, .fullNextButton, .fullHideButton {
    position: absolute;
    height: 100px;
    width: 100px;
    z-index: 5;
    cursor: default;
    opacity: 0;
    filter: alpha(opacity=0);
    background-repeat: no-repeat;
    background-position: center center;

}

.fullPrevButton {
    top: 50%;
    margin-top: -50px;
    right: 50%;
    margin-right: 50px;
    background-image: url("/icons/default/button-left.png");

}

.fullNextButton {
    top: 50%;
    margin-top: -50px;
    left: 50%;
    margin-left: 50px;
    background-image: url("/icons/default/button-right.png");

}

.fullHideButton {
    top: 50%;
    margin-top: 25px;
    left: 50%;
    margin-left: -50px;
    background-image: url("/icons/default/button-hide.png");