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

FeaturesView = function() {
    this.features = null;
    this.images = [];
    this.elFeatLinks = null;
    this.elWizard = null;
    this.elFeatDetails = null;
    this.elFeatList = null;
    this.featureIndex = 0;
    this.listVisible = true;
}

FeaturesView.prototype = {
    init: function() {
        Ext.Ajax.request({
            url: 'Packages.aspx',
            params: { GetFeatures: true },
            callback: this.processFeatures,
            scope: this
        });
        this.elFeatLinks = Ext.get('featlinks');
        this.elWizard = Ext.get('featwizard');
        this.elFeatDetails = Ext.get(Ext.DomQuery.select('#featdetails table'));
        this.elFeatList = Ext.get('featlist');

        var w = Ext.get('featwrap')
        w.slideIn.defer(700, w, ['t', { duration: 1, useDisplay: true}]);

        Ext.fly('feat-prev-link').on('click', this.prevFeature, this);
        Ext.fly('feat-next-link').on('click', this.nextFeature, this);
        Ext.fly('showpkgs').on('click', this.showPackageList, this);
    },

    processFeatures: function(options, success, response) {
        this.features = Ext.decode(response.responseText);
        //this.preloadImages();
        var pkgLinks = Ext.DomQuery.select('table.packages a');
        this.updateFeatureLinks(pkgLinks);
        pkgLinks = Ext.DomQuery.select('div.feat-name a');
        this.updateFeatureLinks(pkgLinks);
    },

    setCurrentFeature: function(featureId) {
        this.featureIndex = 0;
        for (var i = 0; i < this.features.length; i++) {
            if (this.features[i].FeatureID == featureId) {
                this.featureIndex = i;
            }
        }
        this.setDetails();
    },

    setDetails: function() {
        if (this.listVisible) {
            this.hidePackageList();
            return;
        }

        var feature = this.features[this.featureIndex];

        this.updateDetails(feature);
        this.updateImage(feature);
        this.updateIcons(feature);
    },

    updateDetails: function(feature) {
        var updateText = function() {
            Ext.fly('name').dom.innerHTML = feature.Name;
            Ext.fly('description').dom.innerHTML = feature.Description;
            Ext.fly('benefit').dom.innerHTML = feature.Benefit;
            this.updateLinks();
            this.elFeatDetails.fadeIn({ endOpacity: 1, duration: 1, callback: fixie, scope: this, useDisplay: true })
        };
        var fixie = function() {
            if (Ext.isIE7) {
                this.elFeatDetails.el.dom.style.removeAttribute('filter');
            }
        };
        this.elFeatDetails.fadeOut({ endOpacity: 0.1, duration: 0.2, callback: updateText, scope: this, useDisplay: true });
    },

    updateImage: function(feature) {
        var img = Ext.get('featimage');

        var showImg = function() {
            img.slideIn('b', { duration: 0.5, easing: 'easeIn' });
        };

        var changeImg = function() {
            img.on('load', showImg, this, { single: true });
            img.dom.src = '/images/features/' + feature.ImageName;
        };

        img.slideOut('b', { duration: 0.8, callback: changeImg });
    },

    updateIcons: function(feature) {
        var s = Ext.get('iconsilv');
        var g = Ext.get('icongold');
        var p = Ext.get('iconplat');
        p.setDisplayed(feature.Platinum);
        g.setDisplayed(feature.Gold);
        s.setDisplayed(feature.Silver);
        var doPlat = function() { p.frame('6a849c', 1, { duration: 0.5 }); }
        var doGold = function() { g.frame('ffd485', 1, { duration: 0.5, callback: doPlat }); }
        var doSilv = function() { s.frame('7f8385', 1, { duration: 0.5, callback: doGold }); }

        if (feature.Silver) doSilv.defer(1000);
        else if (feature.Gold) doGold.defer(1000);
        else if (feature.Platinum) doPlat.defer(1000);
    },

    updateLinks: function() {
        var i = this.featureIndex;
        if (i > 0) {
            Ext.fly('feat-prev-link').setDisplayed(true);
            Ext.fly('feat-prev-name').dom.innerHTML = this.features[i - 1].Name;
        } else {
            Ext.fly('feat-prev-link').setDisplayed(false);
        }
        if (i < this.features.length - 1) {
            Ext.fly('feat-next-link').setDisplayed(true);
            Ext.fly('feat-next-name').dom.innerHTML = this.features[i + 1].Name;
        } else {
            Ext.fly('feat-next-link').setDisplayed(false);
        }
    },

    nextFeature: function() {
        this.featureIndex++;
        if (this.featureIndex >= this.features.length) this.featureIndex = 0;
        this.setDetails();
    },

    prevFeature: function() {
        this.featureIndex--;
        if (this.featureIndex < 0) this.featureIndex = this.features.length - 1;
        this.setDetails();
    },

    hidePackageList: function() {
        this.elFeatList.setDisplayed(false);
        this.elWizard.slideOut('l', { useDisplay: true });
        this.elFeatLinks.slideIn('r', { useDisplay: true });
        this.listVisible = false;
        this.setDetails();
    },

    showPackageList: function() {
        this.elFeatList.setDisplayed(true);
        Ext.fly('featimage').setDisplayed(false);
        this.elFeatDetails.slideOut('t', { useDisplay: true });
        this.elWizard.slideIn('l', { useDisplay: true });
        this.elFeatLinks.slideOut('r', { useDisplay: true });
        this.listVisible = true;
    },

    updateFeatureLinks: function(links) {
        for (var i = 0; i < links.length; i++) {
            var a = links[i];
            var url = a.href;
            var id = parseInt(url.substring(url.indexOf('f=') + 2));
            a.href = 'javascript:void(null);';
            Ext.fly(a).on('click', this.setCurrentFeature.createDelegate(this, [id]));
        }
    },

    preloadImages: function() {
        for (var i = 0; i < this.features.length; i++) {
            var url = '/images/features/' + this.features[i].ImageName;
            var img = new Image();
            img.src = url;
        }
    }
}

Ext.onReady(function() {
    var fw = new FeaturesView();
    fw.init();
});