/* ProductDialog.js */

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

    // private variables

    var productDialog,
        manualUrl,

        productId1,
        productId2,

        productName,
        productBrand,
        productType,

    // 0 = one product showing
    // 1 = comparison mode (1 product showing)
    // 2 = comparison mode (2 products showing)
        state = 0;

    // private functions

    function getBodyEl() {
        return Ext.get('product');
    }

    function onClickInfoProductDialog(e) {
        e.preventDefault();

        Pin.app.showInfoDialog(e.getTarget().id);
    };

    function showMapAndAddMarkers(domQuery, trackPrefix) {
        var mapsDialog = new VirtueleVakman.MapsDialog();

        mapsDialog.show(trackPrefix);
        mapsDialog.removeAllMarkers();

        var bodyEl = getBodyEl();

        bodyEl.select(domQuery).each(
            function(item) {
                mapsDialog.loadMarkers(item.dom.innerHTML);
            });
    };

    function onClickDealerLink(e) {
        e.preventDefault();
        showMapAndAddMarkers('span.dealergroup', getTrackPrefix());

        track('dealermap');
    };

    function onClickShowroomLink(e) {
        e.preventDefault();
        showMapAndAddMarkers('span.showroom', getTrackPrefix());

        track('showroommap');
    };

    function updateLinkForMap(linkId, domQuery, clickFunc) {
        var linkEl = Ext.get(linkId);
        var bodyEl = getBodyEl();

        if (bodyEl.select(domQuery).getCount() > 0) {
            linkEl.on("click", clickFunc);
            linkEl.show();
        }
    };

    function onUpdateProductDialog(el) {
        el.select('span.info').on('click', onClickInfoProductDialog);

        productName = el.child('td.header h6').dom.innerHTML;
        productBrand = el.child('table tr:nth-child(2) td:nth-child(2)').dom.innerHTML;
        productType = el.child('table tr:nth-child(3) td:nth-child(2)').dom.innerHTML;
    };

    function onUpdateComparisonProductDialog(el) {
        el.select('span.info').on('click', onClickInfoProductDialog);
    };

    function loadProductLeaflet() {
        var bodyEl = getBodyEl();
        var mgr = bodyEl.getUpdateManager();

        mgr.purgeListeners();
        mgr.on("update", onUpdateProductDialog);
        mgr.update("/ProductLeaflet.aspx", { id: productId1 });

        //productDialog.resizeTo(500, productDialog.height);
    };

    function loadProductComparison() {
        var bodyEl = getBodyEl();
        var mgr = bodyEl.getUpdateManager();

        mgr.purgeListeners();
        mgr.on("update", onUpdateComparisonProductDialog);
        mgr.update("/ProductComparison.aspx", { id1: productId1, id2: productId2 });

        //productDialog.resizeTo(700, productDialog.height);
    };

    function resizeDialogAndExtendTable() {
        //productDialog.resizeTo(700, productDialog.height);

        // Extend table

        var emptyCellTemplate = new Ext.Template('<td class="value">&nbsp;</td>');
        var headerTemplate = new Ext.Template('<td class="header value"><h6>Kies een product</h6><img src="/images/question100.gif"/></td>');

        var productEl = productDialog.getEl();

        productEl.select("div.properties tr").each(
            function(el, list, index) {
                if (index > 0) {
                    emptyCellTemplate.append(el);
                    return;
                }

                headerTemplate.append(el);
            });
    };

    function setHeaderText(text) {
        var headerEl = Ext.get("headertext");

        headerEl.dom.innerHTML = text;
    };

    function setState(newState) {
        if (newState == 1) {
            setHeaderText("Kies nog een nummer om producten te vergelijken.");
            
            loadProductLeaflet();
            state = 1;
        }

        if (newState == 2) {
            setHeaderText("Productinformatie");

            loadProductComparison();
            state = 2;
        }
    };

    function onCompare() {
        if (state == 1 || state == 2)
            setState(0);
        else
            setState(1);
    };

    function onHide() {
        state = 0;

        VirtueleVakman.app.onProductDialogHide();
    }

    // public space
    return {
        compare: function(compareToProductId) {
            productId2 = compareToProductId;

            setState(2);
        },

        show: function(productId, el) {
            if (state == 0) {
                productId1 = productId;
                setState(1);
            }
            else {
                productId2 = productId;
                setState(2);
            }
        }
    };
} ();