/// <reference path="jQuery.js" />

// 创建一个闭包  
(function ($) {
    // 插件的定义  
    $.fn.Window = function () {

        var WIN = $(window);         //浏览器窗口
        var DOC = $(document);     //文档
        var BD = $(document.body);    //内容体

        var bgLayout = $("#BgLayout");          //背景透明覆盖层
        var frame = $("#FrameCover");           //遮盖select,html对象
        var popWindow = $("#PopWindow");        //主显示窗体

        init(); //初始化窗口

        function init() {
            if (bgLayout.get(0) && popWindow.get(0) && frame.get(0)) {
                var _width = popWindow.outerWidth();
                var _height = popWindow.outerHeight();
                var _left = (WIN.width() - _width) / 2 + WIN.scrollLeft();
                var _top = (WIN.height() - _height) / 2 + WIN.scrollTop();
                //动画效果
                bgLayout.show();
                frame.show();
                popWindow.animate({ top: _top }, 500);
            } else {
                create();
            }
            if ($.browser.msie && $.browser.version == 6.0) {
                $("select").hide();
            }
        }

        function create() {
            //创建背景透明覆盖层
            //<div id="BgLayout"><iframe id="FrameCover" scrolling="no" frameborder="0"/></div>
            bgLayout = $("<div id='BgLayout'/>").appendTo(BD);
            //设置背景层样式
            bgLayout.css({ left: "0px", top: "0px", width: "100%", height: "100%", "z-index": "100", position: "absolute" });
            bgLayout.css({ filter: "alpha(Opacity=80)", "-moz-opacity": "0.8", "opacity": "0.8", "background-color": "#CCC" });

            //遮盖select,html对象层
            frame = $("<iframe id='FrameCover' scrolling='no' frameborder='0'/>").appendTo(BD);
            frame.css({ position: "absolute", top: "0px", left: "0px", width: "100%", height: "100%", filter: "alpha(opacity=0)", "-moz-opacity": "0", opacity: "0" });
            //<div id="PopWindow"></div>
            popWindow = $("<div id='PopWindow'/>").appendTo(BD);
            var _width = popWindow.outerWidth();
            var _height = popWindow.outerHeight();
            var _left = (WIN.width() - _width) / 2;
            var _top = (WIN.height() - _height) / 2;
            //alert(_left + "+" + _top + "ow" + _width + "oh" + _height);
            popWindow.css({ left: _left, top: -_height });
            //动画效果
            popWindow.animate({ top: _top }, 500);
            //<div id="PopWindow"><div class="TopBar"><div class="WindowTitle">推荐模特儿专辑<span>MODELS</span></div><div title="关闭窗口" class="WindowCloseBtn">关闭窗口</div></div></div>
            //标题栏<div class="TopBar"><div class="WindowTitle">推荐模特儿专辑<span>MODELS</span></div><div title="关闭窗口" class="WindowCloseBtn">关闭窗口</div></div>
            var topBar = $("<div/>").addClass("TopBar").appendTo(popWindow);
            var winTitle = $("<div/>").addClass("WindowTitle").text("推荐模特儿专辑").append($("<span/>").text("MODELS")).appendTo(topBar);
            //关闭窗口
            var btnClose = $("<div title='关闭窗口'/>").addClass("WindowCloseBtn").text("关闭窗口").appendTo(topBar);
            btnClose.click(function () { close(_height); });

            //专辑内容栏<ul class="AlbumList"></ul>
            var albumList = $("<ul/>").addClass("AlbumList").appendTo(popWindow);
            //加载图片
            load(albumList);

            //底部工具栏
            //<div class="BottomBar"><div class="Tag">热门标签<a href="#" title="#">时装模特儿</a><a href="#" title="#">车模</a></div><div class="More"><a href="Album/Models" title="更多专辑...">更多专辑...</a></div></div>
            var bottomBar = $("<div/>").addClass("BottomBar").appendTo(popWindow);
            var hotTag = $("<div/>").addClass("Tag").text("热门标签:").appendTo(bottomBar);
            var item1 = $("<a href='#' title='#'/>").text("时装模特儿").appendTo(hotTag);
            var item2 = $("<a href='#' title='#'/>").text("车模").appendTo(hotTag);
            var more = $("<div/>").addClass("More").appendTo(bottomBar);
            var item3 = $("<a/>").attr({ href: "Album/Models", title: "更多专辑..." }).text("更多专辑……").appendTo(more);

            //窗口大小改变或拉动滚动条时,显示DIV绝对居中
            WIN.bind("resize scroll", function () {
                setCenter();
            });
        }

        //滚动或窗口改变时,居中位置
        function setCenter() {
            bgLayout.css({ width: DOC.width(), height: DOC.height() }).show();
            frame.css({ width: DOC.width(), height: DOC.height() }).show();
            var _width = popWindow.outerWidth();
            var _height = popWindow.outerHeight();
            var _left = (WIN.width() - _width) / 2;
            var _top = (WIN.height() - _height) / 2;
            if (popWindow.offset().top != -634) {
                popWindow.css({ left: _left + WIN.scrollLeft(), top: _top + WIN.scrollTop() }).show();
            } else {
                popWindow.css({ left: _left + WIN.scrollLeft() }).show();
            }
        }

        //关闭
        function close(height) {
            popWindow.animate({ top: -height }, { duration: 500, queue: false, complete: function () {
                bgLayout.hide();
                frame.hide();
                if ($.browser.msie && $.browser.version == 6.0) {
                    $("select").show();
                }
            }
            });
        }

        //加载图片
        //<li><a href=""><img src="Temp/popwindow/1.jpg"/></a></li>
        function load(obj) {
            for (i = 0; i < 8; i++) {
                var li = $("<li/>").appendTo(obj);
                var link = $("<a/>").attr({ href: "Temp/popwindow/" + (i + 1) + ".jpg", title: "##" }).appendTo(li);
                var img = $("<img/>").attr({ src: "Temp/popwindow/" + (i + 1) + ".jpg", alt: "##" }).appendTo(link);
            }
        }
        return this;
    };
})(jQuery);