var Tool = {
	t:null,
    readElementCoordinate : function(ele)
    {
        var x = ele.offsetLeft;
        var y = ele.offsetTop;
        for (var tmp = ele.offsetParent; tmp; tmp = tmp.offsetParent) {
            x += (tmp.offsetLeft - tmp.scrollLeft);
            y += (tmp.offsetTop - tmp.scrollTop);
        }
        return [x,y];
    },

    bindEvent : function(el, eventName, handler, args)
    {
        var _handler = handler;
        if (args) {
            _handler = function(e)
            {
                handler.call(args, e);
            }
        }
        if (el.addEventListener) {
            el.addEventListener(eventName, _handler, false);
        }
        else if (el.attachEvent) {
            el.attachEvent("on" + eventName, _handler);
        }
    },

    //Remove Event
    removeEvent : function(el, eventName, handler)
    {
        if (el.removeEventListener) {
            el.removeEventListener(eventName, handler, false);
        }
        else if (el.detachEvent) {
            el.detachEvent("on" + eventName, handler);
        }
    },

    createElement : function(eleType, args)
    {
        var e = document.createElement(eleType);
        for (var key in args) {
            if (key == 'style') {
                var styles = args[key];
                for (var s in styles) {
                    e.style[s] = styles[s];
                }
            }
            else {
                e[key] = args[key];
            }
        }
        return e;
    },

    fitPhotoSize:function(w, h, maxW, maxH)
    {
        var resizeWidth = maxW;
        var resizeHeight = maxH;

        var wProportion = w / maxW;
        var hProportion = h / maxH;

        if (wProportion > hProportion) {
            resizeHeight = parseInt(h / wProportion);
        }
        else if (hProportion > wProportion) {
            resizeWidth = parseInt(w / hProportion);
        }

        return [resizeWidth,resizeHeight];
    },

    operationShelter : function(isShow)
    {
        var shelter = $("shelter");
        if (!shelter) {
            shelter = Tool.createElement("DIV", {id:"shelter"});
            shelter.className = "fullPanel";
            document.body.appendChild(shelter);
        }
        shelter.style.height = '100%';
        shelter.style.width = '100%';
        if (document.body.scrollHeight > document.body.clientHeight) {
            shelter.style.height = document.body.scrollHeight + "px";
        } 
        if (document.body.scrollWidth > document.body.clientWidth) {
            shelter.style.width = document.body.scrollWidth + "px";
        }
        shelter.style.display = isShow ? "block" : "none";
    },

    Wait : function(title, content)
    {
        title = title || "Waiting";
        content = content || "The system is loading....";
        Tool.operationShelter(true);
        var waitDiv = $("div_wait");
        if (!waitDiv) {
            waitDiv = Tool.createElement("DIV", {id:"div_wait"});
            waitDiv.style.width = "300px";
            waitDiv.style.border = "1px solid #CAD7E0";
            waitDiv.style.position = "absolute";
            waitDiv.style.zIndex = "999";
            waitDiv.style.left = ((document.body.clientWidth / 2) - 150) +  "px";
            waitDiv.style.top = (document.body.clientHeight / 2 - 30) + "px";
            var waitHtml = "<div class=\"panel_title\" style=\"height:25px;\">";
            waitHtml +=
            "<div style=\"font: normal 11px tahoma, verdana, helvetica;display: block;white-space: nowrap;float:left;padding: 4px;color:#F67522;font-weight:bolder;font-size:12pt;\">";
            waitHtml += title;
            waitHtml += "</div>";
            waitHtml += "</div>";
            waitHtml += "<div style=\"height:30px;background-color:#EDECEC;padding:10px;\" id='wait_content'>";
            waitHtml += content;
            waitHtml += "</div>";
            waitDiv.innerHTML = waitHtml;

            document.body.appendChild(waitDiv);
        }
        Tool._resetWaitDivPosition();
        Tool.updateWaitContent(content);
        waitDiv.style.display = "block";
        Tool.t = setInterval("Tool._resetWaitDivPosition()", 20);
    },
    _resetWaitDivPosition : function() {
    	var waitDiv = $("div_wait");
    	var pagePosition = Tool._getScroll();
        waitDiv.style.left = ((document.body.clientWidth / 2) - 150) + pagePosition.x + "px";
        waitDiv.style.top = (document.body.clientHeight / 2 - 30) + pagePosition.y + "px";
    },
    //
	//	Get the scroll for the page.
	//
	_getScroll : function(){
    	var pagePosition = {};
      	if(typeof(window.pageYOffset) == 'number') {
        	pagePosition.x = window.pageXOffset;
        	pagePosition.y = window.pageYOffset;
      	} else if(document.body && (document.body.scrollLeft || document.body.scrollTop)) {
	       	pagePosition.x = document.body.scrollLeft;
        	pagePosition.y = document.body.scrollTop;
		} else if(document.documentElement) {
        	pagePosition.x = document.documentElement.scrollLeft;
        	pagePosition.y = document.documentElement.scrollTop;
      	}
      	return pagePosition;
	},
    updateWaitContent:function(content)
    {
        if ($('wait_content')) {
            $('wait_content').innerHTML = content;
        }
    },

    CloseWait : function()
    {
        var waitDiv = $("div_wait");
        if (Tool.t) {
            clearInterval(Tool.t)
        }
        waitDiv.style.display = "none";
        Tool.operationShelter(false);
    },

    confirm:function (handlerName, title, content,config)
    {
        config=config||{};
        var deleteHidden=config['delete_hidden']||false;
        var cancelHidden=config['cancel_hidden']||false;
        Tool.operationShelter(true);
        title = title || 'Delete Album?';
        content = content || 'The photo in this album has been used in the photobook.Do you confirm to delete it?';
        var waitDiv = $("div_confirm");
        if (!waitDiv) {
            waitDiv = Tool.createElement("DIV", {id:"div_confirm"});
            waitDiv.style.width = "300px";
            waitDiv.style.border = "1px solid #CAD7E0";
            waitDiv.style.position = "absolute";
            //waitDiv.style.backgroundColor = "#ECECEC";
            waitDiv.style.zIndex = "999";
            document.body.appendChild(waitDiv);
        }

        waitDiv.style.left = ((document.body.clientWidth / 2) - 150 +document.body.scrollLeft) + "px";
        waitDiv.style.top = (document.body.clientHeight / 2 - 30+document.body.scrollTop) + "px";

        var waitHtml = "<div class=\"panel_title\" style=\"height:25px;\">";
        waitHtml +="<div style=\"font: normal 11px tahoma, verdana, helvetica;display: block;white-space: nowrap;float:left;padding: 4px;color:#F67522;font-weight:bolder;font-size:12pt;\">";
        waitHtml += title;
        waitHtml += "</div>";
        waitHtml += "</div>";
        waitHtml += "<div style=\"height:30px;background-color:#EDECEC;padding:10px;\" id='wait_content'>";
        waitHtml += content;
        waitHtml += "</div>";

        if(!deleteHidden){
            waitHtml += "<div style='padding-bottom:10px;padding-left:100px;background-color:#EDECEC;height:35px;'><div class='btn_delete_normal' onclick=\"" +
                    handlerName + "\"></div>";
        }else{
            waitHtml += "<div style='padding-bottom:10px;padding-left:100px;background-color:#EDECEC;height:35px;'><div class='btn_ok' onclick=\"Tool.CloseConfirm()\"></div>";
        }
        if(!cancelHidden){
            waitHtml += "<div class='btn_cancel_normal' onclick=\"Tool.CloseConfirm()\" style='margin-left:20px;'/></div></div>";
        }
        waitDiv.innerHTML = waitHtml;
        waitDiv.style.display = "block";
    },

    CloseConfirm:function()
    {
        var waitDiv = $("div_confirm");
        if (waitDiv) {
            waitDiv.style.display = "none";
        }
        Tool.operationShelter(false);
    },

    orginHtml:null,
    help:function()
    {
        if (!$("help_back")) {
            Tool.orginHtml = $("home_content").innerHTML;
            Tool.Wait("Waiting", "System is loading....");
            var handler = function(data)
            {
                Tool.CloseWait();
                $("home_content").innerHTML = data;
            }
            readRemoteUrl("help.do", handler);
        }
    },

    helpBack:function()
    {
        if (Tool.orginHtml) {
            $("home_content").innerHTML = Tool.orginHtml;
        }
    }
}

var DropMenuUtil = {
    menuLocation:{},
    args:{},
    init:function(target, dataList, args)
    {
        var dropLocation = "drop_down_location_" + target.id;
        if (args) {
            this.args[dropLocation] = args;
        }
        else {
            this.args[dropLocation] = {};
        }
        if (!$(dropLocation)) {
            this.menuLocation[dropLocation] = target.id;
            var coordinate = Tool.readElementCoordinate(target);
            var dropDiv = document.createElement("DIV");
            dropDiv.id = dropLocation;
            dropDiv.style.display = "none";
            dropDiv.style.border = "1px #B7B7B7 solid";
            dropDiv.style.width = "300px";
            dropDiv.style.height = "200px";
            dropDiv.style.overflowY = "auto";
            dropDiv.style.position = "absolute";
            dropDiv.style.left = coordinate[0];
            dropDiv.style.top = coordinate[1] + 30;
            //TODO BUG 172
            //dropDiv.style.backgroundColor = "#E2E2E2";
            dropDiv.style.backgroundColor = "#FFFFFF";

            $("home_content").appendChild(dropDiv);

            if (dataList) {
                var num = dataList.length;
                for (var i = 0; i < num; i++) {
                    if (args['currentValue'] && args['currentValue'] == dataList[i]['id']) {
                        $(DropMenuUtil.menuLocation[dropLocation]).innerHTML = "<div class='dropdown_div'>" +
                                                                               dataList[i]['name'] + "</div>";
                    }
                    DropMenuUtil.appendOption(dropDiv, dataList[i]['name'], dataList[i]['iconUrl'], dataList[i]['id']);
                }
            }
        }
    },

    //Show Input
    showInput:function(location)
    {
        var dropLocation = "drop_down_location_" + location;
        var args = this.args[dropLocation];
        var l = $(location);
        if (!args['editMode']) {
            var editInputId = "dropdown_input_text" + location;
            var editHiddenId = 'dropdown_input_hidden' + location;
            l.innerHTML =
            "<div class='dropdown_input_div'><input type='text' onblur=\"DropMenuUtil._inputAction(event,'" +
            location + "')\" id='" + editInputId +
            "' class='dropdown_input_text' maxlength='20' value=\"" + UploadUtil.currentTargetAlbum['name'] +
            "\" onkeypress=\"DropMenuUtil.inputAction(event,'" + location +
            "')\"/><input type='hidden' id='" + editHiddenId + "' value='" +
            UploadUtil.currentTargetAlbum['id'] +
            "'/></div>";
            this.args[dropLocation]['editMode'] = true;
            $(editInputId).focus();
            $(editInputId).select();
        }
    },
    _inputAction:function(event, location)
    {
        var dropLocation = "drop_down_location_" + location;
        var args = this.args[dropLocation];
        if (args['inputAction']) {
            var editInputId = "dropdown_input_text" + location;
            var editHiddenId = 'dropdown_input_hidden' + location;
            args['inputAction'](event, editInputId, editHiddenId, location);
        }
    },
    inputAction:function(event, location)
    {
        var theEvent = window.event || arguments.callee.caller.arguments[0];
        if (theEvent) {
            if (theEvent.keyCode == 13) {
                DropMenuUtil._inputAction(event, location);
            }
        }
    },

    show:function(location)
    {
        var dropLocation = "drop_down_location_" + location;
        if ($(dropLocation)) {
            var show = $(dropLocation).style.display;
            if (show == 'none') {
                //TODO BUG 205
                var coordinate = Tool.readElementCoordinate($(location));
                $(dropLocation).style.top = coordinate[1]+document.body.scrollTop + 30;
                // add logic to adjust the left of the dropLocation
                var dropLocationLeft = coordinate[0];
                if (document.body.scrollLeft==0) {
                	var dropWidth = Number($(dropLocation).style.width.replace("px",""));
                	var widthOffset = dropLocationLeft + dropWidth + 10 - document.body.clientWidth;
                	if (widthOffset > 0) {
                		dropLocationLeft = dropLocationLeft - widthOffset;
                	}
                }
                $(dropLocation).style.left = dropLocationLeft;
                $(dropLocation).style.display = "block";
                //alert(coordinate[1]);
            }
            else {
                $(dropLocation).style.display = "none";
            }
        }
        //            $("debug").value = dropDiv.parentNode.innerHTML;
    },

    appendOption:function(parent, text, imagePath, value)
    {
        var option = document.createElement("div");
        option.style.marginBottom = "2px";
        option.style.height = "35px";
        option.style.width = "100%";
        option.style.cursor = "pointer";
        //TODO BUG 172
        //option.style.backgroundColor = "#E2E2E2";

        option.id = "option_location_" + value;
        option.value = value;
        option.text = text;
        if (imagePath) {
            option.imagePath = imagePath;
        }
        else {
            //TODO
        }

        var image = document.createElement("img");
        if (imagePath) {
            image.src = imagePath;
        }
        else {
            //TODO
        }
        image.style.width = "30px";
        image.style.height = "30px";
        image.style.margin = "2px";

        var imageDiv = document.createElement("span");
        imageDiv.style.cssFloat = "left";
        imageDiv.style.width = "30px";
        imageDiv.style.height = "30px";
        imageDiv.appendChild(image);

        var textDiv = document.createElement("span");
        textDiv.id = "option_text_div_" + value;
        textDiv.style.cssFloat = "left";
        textDiv.style.marginTop = "6px";
        textDiv.style.marginLeft = "4px";
        textDiv.style.width = "240px";
        textDiv.style.height = "30px";
        textDiv.innerHTML = text;

        option.appendChild(imageDiv);
        option.appendChild(textDiv);

        parent.appendChild(option);

        Tool.bindEvent(option, "mouseover", DropMenuUtil.select, {target:option,dropLocation:parent,text:text,value:value});
        Tool.bindEvent(option, "mouseout", DropMenuUtil.unselect, {target:option,dropLocation:parent,text:text,value:value});
        Tool.bindEvent(option, "click", DropMenuUtil.selectAction, {target:option,dropLocation:parent,text:text,value:value});
    },

    select:function(e)
    {
        if (this.target) {
            this.target.style.backgroundColor = "#FF912D";
        }
        else {
            e.style.backgroundColor = "#FF912D";
        }
    },

    unselect:function(e)
    {
        if (this.target) {
            //TODO BUG 172
            this.target.style.backgroundColor = "#FFFFFF";
        }
        else {
            //TODO BUG 172
            e.style.backgroundColor = "#FFFFFF";
        }
    },

    //Input Select Action
    inputSelectAction:function(dropLocation, text, value)
    {
        $(DropMenuUtil.menuLocation[dropLocation]).innerHTML = "<div class='dropdown_div'>" + text + "</div>";
        DropMenuUtil.args[dropLocation]['editMode'] = false;
        $(dropLocation).style.display = "none";
        if (DropMenuUtil.args[dropLocation]['showHandler']) {
            DropMenuUtil.args[dropLocation]['showHandler'](value);
        }
    },

    selectAction:function(e)
    {
        var target = this.target || e;
        var dropLocation = this.dropLocation;
        $(DropMenuUtil.menuLocation[dropLocation.id]).innerHTML = "<div class='dropdown_div'>" + target.text + "</div>";
        DropMenuUtil.args[dropLocation.id]['editMode'] = false;
        $(dropLocation.id).style.display = "none";
        if (DropMenuUtil.args[dropLocation.id]['showHandler']) {
            DropMenuUtil.args[dropLocation.id]['showHandler'](target.value);
        }
    }
}