Mini Kabibi Habibi

window.Widgets = {};

function DockManager_Init(s, e) {
    tileLayout.onDockManagerInit(s, e);
}
function DockManager_StartPanelDragging(s, e) {
    tileLayout.onStartPanelDragging(s, e);
    AnimationHelper.stopAnimation();
}
function DockManager_EndPanelDragging(s, e) {
    tileLayout.onEndPanelDragging(s, e);
    AnimationHelper.startAnimation();
}

function Zone_BeforeDock(s, e) {
    AnimationHelper.processPanelDock(s, e.panel, true);
}
function Zone_AfterDock(s, e) {
    AnimationHelper.processPanelDock(s, e.panel, false);
}

function GlobalEvents_ControlsInitialized(s, e) {
    AnimationHelper.startAnimation();
    application.onInit();
}

window.AnimationHelper = (function () {
    var delay = 7000;
    var animationFunctions = [];
    var TimerID = -1;
    var ZoneMarkers = ["bigzone", "horizontalzone", "smallzone"];

    function updatePanelMarker(panel, newMarker) {
        var panelElement = panel.GetMainElement();
        var className = panelElement.className;
        if (panel.marker) {
            var index = className.indexOf(panel.marker);
            className = className.replace((index == 0 ? "" : " ") + panel.marker, "");
        }
        className += " " + newMarker;

        panelElement.className = className;
        panel.marker = newMarker;
    }
    function getMarkerIndex(marker) {
        for(var i = 0; i < ZoneMarkers.length; i++)
            if(ZoneMarkers[i] == marker)
                return i;
        return -1;
    }

    return {
        registerAnimationFunc: function (func) {
            animationFunctions.push(func);
        },
        startAnimation: function() {
            if(TimerID > -1)
                return;
            var interval = parseInt(delay / animationFunctions.length);

            var count = animationFunctions.length;
            var func = function(index) {
                if(animationFunctions[index])
                    animationFunctions[index]();
                index++;
                if(index == count)
                    index = 0;
                TimerID = window.setTimeout(function() { func(index); }, interval);
            }
            func(0);
        },
        stopAnimation: function() {
            if(TimerID > -1)
                window.clearTimeout(TimerID);
            TimerID = -1;
        },
        resetAnimation: function() {
            this.stopAnimation();
            this.startAnimation();
        },
        processPanelDock: function(zone, panel, isBefore) {
            var lastIndex = getMarkerIndex(panel.marker);
            var newIndex = getMarkerIndex(zone.marker);

            if(lastIndex < 0 || lastIndex == newIndex)
                return;
            if(newIndex < lastIndex && isBefore)
                updatePanelMarker(panel, zone.marker);
            if(newIndex > lastIndex && !isBefore)
                updatePanelMarker(panel, zone.marker);
        },
        initializeZones: function(zones) {
            for(var i = 0; i < zones.length; i++)
                this.initializeZone(zones[i]);
        },
        initializeZone: function(zone) {
            var zoneMarker = "";
            var zoneElement = zone.GetMainElement();
            for(var i = 0; i < ZoneMarkers.length; i++) {
                if(zoneElement.className.indexOf(ZoneMarkers[i]) > -1) {
                    zoneMarker = ZoneMarkers[i];
                    break;
                }
            }
            zone.marker = zoneMarker;
            var panels = zone.GetPanels();
            for(var i = 0; i < panels.length; i++) 
                updatePanelMarker(panels[i], zone.marker);
        }
    }
})();

window.Widgets.AnimatedTabWidget = 
(function() {
    return {
        Init: function(s) {
            Widgets.AnimatedTabWidget.ChangePageVisibility(
                s.cpPageIDHash,
                s.cpPageIDHash[s.GetActiveTab().name]
            );

            var tabCount = s.GetTabCount();
            var animationFunc = function() {
                var index = s.GetActiveTabIndex();
                index++;
                if(index == tabCount)
                    index = 0;
                
                s.SetActiveTabIndex(index);
            };
            AnimationHelper.registerAnimationFunc(animationFunc);
        },
        ActiveTabChanging: function(s, e) {
            Widgets.AnimatedTabWidget.ChangePageVisibility(
                s.cpPageIDHash, 
                s.cpPageIDHash[e.tab.name]
            );
        },
        TabClick: function(s, e) {
            AnimationHelper.resetAnimation();
        },
        ChangePageVisibility: function(pageIDHash, visiblePageID) {
            for(var key in pageIDHash) {
                var id = pageIDHash[key];
                var page = document.getElementById(id);
                
                if(page) {
                    var className = page.className;
                    className = className.replace("visible", "");
                    className = className.replace("hidden", "");
                    var hide = id != visiblePageID;

                    className += " " + (hide ? "hidden" : "visible" );
                    page.className = className;
                }
            }
        }
    };
})();

window.Widgets.Market =
(function() {
    return {
        selectedRow: -1,
        animationLocked: false,

        panel_Init: function(s, e) {
            s.marketPanel = true;

            var animationFunc = function() {
                if(Widgets.Market.animationLocked)
                    return;
                Widgets.Market.updateSelection();
            }
            AnimationHelper.registerAnimationFunc(animationFunc);

            if(Widgets.Market.isHorizontalZone(s.GetOwnerZone()))
                Widgets.Market.LockAnimation();
        },
        panel_AfterDock: function(s, e) {
            if(!s.marketPanel)
                return;
            if(!Widgets.Market.isHorizontalZone(s.GetOwnerZone())) {
                Widgets.Market.updateSelection();
                Widgets.Market.UnlockAnimation();
            }
            else {
                Widgets.Market.LockAnimation();
                stockGrid.UnselectRowOnPage(Widgets.Market.selectedRow)
            }
        },
        updateSelection: function() {
            var indexRow = this.selectedRow + 1;
            if (!stockGrid.GetRowKey(indexRow))
                indexRow = 0;
            stockGrid.SelectRowOnPage(indexRow);
            this.selectedRow = indexRow;
        },
        grid_SelectionChanged: function(s, e) {
            var selectedElements = s.GetSelectedKeysOnPage();
            if (selectedElements.length == 0)
                return;
            var symbol = selectedElements[0];

            var container = document.getElementById("marketChartsContainer");
            for (var i = 0; i < container.childNodes.length; i++) {
                var element = container.childNodes[i];
                if (element.tagName != "IMG")
                    continue;
                element.className = (element.id == "Chart_" + symbol) ? "visible" : "hidden";
            }
        },
        LockAnimation: function() {
            this.animationLocked = true;
        },
        UnlockAnimation: function() {
            this.animationLocked = false;
        },
        isHorizontalZone: function(zone) {
            return zone && zone.GetMainElement().className.indexOf("horizontalzone") > -1;
        }
    };
})();

//Tile layout
(function () {
    var headElement = document.getElementsByTagName("head")[0];
    var styleElement = document.createElement("style");
    styleElement.setAttribute("type", "text/css");
    headElement.appendChild(styleElement);
    var stylesheet = styleElement.sheet;

    document.ontouchmove = function (event) { event.preventDefault(); }

    var zones = [],
        zoneDimensionsCache = [],
        mouseMoveHandler = null;
    
    //Utils
    var getZoneUnderCursor = function(evt) {
        var evtX = ASPxClientUtils.GetEventX(evt),
            evtY = ASPxClientUtils.GetEventY(evt);

        if(ASPxClientTouchUI) {
        }
        
        for(var i = 0; i < zoneDimensionsCache.length; i++) {
            var zd = zoneDimensionsCache[i];

            if(evtX > zd.x && evtX < zd.x + zd.w && evtY > zd.y && evtY < zd.y + zd.h)
                return dockManager.GetZoneByUID(zd.zoneUID);
        }

        return null;           
    };

    var getVacantZone = function(excludeZone) {
        for(var i = 0; i < zones.length; i++) {
            var isExcludedZone = excludeZone && (zones[i].zoneUID === excludeZone.zoneUID); 
            if(!isExcludedZone && zones[i].GetPanelCount() === 0)
                return zones[i];
        }
    };

    var timerId = -1;
    var onWindowResize = function() {
        if(timerId > -1)
            window.clearTimeout(timerId);
        timerId = window.setTimeout(function(){ onWindowResizeCore(); }, 100);
    }
    var onWindowResizeCore = function(){
        updateTileProportions();
        updateZoneDimensionsCache();
        ASPxClientControl.AdjustControls();
    }

    function updateZoneDimensionsCache() {
        zoneDimensionsCache = [];

        for(var i = 0; i < zones.length; i++){
            var zoneElem = zones[i].GetMainElement();

            zoneDimensionsCache.push({
                zoneUID : zones[i].zoneUID,
                x: ASPxClientUtils.GetAbsoluteX(zoneElem),
                y: ASPxClientUtils.GetAbsoluteY(zoneElem),
                w: zones[i].GetWidth(),
                h: zones[i].GetHeight()
            });
        }
    };

    function updateTileProportions () {
        var form = document.getElementById("form1");
        form.style.height = 0 + "px";
        var dcWidth = _aspxGetDocumentWidth();
        var dcHeight = _aspxGetDocumentHeight();

        var portrait = setOrientationClassName(form, dcWidth, dcHeight);
        if(tileLayout.dragging == "stopped")
            updateTileStyles(dcWidth, dcHeight, portrait);
    }
    function setOrientationClassName(form, dcWidth, dcHeight) {
        var form = document.getElementById("form1");
        form.style.height = 0 + "px";
        var portrait = dcHeight > dcWidth;
        if(portrait)
            form.className = "portrait";
        else 
            form.className = "landscape";
        form.style.height = dcHeight + "px";

        return portrait;
    }
    function updateTileStyles(dcWidth, dcHeight, portrait) {
        clearScaleCSS();
        if (portrait) {
            smallzoneWidth = Math.floor(dcWidth / 3);
            smallzoneHeight =  Math.floor(dcHeight / 4);
            horizontalzoneWidth =  Math.floor(2 * dcWidth / 3);
            horizontalzoneHeight = Math.floor(dcHeight / 4);
            bigzoneWidth = Math.floor(2 * dcWidth / 3);
            bigzoneHeight = Math.floor(dcHeight / 2);
        } else  {
            smallzoneWidth = Math.floor(dcWidth / 4);
            smallzoneHeight =  Math.floor(dcHeight / 3);
            horizontalzoneWidth =  Math.floor(dcWidth / 2);
            horizontalzoneHeight = Math.floor(dcHeight / 3) + 1;
            bigzoneWidth = Math.floor(dcWidth / 2);
            bigzoneHeight = Math.floor(2 * dcHeight / 3);
        }

        fillScaleCSS([
            StringFormat(".smallzone { width: {0}px!important; height: {1}px!important; }\n", smallzoneWidth, smallzoneHeight),
            StringFormat(".horizontalzone { width: {0}px!important; height: {1}px!important; }\n", horizontalzoneWidth, horizontalzoneHeight),
            StringFormat(".bigzone { width: {0}px!important; height: {1}px!important; }\n", bigzoneWidth, bigzoneHeight),
        ]);
    }
    function StringFormat() {
        var s = arguments[0];
        for (var i = 0; i < arguments.length - 1; i++) {
            var reg = new RegExp("\\{" + i + "\\}", "gm");
            s = s.replace(reg, arguments[i + 1]);
        }
        return s;
    }
    function clearScaleCSS(){
        if (stylesheet.cssRules.length) {
            for(var i = stylesheet.cssRules.length; i > 0; i--)
                stylesheet.deleteRule(0);
        }
    }
    function fillScaleCSS(css){
        for(var i = css.length - 1; i >= 0; i--){
            stylesheet.insertRule(css[i], 0);
        }
    }

    
    var dockPanelToVacantZone = function(panel, overredZone) {
        var vacantZone = getVacantZone(overredZone);
        AnimationHelper.processPanelDock(vacantZone, panel, true);
        panel.Dock(vacantZone);
        AnimationHelper.processPanelDock(vacantZone, panel, false);
        Widgets.Market.panel_AfterDock(panel);
    };

    //Events
    window.tileLayout ={
        dragging: "stopped",
        onDockManagerInit: function() {
            zones = dockManager.GetZones();
            AnimationHelper.initializeZones(zones);
            onWindowResize();

            ASPxClientUtils.AttachEventToElement(window, 'resize', function() {
                onWindowResize();    
            });
            ASPxClientUtils.AttachEventToElement(window, "orientationchange", function () {
                window.setTimeout(function(){
                    ASPxClientControl.AdjustControls();
                }, 100);
            });
        },

        onStartPanelDragging: function(s, e) {
            tileLayout.dragging = "started";
            var panel = e.panel,
                prevZone = panel.GetOwnerZone();

            mouseMoveHandler = function(evt) {
                var zone = getZoneUnderCursor(evt);
                
                if(!zone)
                    return;

                var zonePanel = zone.GetPanelCount() > 0 && zone.GetPanels()[0];

                if(!zonePanel || zonePanel.panelUID === panel.panelUID)
                    return;

                dockPanelToVacantZone(zonePanel, zone);
                zone.ShowPanelPlaceholder(panel);
            };
            
            ASPxClientUtils.AttachEventToElement(document, ASPxClientTouchUI.touchMouseMoveEventName, mouseMoveHandler);
        },

        onEndPanelDragging: function(s, e) {
            if(!e.panel.GetOwnerZone())
                dockPanelToVacantZone(e.panel);

            ASPxClientUtils.DetachEventFromElement(document, ASPxClientTouchUI.touchMouseMoveEventName, mouseMoveHandler);
            tileLayout.dragging = "stopped";
        }
    }; 
})();

window.application = (function () {
    function setStatus(msg) {
        var output = document.getElementById("status");
        if (output)
            output.innerText = msg;
    };
    return {
        onInit: function () {
            if (window.applicationCache) {
                ASPxClientUtils.AttachEventToElement(window.applicationCache, 'checking', function (e) {
                    setStatus("checking for update...");
                });
                ASPxClientUtils.AttachEventToElement(window.applicationCache, 'downloading', function (e) {
                    setStatus("downloading...");
                });
                ASPxClientUtils.AttachEventToElement(window.applicationCache, 'noupdate', function (e) {
                    setStatus("update");
                });
                ASPxClientUtils.AttachEventToElement(window.applicationCache, 'error', function (e) {
                    setStatus("offline");
                });
                ASPxClientUtils.AttachEventToElement(window.applicationCache, 'updateready', function (e) {
                    if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
                        window.applicationCache.swapCache();
                        if (confirm('A new version of the content is available. Load it?')) {
                            window.location.reload();
                        }
                        setStatus("update");
                    } else {
                        setStatus("update");
                    }
                });
            }
        },
        TryUpdateCache: function () {
            try {
                if (window.applicationCache)
                    window.applicationCache.update();
            } catch (e) {
            }
        }
    }
})();