function BasicGUI(t_guiStyle) {
    this.t_guiRoot = "res/img";
    this.t_guiStyle = t_guiStyle ? t_guiStyle : ''; // Default guistyle
    this.mapControl = null;
    this.element = document.createElement('div');
    divIdName = 'guibackground';
    this.element.style.position = "absolute";
    this.element.style.left = "5px";
    this.element.style.top = "5px";
    this.element.setAttribute('id', divIdName);
    Event.observe(this.element, 'mouseup',
                  this.t_stopHandler.bindAsEventListener(this));
    Event.observe(this.element, 'dblclick',
                  this.t_stopHandler.bindAsEventListener(this));
    Event.observe(this.element, 'mousedown',
                  this.t_stopHandler.bindAsEventListener(this));

    var t_eastButton = document.createElement('div');
    t_eastButton.style.background = "url(" + this.t_guiRoot + this.t_guiStyle + "/east.gif)";
    t_eastButton.style.position = "absolute";
    t_eastButton.style.width = "15px";
    t_eastButton.style.height = "15px";
    t_eastButton.style.left = "30px";
    t_eastButton.style.top = "16px";
    t_eastButton.setAttribute('id', 'eastButton');
    t_eastButton.style.overflow = "hidden";
    this.element.appendChild(t_eastButton);

    Event.observe(t_eastButton, 'click',
                  this.t_eastButtonClickedHandler.bindAsEventListener(this));

    var t_westButton = document.createElement('div');
    t_westButton.style.background = "url(" + this.t_guiRoot + this.t_guiStyle + "/west.gif)";
    t_westButton.style.position = "absolute";
    t_westButton.style.width = "15px";
    t_westButton.style.height = "15px";
    t_westButton.style.left = "0px";
    t_westButton.style.top = "16px";
    t_westButton.setAttribute('id', 'westButton');
    t_westButton.style.overflow = "hidden";
    this.element.appendChild(t_westButton);

    Event.observe(t_westButton, 'click',
                  this.t_westButtonClickedHandler.bindAsEventListener(this));

    var t_northButton = document.createElement('div');
    t_northButton.style.background = "url(" + this.t_guiRoot + this.t_guiStyle + "/north.gif)";
    t_northButton.style.position = "absolute";
    t_northButton.style.width = "15px";
    t_northButton.style.height = "15px";
    t_northButton.style.left = "15px";
    t_northButton.style.top = "0px";
    t_northButton.setAttribute('id', 'northButton');
    t_northButton.style.overflow = "hidden";
    this.element.appendChild(t_northButton);

    Event.observe(t_northButton, 'click',
                  this.t_northButtonClickedHandler.bindAsEventListener(this));

    var t_southButton = document.createElement('div');
    t_southButton.style.background = "url(" + this.t_guiRoot + this.t_guiStyle + "/south.gif)";
    t_southButton.style.position = "absolute";
    t_southButton.style.width = "15px";
    t_southButton.style.height = "15px";
    t_southButton.style.left = "15px";
    t_southButton.style.top = "32px";
    t_southButton.setAttribute('id', 'southButton');
    t_southButton.style.overflow = "hidden";
    this.element.appendChild(t_southButton);

    Event.observe(t_southButton, 'click',
                  this.t_southButtonClickedHandler.bindAsEventListener(this));

    var t_zoomInButton = document.createElement('div');
    t_zoomInButton.style.background = "url(" + this.t_guiRoot + this.t_guiStyle + "/zoom_In.gif)";
    t_zoomInButton.style.position = "absolute";
    t_zoomInButton.style.width = "15px";
    t_zoomInButton.style.height = "15px";
    t_zoomInButton.style.left = "15px";
    t_zoomInButton.style.top = "49px";
    t_zoomInButton.setAttribute('id', 'zoomInButton');
    t_zoomInButton.style.overflow = "hidden";
    this.element.appendChild(t_zoomInButton);

    Event.observe(t_zoomInButton, 'click',
                  this.t_zoomInButtonClickedHandler.bindAsEventListener(this));

    var t_zoomOutButton = document.createElement('div');
    t_zoomOutButton.style.background = "url(" + this.t_guiRoot + this.t_guiStyle + "/zoom_Out.gif)";
    t_zoomOutButton.style.position = "absolute";
    t_zoomOutButton.style.width = "15px";
    t_zoomOutButton.style.height = "15px";
    t_zoomOutButton.style.left = "15px";
    t_zoomOutButton.style.top = "66px";
    t_zoomOutButton.setAttribute('id', 'zoomOutButton');
    t_zoomOutButton.style.overflow = "hidden";
    this.element.appendChild(t_zoomOutButton);

    Event.observe(t_zoomOutButton, 'click',
                  this.t_zoomOutButtonClickedHandler.bindAsEventListener(this));
}
BasicGUI.prototype = {
    t_southButtonClickedHandler: function(t_e) {
        t_move = new Move(0, parseInt(-this.mapControl.getHeight() / 3));
        this.mapControl.move(t_move);
        t_e.stop();
    },
    t_northButtonClickedHandler: function(t_e) {
        t_move = new Move(0, parseInt(this.mapControl.getHeight() / 3));
        this.mapControl.move(t_move);
        t_e.stop();
    },
    t_eastButtonClickedHandler: function(t_e) {
        t_move = new Move(parseInt(-this.mapControl.getWidth() / 3), 0);
        this.mapControl.move(t_move);
        t_e.stop();
    },
    t_westButtonClickedHandler: function(t_e) {
        t_move = new Move(parseInt(this.mapControl.getHeight() / 3), 0);
        this.mapControl.move(t_move);
        t_e.stop();
    },
    t_zoomInButtonClickedHandler: function(t_e) {
        this.mapControl.zoomIn();
        t_e.stop();
    },
    t_zoomOutButtonClickedHandler: function(t_e) {
        this.mapControl.zoomOut();
        t_e.stop();
    },
    t_stopHandler: function(t_e) {
        t_e.stop();
    }
};