//            Title:	Html Alert box
//      Description:	Custom html alert box

function alert_box(alert_str)
{
    var top_background_src = "images/alertbox/alert_top.png";
    var middle_background_src = "images/alertbox/alert_middle.png";
    var bottom_background_src = "images/alertbox/alert_bottom.png";
    var okay_button_src = "images/alertbox/alert_okay.jpg";
    holder_div_id = "alert_box";
    
    
    // --- holder
    var holder_div = document.createElement("div");
    holder_div.setAttribute("id", holder_div_id);
    holder_div.style.position = "absolute";
    holder_div.style.top = "0%";
    holder_div.style.left = "0px";
    holder_div.style.width = "100%";
    holder_div.style.height = "100%";
    holder_div.style.zIndex = "100";
    
    
    // --- Holder background
    var holder_background_div = document.createElement("div");
    holder_background_div.style.position = "fixed";
    holder_background_div.style.top = "0px";
    holder_background_div.style.left = "0px";
    holder_background_div.style.width = "100%";
    holder_background_div.style.height = "100%";
    holder_background_div.style.backgroundColor = "#000000";
    holder_background_div.style.opacity = "0.3";
    holder_background_div.style.filter = "alpha (opacity=30)";// ie6 & 7
	
    
    // ---  Actual Alert Box
    var wrap_div = document.createElement("div");
    wrap_div.style.position = "absolute";
    wrap_div.style.left = "50%";
    wrap_div.style.top = "40%";
    wrap_div.style.width = "326px";
    wrap_div.style.marginLeft = "-163px";
    
    
    // --- Border Images
    var top_background_img = document.createElement("img");
    top_background_img.setAttribute("src", top_background_src);
    
    var bottom_background_img = document.createElement("img");
    bottom_background_img.setAttribute("src", bottom_background_src);
    
    
    // --- Alert Box Information and Button
    var alert_div = document.createElement("div");
    alert_div.style.background = "url(" + middle_background_src + ") repeat-y";
    alert_div.style.paddingTop = "1em";
    alert_div.style.paddingRight = "12px";
    alert_div.style.paddingBottom = "1em";
    alert_div.style.paddingLeft = "12px";
    
    var alert_p = document.createElement("p");
    alert_p.innerHTML = alert_str;
    alert_p.style.fontFamily = "'Trebuchet MS',Arial,Helvetica,sans-serif";
    alert_p.style.fontSize = "0.8em";
    alert_p.style.textAlign = "center";
    alert_p.style.color = "#000000";
    alert_p.style.marginBottom = "1em";
    
    var okay_button_a = document.createElement("a");
    okay_button_a.setAttribute("href", "#okay");
    okay_button_a.innerHTML = "OK";
    okay_button_a.onclick = okay_remove_alert;
    okay_button_a.style.display = "block";
    okay_button_a.style.fontFamily = "'Trebuchet MS',Arial,Helvetica,sans-serif";
    okay_button_a.style.fontSize = "12pt";
    okay_button_a.style.fontWeight = "bold";
    okay_button_a.style.lineHeight = "23px";
    okay_button_a.style.color = "#FFFFFF";
    okay_button_a.style.textDecoration = "none";
    okay_button_a.style.background = "url(" + okay_button_src + ") center no-repeat";
    
    var okay_button_p = document.createElement("p");
    okay_button_p.style.textAlign = "center";
    okay_button_p.style.marginBottom = "0em";
	
    
    // --- Build Html
    okay_button_p.appendChild(okay_button_a);
    
    alert_div.appendChild(alert_p);
    alert_div.appendChild(okay_button_p);
    
    wrap_div.appendChild(top_background_img);
    wrap_div.appendChild(alert_div);
    wrap_div.appendChild(bottom_background_img);
	
    holder_div.appendChild(holder_background_div);
    holder_div.appendChild(wrap_div);
	
    document.body.appendChild(holder_div);
    
	
	// --- Close Alertbox Function
    function okay_remove_alert(e)
    {
        var alertbox_div = document.getElementById("alert_box");
        document.body.removeChild(alertbox_div);
		
        if(!e)
        {
            e = window.event;
            e.returnValue = false;
        }
        
        return false;
    }
}