// reference local blank image
Ext.BLANK_IMAGE_URL = '/extjs/resources/images/default/s.gif';

// create namespace
Ext.namespace('Pin');

Pin.app = function() {
    // do NOT access DOM from here; elements don't exist yet

    // private variables

    var layout;

    var north;
    var west;
    var centerPanel;

    var appLoaded = false;
    var pinPanelIsLoaded = false;

    var infoDialog;

    // private functions

    // public space
    return {
        // public properties, e.g. strings to translate

        onUpdateInfoDialog: function(el) {
            var flashMoviesPropertiesEl = Ext.get("propertyInfoFlashMovie");

            if (!Ext.isEmpty(flashMoviesPropertiesEl)) {
                var flashVideoLinkTemplate = new Ext.Template(
                        '<a href="#" class="videoLink">{name}</a>');

                var flashMoviesProperties = Ext.util.JSON.decode(flashMoviesPropertiesEl.dom.innerHTML);

                Ext.each(flashMoviesProperties, function(item) {
                    var anchorEl = flashVideoLinkTemplate.append(el, item, true);

                    anchorEl.on("click",
                                function(e) {
                                    e.preventDefault();
                                    this.showFlashVideoDialog(item);
                                }, this);
                }, this);
            }
        },
        
        showFlashVideoDialog: function(flashMovieProperties) {
            var template = new Ext.Template(
                '<div id="flashvideo-dlg" style="visibility:hidden;position:absolute;top:0px;">',
                    '<div class="x-dlg-hd">Video</div>',
                    '<div class="x-dlg-bd">',
                        '<div></div>',
                    '</div>',
                '</div>');

            template.append(Ext.get("body"));

            var flashVideoDialog = new Ext.BasicDialog("flashvideo-dlg", {
                height: 450,
                width: 450,
                minHeight: 450,
                minWidth: 450,
                modal: true,
                shadow: true,
                collapsible: false,
                closable: true
            });

            flashVideoDialog.addKeyListener(27, function() { this.hide(); this.destroy(true) }, flashVideoDialog); // ESC can also close the dialog
            flashVideoDialog.addButton('Sluiten', function() { this.hide(); this.destroy(true) }, flashVideoDialog);    // Could call a save function instead of hiding

            var bodyEl = flashVideoDialog.getEl().child("div.x-dlg-bd:first-child");

            var flashPlayerTemplate = new Ext.Template(
                '<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="420" height="370" id="flashMovie">',
                    '<param name="allowScriptAccess" value="sameDomain" />',
                    '<param name="movie" value="/flash/{player}"/>',
                    '<param name="quality" value="high" />',
                    '<param name="bgcolor" value="#ffffff" />',
                    '<embed name="flashMovie" src="/flash/{player}" quality="high" bgcolor="#ffffff" width="420" height="370" align="middle" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />',
                '</object>');

            flashPlayerTemplate.overwrite(bodyEl, flashMovieProperties);

            var delayedTask = new Ext.util.DelayedTask(
                function() {
                    var fm = Ext.get("flashMovie");
                    fm.dom.setMedia(flashMovieProperties.src + "|384|288");
                });

            delayedTask.delay(1000);

            flashVideoDialog.on("hide",
                function() {
                    var fm = Ext.get("flashMovie");
                    fm.dom.Stop();
                });

            flashVideoDialog.show();
        },

        showInfoDialog: function(propertyId, el) {
            if (!infoDialog) {
                infoDialog = new Ext.BasicDialog("info-dlg", {
                    height: 400,
                    width: 400,
                    minHeight: 400,
                    minWidth: 400,
                    modal: false,
                    shadow: true,
                    collapsible: false,
                    closable: true
                });

                infoDialog.addKeyListener(27, infoDialog.hide, infoDialog); // ESC can also close the dialog
                infoDialog.addButton('Sluiten', infoDialog.hide, infoDialog);    // Could call a save function instead of hiding
            }

            var bodyEl = infoDialog.getEl().child("div.x-dlg-bd:first-child");
            var mgr = bodyEl.getUpdateManager();

            mgr.on("update", this.onUpdateInfoDialog, this);

            mgr.update("/PropertyInfo.aspx", { id: propertyId });

            infoDialog.anchorTo("north", "tr-tr", [-5, 5]);
            infoDialog.show(el);
        },

        pinPanelLoaded: function() {
            if (!appLoaded) {
                pinPanelIsLoaded = true;
                return;
            }

            window.setTimeout(function() {
                PageMethods.GetPins(Pin.app.updatePins, null, this);
            }, 200);
        },

        updatePins: function(pins) {
            var ctrl = Ext.get('west');

            ctrl.dom.Content.Page.InitializePins(pins);
        },

        pinClicked: function(pin) {
            Pin.ProductDialog.show(pin);
        },

        init: function() {
            layout = new Ext.BorderLayout(document.body, {
                north: {
                    split: false,
                    initialSize: 120,
                    minSize: 0,
                    titlebar: false
                },
                west: {
                    split: false,
                    initialSize: 400,
                    titlebar: false,
                    animate: true
                },
                center: {
                    titlebar: false,
                    autoScroll: true,
                    collapsible: false,
                    closeOnTab: false
                }
            });

            layout.beginUpdate();

            north = new Ext.ContentPanel('north', 'North');
            layout.add('north', north);

            west = new Ext.ContentPanel('west_parent');
            layout.add('west', west);

            centerPanel = new Ext.ContentPanel('center');
            layout.add('center', centerPanel);

            layout.endUpdate();

            appLoaded = true;

            //            if (pinPanelIsLoaded) {
            Pin.app.pinPanelLoaded();
            //            }
        }
    };
} ();                       // end of app