var viewportwidth;
var viewportheight;

function msgWin(id, title, msg, buttonText, parent, xPos, yPos)
{
 this.id = id; //ID of the html element (div) that will contain our window. This is used within the object, and can also be used for some custom changes outside the object 
 this.title = title; //Title of the window
 this.msg = msg; //Message that will be displayed within the window
 this.parent = parent; //Parent element. This is the id of the HTML element to which we want the window to be attached. If it's left blank, the window will be attached to the body of the page 
 this.left = xPos; //Abscissa (property left) in pixels of the window. If this is not set the window will be positioned in the center of the screen
 this.top = yPos; //Ordinate (property top) in pixels of the window
 
 this.buttonText = buttonText; //text of the button that closes the window
 
 //The fallowing are used within the object to handle moving of the window on the page
 this.moving = 0;
 this.offsetLeft = 0;
 
 this.create(); //Constructor of the object.
}


msgWin.prototype.create = function()
{
 var classNameAttribute = "class";
 var buttonPaddingLeft = "250px";
 if(isIE())
 {
    classNameAttribute = "className";
    buttonPaddingLeft = "220px";
 }

 GetHeightWidth();
 var bg = document.createElement('div');
 bg.style.width = viewportwidth+'px';
 bg.style.height = viewportheight+'px';
 //alert(viewportwidth + 'X' + viewportheight);
 bg.id = 'alertBackground'+Math.random();
 bg.style.zIndex = '1000000'; 
 bg.style.position = 'fixed'; 
 bg.style.left = '0px'; 
 bg.style.top = '0px'; 
 bg.setAttribute(classNameAttribute,"modalBackground");
 

 //Create the main element that will contain the window.
 var w = document.createElement('div');
 w.id = this.id;
 w.style.width = '350px';
 w.style.zIndex = '1000000'; 
 //w.style.border = '2px solid #000';
 w.style.position = 'absolute';
 w.setAttribute(classNameAttribute,"modal");
 
 if(!this.left) //If we haven't set coordinates for the object, the window will be centered in the middle of the page 
 {
  w.style.left = '50%';
  w.style.top = '50%';
  w.style.marginLeft = '-200px';
  w.style.marginTop = '-50px';
 }
 else //We have set coordinates, we shall position the element according to them
 {
  w.style.left = this.left+'px';
  w.style.top = this.top+'px';
 }
 
 //Create the window title. The essential thing here is that we set an id and some event hanlers that will allow us to update the content and movement of the window
 var t = document.createElement('h2');
 t.id = this.id+'_title';
 
 var lb = document.createElement('span');
 lb.id = this.id+'_titleLabel';
 lb.innerHTML = this.title;
 
 var closeImg = document.createElement('input');
 closeImg.type = 'image';
 closeImg.setAttribute(classNameAttribute, "btn_close");
 closeImg.setAttribute("src", "../images/btn_close.png");
 
 closeImg.onclick = function() 
 {
  this.parentNode.style.display = 'none';
  document.getElementById(bg.id).style.display = 'none';
 };
 
 t.appendChild(lb); 
 w.appendChild(t); //Append the title to the window.
 w.appendChild(closeImg); //Append the title to the window.
 
 var wBody = document.createElement('div');
 wBody.setAttribute(classNameAttribute, "modalBody")
 
 //Create the window content element. The only interesting thing here is that we set an ID so we can update the content later. 
 var c = document.createElement('div');
 c.id = this.id+'_content';
 c.style.minHeight = '50px';
 c.style.fontSize = '13px';
 c.style.padding = '3px';
 t.style.paddingLeft = '5px';
 c.innerHTML = this.msg;
 c.style.background = '#fff';   //'#dfe3e8'; 
 c.style.color = '#000';   //'#dfe3e8'; 
 
 wBody.appendChild(c);
 
 //Create a dummy div that will allow us to position the close button without interfering with the other layout of the window
 var tmp = document.createElement('div');
 tmp.style.background = '#fff';   //'#dfe3e8';
 tmp.style.textAlign = 'center';
 tmp.style.padding = '3px 0 3px 0';
 tmp.style.height = '100%';
 
 //Now create the close button.
 var u = document.createElement('ul');
 u.setAttribute(classNameAttribute, "buttons");
 u.style.height = '20px';
 
 var l = document.createElement('li');
 l.style.paddingLeft = buttonPaddingLeft;
 
 var b = document.createElement('input');
 b.type = 'button';
 b.value = this.buttonText;
 b.style.width = '70px';
 b.style.border = '0px solid #000';
 b.onmouseover = function() {this.style.cursor = 'pointer';};
 //Add event listener for clicks that will change the display property of the window to 'none', that hides it, so it looks closed  
 b.onclick = function() 
 {
  //The interesting thing here is that we don't need to create another prototype to the msgWin object and use methodize() or any other method to close the window.
  //We have access to the window from the close button itself without depending on an ID or anything else that we used on the other event handlers.
  this.parentNode.parentNode.parentNode.parentNode.parentNode.style.display = 'none';
  document.getElementById(bg.id).style.display = 'none';  
 };
 
 l.appendChild(b);
 u.appendChild(l);
 tmp.appendChild(u); //Append the button to the dummy div..
 
 wBody.appendChild(tmp); //..and then append them both to the window.
 w.appendChild(wBody);
 
 
 var wFooter = document.createElement('div');
 wFooter.setAttribute(classNameAttribute, "modalBottom")
 var wFooterIn = document.createElement('div');
 wFooterIn.innerHTML=' ';
 
 wFooter.appendChild(wFooterIn);
 w.appendChild(wFooter);

 //bg.appendChild(w);
 
 if(this.parent) //If we have set a parent element to contain the window - append the window to it 
 {
  document.getElementById(this.parent).appendChild(bg);
  document.getElementById(this.parent).appendChild(w);
 }
 else //otherwise - append it to the body of our page
 {
  document.body.appendChild(bg);
  document.body.appendChild(w);
 }
 
 return;
}

function showAlert(title, msg)
{
    new msgWin('alertId' + Math.random(), title, msg, 'Close')
    return false;
}

function isIE()
{
    if(navigator.appName == "Microsoft Internet Explorer")
        return true;
    else
        return false;
}

function GetHeightWidth()
{ 
 // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight 
 if (typeof window.innerWidth != 'undefined')
 {
      viewportwidth = window.innerWidth,
      viewportheight = window.innerHeight
 }
 
 // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
 else if (typeof document.documentElement != 'undefined'
     && typeof document.documentElement.clientWidth !=
     'undefined' && document.documentElement.clientWidth != 0)
 {
       viewportwidth = document.documentElement.clientWidth,
       viewportheight = document.documentElement.clientHeight
 } 
 // older versions of IE 
 else
 {
       viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
       viewportheight = document.getElementsByTagName('body')[0].clientHeight
 }
}