JavaScript OOP Tutorial to Simulate Window Browser

var myDog = {
	name: 24,

         race: '',
 
	getValue:  function () {

		return this.value;
	},
}

function Dog(race, name){
	this.race = race;

	this.name = name;
 
	this.getRace = function(){

		return this.race;
	};
 
	this.getName = function(){

		return this.name;
	}
}

var mydog = new Dog('greyhound', 'Rusty');

mydog.getRace(); // Returns grayhound

 
<div id="mywindow" class="lightblue-wb"> <!-- Start of the Window -->
	<div class="lightblue-wb-title"><strong></strong></div> <!--Title -->

    	<div class="lightblue-wb-content"><!--Content -->
 
    	</div>
</div>

	.lightblue-wb{
		font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;

		min-height:100px;
		min-width:100px;
		border:1px solid gray;

		color:#333; 
		background:#EEE;
		-webkit-box-shadow:2px 2px 2px gray;

		-moz-box-shadow:4px 4px 10px gray;
		box-shadow:2px 2px 2px gray;

		overflow:hidden;
	}
 
	.lightblue-wb-title{
		display:block;

		background:url('images/title.jpg');
		color:black;
		height:25px;

		list-style:decimal;
		padding:4px;
		border-bottom:1px solid gray;

	}
 
 
	.lightblue-wb-title strong{
		font-size:100%;

	}
 
	.lightblue-wb-content{
		padding:10px; font-size:80%;

	}

//We create the JsWindow object with an object as parameter.
function JsWinbox(options /* Configuration Object */){

 
	// In that object we look for the property elem which is going to be or div element that is the windows itself.
    //  If the elem is an string, it means that is not a Node Element and it is just the id of the element to be referenced. 
	//So, we search the element by its ID and save it as a property of the JsWindow Object
    if (typeof options.elem == 'string') {

        this.elem = document.getElementById(options.elem);
    }

    else {
        this.elem = options.elem;
    }

 
   // Verify if the options object has the properties height or widh.
   //In case it has them, add them to the JsWinbox object with the methods setWidth and setHeight 
    if (options.height) 
        this.setHeight(options.height);

    if (options.width) 
        this.setWidth(options.width);

    if (options.title) 
        this.setTitle(options.title);

 
    //Private Method
	// Creation of a private Method which means that is not accessible outside the Object. 
	//The method is getStyle, which returns the value of the CSS property of an DOM Element.
    function getStyle(elem, name){

		//If available 
        if (elem.style[name]) {
            return elem.style[name];

        }
		//W3C
        if (document.defaultView && document.defaultView.getComputedStyle) {

            return document.defaultView.getComputedStyle(elem, "").getPropertyValue(name);

        }
		//IE
        else {
            return elem.currentStyle[name];

        }
    }
 
 
    //Privileged Mthods
	//Priveliged Methods that are public methods that are allow to access to privated methods.
	//Here we create the Priviliged methods getWidth and getHeight using the private method getStyle.

 
	//return the width of the jsWinbox
    this.getWidth = function(){
        return parseInt(getStyle(this.elem, 'width'));

    };
	//return the height of the jsWinbox
    this.getHeight = function(){

        return parseInt(getStyle(this.elem, 'height'));

    };
}

//Public Methods Using Prototype
//Using the prototype object we add all the methods the JsWinbox objects are going to share.
JsWinbox.prototype = {

	//Set the width of the JsWinbox object
    setWidth: function(w){
        w = parseInt(w);

        this.elem.style.width = w + 'px';

    },
	//Set the height of the JsWinbox object
    setHeight: function(h){

        h = parseInt(h)
        this.elem.style.height = h + 'px';

    },
	//Set the text to the title bar
    setTitle: function(title){

        var elem = this.elem.getElementsByTagName('strong')[0];

        elem.innerHTML = title;
    },
	//Return the text form the title bar
    getTitle: function(){

        var elem = this.elem.getElementsByTagName('strong')[0];

        return elem.innerHTML;
    },
    //Set the Skin of the JsWinbox object
   // Using the name of the skin + the-jswindowbox-part. E.g. blue-wb-title for the title;

    setSkin: function(name){
        var elem = this.elem;

        elem.className = name + "-wb";
        elem.getElementsByTagName('div')[0].className = name + "-wb-title";

        elem.getElementsByTagName('div')[1].className = name + "-wb-content";

    },
    //Hide and then remove the window from the Document
    close: function(fn){

        this.hide();
        this.elem.parentNode.removeChild(this.elem);

    },
 
    hide: function(){
        this.elem.style.display = 'none';

    },
 
    show: function(){
        this.elem.style.display = '';

    },
 
    //Set the transparency of the object
    setOpacity: function(op){

		//IE
        if (this.elem.filters) {
            this.elem.style.filter = 'alpha(opacity=' + op + ')';

        }
		//W3C
        else {
            this.elem.style.opacity = op / 100;

        }
    },
 
    setPosition: function(x, y, positionType){

        this.elem.style.position = positionType || 'absolute';

        this.elem.style.left = x + 'px';

        this.elem.style.top = y + 'px';

    },
 
    toString: function(){
        var r = "WINDOW TITLED: " + this.getTitle() + ", { WIDTH: " + this.getWidth() + ", HEIGHT: " + this.getHeight() + "}";

        return r;
    }
}