/// <reference path="jquery-1.5.min.js"/>
/// <reference path="packageLoader.js"/>
/// <reference path="authentication.js"/>
/// <reference path="displayManager.js"/>
var menuRander = (function () {
    var menuLayer = null;
    var visible = false;
    auth.onLogout(function () {
        if (menuLayer && menuLayer.remove) {
            menuLayer.remove();
            menuLayer = null;
        }
    });
    packageLoader.ready(function () {
        /*
        //建立container
        var targetElement = $("<div style='height:100%;font-size:90%;overflow:auto'><ul></ul></div>");

        //把packages裡的東西畫上去
        //        var index = 1;
        //        $(packageLoader.packages).each(function () {
        //            $("<li><a href='#tabs_" + encodeURIComponent("" + this.title) + "'>" + this.title + "</a></li>").appendTo(targetElement.find("ul"));
        //            var pane = $("<div id='tabs_" + this.title + "'></div>").appendTo(targetElement);
        //            index++;

        var index = 1;
        $(packageLoader.packages).each(function () {
        $("<li><a href='#panes_" + index + "'>" + this.title + "</a></li>").appendTo(targetElement.find("ul"));
        var pane = $("<div id='panes_" + index + "'></div>").appendTo(targetElement);
        index++;

        $(this.gadgets).each(function () {
        var item = this;
        var gadget_board =
        $("<div style='position:relative;float:left;text-align:center;padding:10px;-moz-border-radius:10px;border-radius:10px;' title='" + this.title + "'>" +
        "<a href='#" + encodeURIComponent("" + this.id) + "'  style='text-decoration:none'>" +
        "<img id='icon' src='" + this.icon + "' style='position:relative;width:96px;height:96px;padding:0px;border:0px none;-moz-border-radius:10px;border-radius:10px;background: #d0e5f5 url(css/redmond/images/ui-bg_glass_75_d0e5f5_1x400.png) 50% 50% repeat-x; font-weight: bold; color: #1d5987;'/>" +
        "<br/><p id='title' style='position:relative;display:inline;top:3px;'>" + (this.title.length > 6 ? this.title.substr(0, 6) + "..." : this.title) + "</p>" +
        "<div id='hint' style=\"display:none;position:absolute; z-index:5;width:32px;height:32px;left:85px;top:8px;-moz-border-radius:16px;border-radius:16px;background-image:url('reddot.png');background-color:red; border-width:0px;\"><span style=\"position:relative;top:8px;width:32px;color:white;\">10+</span></div>" +
        "</a>" +
        "</div>");

        $(gadget_board)
        .mouseover(function () {
        $(this).css({ "background": "AliceBlue" });
        })
        .mouseout(function () {
        $(this).css("background", "transparent");
        });
        function setExterior() {
        var divHint = gadget_board.find("#hint");
        if (item.hint) {
        var value = item.hint;
        if (value / 1 == value) {
        if (value > 100) {
        value = "100+";
        }
        }
        divHint.find("span").text(value);
        divHint.show();
        }
        else
        divHint.hide();
        };
        setExterior();
        item.onExteriorChanged(setExterior);
        gadget_board.appendTo(pane);
        });
        });

        $(targetElement).tabs({
        collapsible: true,
        fx: { opacity: 'toggle', duration: '100' }
        });
        */

        //建立container
        var targetElement = $("<div class='package-view' style='height:100%;overflow:auto'><ul class='package-tabs'></ul><div class='package-box'></div></div>");

        var index = 1;
        $(packageLoader.packages).each(function () {

            var tab =
        		$("<li class='package-tab' index='" + index + "'><a class='tab-text' href='#panes_" + index + "'>" + this.title + "</a></li>")
        		.appendTo(targetElement.find(".package-tabs"))
           		.bind("click", function () {
           		    $(".package-tab").removeClass("active");
           		    $(this).addClass("active");

           		    var index = $(this).attr("index");

           		    $(".package-container").hide();
           		    $("div[id='panes_" + index + "']").show("slide", {}, 500);
           		});

            var pane =
            	$("<div class='package-container' id='panes_" + index + "'></div>")
            	.appendTo(targetElement.find(".package-box")).hide();

            if (index == 1) {
                $(tab).addClass("active");
                pane.show("slide", {}, 500);
            }

            index++;

            $(this.gadgets).each(function (index, item) {
                var gadget_board =
					$("<div class='gadget-board' title='" + item.title + "'>" +
                        (item.popupURL ? ("<a href='" + item.popupURL + "' target='_blank'>") : ("<a href='#" + encodeURIComponent("" + item.id) + "'>")) +
						"<div class='icon-background' />" +
						"<div class='hilight' />" +
						"<img id='icon' src='" + item.icon + "'/>" +
						"<br/>" +
						"<p id='title'>" + item.title + "</p>" +
						"<div id='hint' class='hint'><span>[hint]</span></div>" +
                        "<span class='ui-state-active ui-corner-all refresh showrefresh' title='重新載入'><span class='ui-icon ui-icon-refresh'></span></span>" +
						"</a>" +
					"</div>").appendTo(pane);

                $(gadget_board).hover(
                	function () {
                	    if (displayManager.isGadgetLoaded(item.id)) {
                	        gadget_board.find("a .refresh").addClass("showrefresh");
                	    }
                	    else {
                	        gadget_board.find("a .refresh").removeClass("showrefresh");
                	    }
                	    $(this).addClass("gadget-board-hover");
                	},
                	function () {
                	    $(this).removeClass("gadget-board-hover");
                	}
                );
                //				$(gadget_board).hover(
                //					function() {
                //						$(this).css("background", "AliceBlue");
                //						$(this).find("img").css("zoom", "1.2");
                //					},
                //					function() {
                //						$(this).css("background", "transparent");
                //						$(this).find("img").css("zoom", "1");
                //					}
                //				);

                gadget_board.find("a .refresh")
                    .hover(
                        function () {
                            $(this).addClass("ui-state-hover").removeClass("ui-state-active");
                        },
                        function () {
                            $(this).addClass("ui-state-active").removeClass("ui-state-hover");
                        })
                    .click(function (e) {
                        if ($.browser.msie && $.browser.version.slice(0, 1) < 9) {//IE8↓
                            if (e.button == 1) {
                                if (displayManager.refreshGadget(item.id)) {
                                    $(this).hide("500", function () {
                                        $(this).removeClass("showrefresh").css("display", "");
                                    });
                                    gadget_board.find("#hint").hide();
                                }
                                return false;
                            }
                        }
                        else {
                            if (e.button == 0) {
                                if (displayManager.refreshGadget(item.id)) {
                                    $(this).hide("500", function () {
                                        $(this).removeClass("showrefresh").css("display", "");
                                    });
                                    gadget_board.find("#hint").hide();
                                }
                                return false;
                            }
                        }
                    });

                gadget_board.find("a").click(function (e) {
                    var url = $(this).attr('href');
                    if ($.browser.msie && $.browser.version.slice(0, 1) < 9) {//IE8↓
                        if (e.button == 1) {
                            if (item.popupURL) {
                                window.open(item.popupURL, item.popupURL);
                            }
                            else {
                                jQuery.history.load(item.id);
                            }
                            return false;
                        }
                    }
                    else {
                        if (e.button == 0) {
                            if (item.popupURL) {
                                window.open(item.popupURL, item.popupURL);
                            }
                            else {
                                jQuery.history.load(item.id);
                            }
                            return false;
                        }
                    }
                });

                function setExterior() {
                    var divHint = gadget_board.find("#hint");

                    if (item.hint) {
                        var value = item.hint;
                        //                        divHint.tool
                        if (value / 1 == value) {
                            if (value > 100) {
                                value = "100+";
                            }
                            else {
                            }
                            divHint.find("span").text(value);
                            divHint.removeClass("textHint");
                            gadget_board.attr("title", item.title);
                        }
                        else {
                            divHint.addClass("textHint");
                            divHint.find("span").text("");
                            gadget_board.attr("title", item.title + "\n" + value);
                        }

                        divHint.show();
                        gadget_board.find("#hint").attr("runEffect", "true");
                        
                        setEffect();
                    }
                    else {
                        divHint.hide();
                        gadget_board.attr("title", item.title);
                        gadget_board.find("#hint").attr("runEffect", "false");
                    }
                };
                
                function setEffect() {
                	gadget_board.find("#hint").effect("pulsate", {}, 500, function() {
                		if (gadget_board.find("#hint").attr("runEffect") != "false")
                			setEffect();
                	});
                }
                
                setExterior();
                item.onExteriorChanged(setExterior);
            });
        });

        //在MainForm建立新圖層
        menuLayer = layout.createNewLayer({ targetEle: targetElement, visible: visible });
        menuLayer.onSizeChanged(function (newSize) {
            targetElement.css({
                height: (newSize.height - 6) + "px",
                width: (newSize.width - 6) + "px"
            });
        });
    });
    return {
        show: function () {
            visible = true;
            if (menuLayer && menuLayer.set) {
                menuLayer.set({ visible: visible });
            }
        },
        hide: function () {
            visible = false;
            if (menuLayer && menuLayer.set) {
                menuLayer.set({ visible: visible });
            }
        }
    };
})();