/// <reference path="jquery-1.5.min.js"/>
/// <reference path="windowSize.js"/>

layout = (function () {
    var layers = [];
    var navEle = null; // $("<div>這是頭。</div>");
    var footerEle = null; // $("<div>這是腳。</div>");

    var fullHeight = windowSize.height;
    var fullWidth = windowSize.width;

    var screenTop = navEle ? navEle.height() : 0;
    var screenHeight = fullHeight - screenTop - (footerEle ? footerEle.height() : 0);
    var screenWidth = fullWidth - 10;

    //    navEle.css({
    //        border: '0px',
    //        display: 'inline',
    //        'z-index': 0,
    //        position: 'absolute',
    //        top: '0',
    //        left: '0'
    //    });
    //    footerEle.css({
    //        border: '0px',
    //        display: 'inline',
    //        'z-index': 0,
    //        position: 'absolute',
    //        top: '0',
    //        left: '0'
    //    });
    //    $(function () {
    //        navEle.appendTo('body');
    //        footerEle.appendTo('body');
    //    });
    function layout() {
        fullHeight = windowSize.height;
        fullWidth = windowSize.width;

        screenTop = navEle ? navEle.height() : 0;
        screenHeight = fullHeight - screenTop - (footerEle ? footerEle.height() : 0);
        screenWidth = fullWidth - 10;
        for (var i = 0; i < layers.length; i++) {
            layers[i].setSize();
        }
        if (navEle) {
            navEle.css({
                border: '0px',
                display: 'inline',
                'z-index': 0,
                position: 'absolute',
                top: '0px',
                left: '0px'
            });
        }
        if (footerEle) {
            footerEle.css({
                border: '0px',
                display: 'inline',
                'z-index': 0,
                position: 'absolute',
                top: '' + (screenHeight + screenTop) + "px",
                left: '0px'
            });
        }
    }
    windowSize.onChanged(layout);
    return {
        createNewLayer: function (config) {

            var setting = {};
            setting.targetEle = config.targetEle || $("<div></div>");
            setting.zindex = config.zindex || 0;
            setting.visible = (config.visible == null || config.visible == undefined) ? true : config.visible;
            setting.fullScreen = config.fullScreen || false;

            var container = $("<div></div>");
            var onSizeChangedCallBack = [];
            var onVisibleChangedCallBack = [];

            layers.push(container);

            $(setting.targetEle).appendTo(container);
            container.setSize = function () {
                container.css({
                    top: (setting.fullScreen ? '0px' : ('' + screenTop + 'px')),
                    height: (setting.fullScreen ? '' + fullHeight + 'px' : ('' + screenHeight + 'px')),
                    width: (setting.fullScreen ? '' + fullWidth + 'px' : ('' + screenWidth + 'px')),
                    'max-height': (setting.fullScreen ? '' + fullHeight + 'px' : ('' + screenHeight + 'px')),
                    'max-width': (setting.fullScreen ? '' + fullWidth + 'px' : ('' + screenWidth + 'px')),
                    left: (setting.fullScreen ? '0px' : '5px')
                });
                for (var i = 0; i < onSizeChangedCallBack.length; i++) {
                    onSizeChangedCallBack[i]({
                        height: (setting.fullScreen ? fullHeight : screenHeight),
                        width: (setting.fullScreen ? fullWidth : screenWidth)
                    });
                }
            };
            $(function () {
                container.css({
                    border: '0px',
                    display: (setting.visible ? 'inline' : 'none'),
                    'z-index': setting.zindex,
                    position: 'absolute',
                    top: (setting.fullScreen ? '0px' : ('' + screenTop + 'px')),
                    left: (setting.fullScreen ? '0px' : '5px'),
                    height: (setting.fullScreen ? '' + fullHeight + 'px' : ('' + screenHeight + 'px')),
                    width: (setting.fullScreen ? '' + fullWidth + 'px' : ('' + screenWidth + 'px')),
                    'max-height': (setting.fullScreen ? '' + fullHeight + 'px' : ('' + screenHeight + 'px')),
                    'max-width': (setting.fullScreen ? '' + fullWidth + 'px' : ('' + screenWidth + 'px'))
                });
                container.appendTo('body');
            });

            var result = {
                set: function (config) {
                    if ((!!config.targetEle) && config.targetEle != setting.targetEle) {
                        $(setting.targetEle).remove();
                        container.html("");
                        setting.targetEle = config.targetEle;
                        $(setting.targetEle).appendTo(container);
                    }
                    if ((!!config.zindex) && config.zindex != setting.zindex) {
                        setting.zindex = config.zindex
                        container.css("z-index", setting.zindex);
                    }
                    if (((config.visible != null && config.visible != undefined)) && config.visible != setting.visible) {
                        setting.visible = config.visible
                        container.css("display", (setting.visible ? 'inline' : 'none'));
                        for (var i = 0; i < onVisibleChangedCallBack.length; i++) {
                            onVisibleChangedCallBack[i]();
                        }
                    }
                    if (((config.fullScreen != null && config.fullScreen != undefined)) && config.fullScreen != setting.fullScreen) {
                        setting.fullScreen = config.fullScreen;
                        container.setSize();
                    }
                },
                getSize: function () {
                    return {
                        height: (setting.fullScreen ? fullHeight : screenHeight),
                        width: (setting.fullScreen ? fullWidth : screenWidth)
                    }
                },
                onSizeChanged: function (fn) {
                    onSizeChangedCallBack.push(fn);
                    fn({
                        height: (setting.fullScreen ? fullHeight : screenHeight),
                        width: (setting.fullScreen ? fullWidth : screenWidth)
                    });
                },
                getVisible: function () {
                    return setting.visible;
                },
                onVisibleChanged: function (fn) {
                    onVisibleChangedCallBack.push(fn);
                },
                remove: function () {
                    $(function () {
                        var newLayers = [];
                        for (var i = 0; i < layers.length; i++) {
                            if (layers[i] !== container) {
                                newLayers.push(layers[i]);
                            }
                        }
                        layers = newLayers;
                        container.remove();
                    });
                }
            };
            return result;
        },
        setNavigationBar: function (targetEle) {
            if (navEle)
                navEle.remove();
            navEle = targetEle || navEle;
            if (!navEle.appendTo)
                navEle = $(navEle);
            $(function () {
                navEle.appendTo('body');
                layout();
            });
        },
        setFooterBar: function (targetEle) {
            if (footerEle)
                footerEle.remove();
            footerEle = targetEle || footerEle;
            if (!footerEle.appendTo)
                footerEle = $(footerEle);
            $(function () {
                footerEle.appendTo('body');
                layout();
            });
        }
    };
} ());