// Display the created right mac on screen
function showRyMacBox(id) {
    reposition(id);
    createOverlay(id);
    $("#" + id).show();
}

// Create a layer under the macbox
// User could click on this to close the form.
function createOverlay(id) {
    var overlayLayer = document.createElement("div");
    $(overlayLayer).attr("class", "macbox-overlay");
    $(overlayLayer).click(function() {
        hideRyMacBox(id);
    });
    $(overlayLayer).height($(document).height());
    $("body").append(overlayLayer);
}

// Center the macbox in the screen
// seem something not right here, need to take a look later
function reposition(id) {
    var thisEle = $("#" + id).get(0);
    if (thisEle == null) return;
    
    var sidePos = (($(window).width() / 2) - ($(thisEle).width() / 2));
    if (sidePos < 0) sidePos = 0;
    sidePos += "px";
    $(thisEle).css("left", sidePos);
    
    var topPos = $(window).scrollTop() + ($(window).height() / 2) - ($(thisEle).height() / 2);
    if (topPos < 0) topPos = 0;
    topPos += "px";
    $(thisEle).css("top", topPos);
}

function isdefined(variable) {
    return (typeof(window[variable]) == "undefined")?  false: true;
}

function hideRyMacBox(id) {
    $("#" + id).hide();
    $(".macbox-overlay").remove();
}

function RyMacBox(name, image, width, height, outputToEle, attributesObj, forceHeight, callbackFunction, doOverlay, macboxStyle) {

	// Required //
	//////////////

	this.image = image;
	this.image.isHtml = false;
	this.output = $("body").get(0);
	this.name = name;
	this.callbackFunction = callbackFunction;
	this.doOverlay = doOverlay;
	
	this.style = "";
	if (macboxStyle != null) {
	    if (macboxStyle == "round") {
	        this.style = "-round";
	    }
	}

	this.width = width;	// Width in pixels
	this.height = height;	// Height in pixels
	this.forceHeight = forceHeight;

	if (typeof(this.image) != "object") {
		var bits = this.image.split("|");

		if ((bits[0] == "swf")||(bits[0] == "SWF")) {
			var src = bits[1];
	
			this.image = {};
			this.image.src = src;
			this.image.isFlash = true;
		}
		else if ((bits[0] == "html")||(bits[0] == "HTML")) {
			var DATA = document.getElementById(bits[1]).innerHTML;
			
			this.image = {};
			this.image.object = document.getElementById(bits[1]);
			this.image.data = DATA;
			this.image.origEle = document.getElementById(bits[1]);
			this.image.isFlash = false;		
			this.image.isHtml = true;
		}
		else if (bits[0].toLowerCase() == "img") {
		    var box = document.createElement("div");
		    $("body").append(box);
		    $(box).attr("id", bits[1]); 
		    var img = document.createElement("img");
		    $(box).append(img);
		    $(img).attr("src", attributesObj.image);
		    $(img).attr("rel", this.name);
		    $(img).bind("load", function() {
		        reposition($(this).attr("rel"));
            });
		    if (attributesObj.text != undefined) {
		        var p = document.createElement("p");
		        $(box).append(p);
		        $(p).html(attributesObj.text);
		    }
		    this.image = {};
		    this.image.object = $(box).get(0);
		    this.image.data = $(box).get(0).innerHTML;
		    this.image.origEle = $(box).get(0);
		    this.image.isFlash = false;
		    this.image.isHtml = true;
		}
	}

	// Optional //
	//////////////

	this.oncloseFunc = "";
	this.onopenFunc = function() { };	
	
	this.caption = "";	// Caption

	// If extra attributes have been passed in
	if (typeof(attributesObj) == "object") {
		if (attributesObj.caption != undefined) {	this.caption = attributesObj.caption; }
		if (attributesObj.onclose != undefined) {	this.oncloseFunc = attributesObj.onclose; }
		if (attributesObj.onopen != undefined) {	this.onopenFunc = attributesObj.onopen; }		
	}

	var closedRef = this;
	setTimeout(function() { closedRef.init(); }, 200);
}

RyMacBox.prototype.init = function() {
    var closedRef = this;

	if ((isdefined("IsLoaded") == false)||(IsLoaded != 1)) {
		setTimeout(function() { closedRef.init(); }, 100);
		return;
	}
    
	var mbMainContainer = document.createElement("div");
	mbMainContainer.id = this.name;
	mbMainContainer.className = "macbox" + ((this.style.length != 0) ? " macbox" + this.style : "");
	var mbWidthAdd = 90;
	if (this.style == "-round") {
	    mbWidthAdd = 80;
	}
	mbMainContainer.style.width = this.width + mbWidthAdd + "px";
		
		var mbTopLeft = document.createElement("div");
	    mbTopLeft.className = "macbox-top-left";
	    var tlWidthAdd = 45;
	    if (this.style == "-round") tlWidthAdd = 35;
	    mbTopLeft.style.width = this.width + tlWidthAdd + "px";
	    
	mbMainContainer.appendChild(mbTopLeft);
	    
	    var mbTopRight = document.createElement("div");
	    mbTopRight.className = "macbox-top-right";
	    
	        var mbCloseLink = document.createElement("a");
	        mbCloseLink.className = "macbox-close";
		    mbCloseLink.innerHTML = "close";
		    mbCloseLink.href = "#";
		    var name = this.name;
		    mbCloseLink.onclick = function() {
		        hideRyMacBox(name); 
		        this.oncloseFunc;
		        return false;
            }
            
	    mbTopRight.appendChild(mbCloseLink);
	    
	mbMainContainer.appendChild(mbTopRight);
	        
        var mbMiddle = document.createElement("div");
        mbMiddle.className = "macbox-middle";
        mbMiddle.style.width = this.width + 90 + "px";
        
            var mbRight = document.createElement("div");
            mbRight.className = "macbox-right";
            mbRight.style.width = this.width + 45 + "px";
	        
	            var mbContent = document.createElement("div");
	            mbContent.className = "macbox-content";
	            mbContent.style.width = this.width + "px";
                if (this.image.isHtml) {
                    // Remove the original node
                    this.image.origEle.parentNode.removeChild(this.image.origEle);
                    //mbContent.innerHTML = this.image.data;
                    mbContent.appendChild(this.image.object);
                }
                else if (this.image.isImage) {
                    this.image.origEle.parentNode.removeChild(this.image.origEle);
                    mbContent.appendChild(this.image.object);
                }
                else {
                    var mbImgContainer = document.createElement("div");
	                    var mbImg = document.createElement("img");
	                    mbImg.id = this.name + "_image";

	                    if (!this.image.isFlash) {
		                    mbImg.src = this.image.src;
		                    mbImg.alt = "";
	                    }
                    mbImgContainer.appendChild(mbImg);
		            mbContent.appendChild(mbImgContainer);

                    var mbCaption = document.createElement("div");
                    mbCaption.className = "macbox-caption";
		            mbCaption.innerHTML = this.caption;
		            mbContent.appendChild(mbCaption);
		        }
		    
		    mbRight.appendChild(mbContent);
		    
		mbMiddle.appendChild(mbRight);
			
    mbMainContainer.appendChild(mbMiddle);
			
		var mbBottomLeft = document.createElement("div");
		mbBottomLeft.className = "macbox-bottom-left";
		var blWidthAdd = 45;
		if (this.style == "-round") blWidthAdd = 35;
		mbBottomLeft.style.width = this.width + blWidthAdd + "px";
	
	mbMainContainer.appendChild(mbBottomLeft);
		
		var mbBottomRight = document.createElement("div");
		mbBottomRight.className = "macbox-bottom-right";
		
	mbMainContainer.appendChild(mbBottomRight);
	
	$(mbMainContainer).hide();

	var closedRef = this;
	setTimeout(function() { closedRef.output.appendChild(mbMainContainer); }, 0);
	
	if (this.image.isFlash) {
		swfobject.embedSWF("images/test.swf", this.name + "_image", this.width, this.height, "9.0.0");  
	}
	
	if (this.callbackFunction != null) {
	    setTimeout(this.callbackFunction, 200);
	}
}

function triggerMacBox(Arguments) {
    var defaults = {
        source: "AJAX", // Which source of information we will get. HTML, AJAX, IMAGE
        boxID: "RymacBoxPopup", // Id/name of the pop up
        width: 700, // Width of the pop up
        height: 1,  // Height of the pop up, 1 mean auto
        parentObj: $("body").get(0), // html DOM object. The pop up will be insert at the end of this object
        ajaxUrl: "", // An Url to the ajax the return result should be array in the objArray format
        ajaxData: "", // data to send to the ajax
        borderType: "round" // Type of the border could be: round,
    };
    var args = $.extend(defaults, Arguments);

    if ($("#" + args.boxID).get(0) != null) {
        showRyMacBox(args.boxID);
    } else {
        if (args.source == "AJAX") {
            $.ajax({
                type: "GET",
                url: args.ajaxUrl,
                data: args.ajaxData,
                success: function(data, status) {
                    var popup = document.createElement("div");
                    $(popup).attr("id", args.boxID);
                    $(popup).append(data);
                    $("body").append(popup);
                    var popupMacBox = new RyMacBox(args.boxID, "html|" + args.boxID, 
                    args.width, args.height,
                    args.parentObj, {}, {}, function() {
                        showRyMacBox(args.boxID);
                    }, true, args.borderType);
                }
            });
        }
    }
}