/**
 * :::::::::::::::::::::::::::::::::::::::::::
 * :: Copyright (c) 2006 H-Art & Technology ::
 * :::::::::::::::::::::::::::::::::::::::::::
**/


function domAttrs2Obj(element)
{
    var obj = new Object();
    
    var attrs = $A(element.attributes);
    attrs.each(function(attr) {
        obj[attr.name] = attr.value;
    });
    
    return obj;
}


var selector = {
    
    steps: ['step1', 'step2', 'step3'],
    stepLabels: ['Scegli il canale', 'Scegli la categoria', 'Scegli il prodotto'],
    stepLabelsNoCat: ['Scegli il canale', 'Scegli il prodotto'],
    
    current: {
        step: 0,
        channelUid: null,
        categoryUid: null
    },
    
    view: {
        
        steps: function(steps) {
            var html = '';
            steps.each((function(v, i) {html += this.step(v, i+1);}).bind(this));
            for (var i = 0; i < (selector.steps.length - steps.length); ++i)
                html += this.emptyStep(steps.length+i+1);
            return html;
        },
        
        step: function(title, n) {
            return '<li id="step' + n + '"><span>' +
                   '<strong>' + n + '</strong>' + '. ' + title +
                   '</span></li>';
        },
        
        emptyStep: function(n) {
            return '<li id="step' + n + '"></li>';
        },
        
        channel: function(channel) {
            return '<li id="channel_'+channel.uid+'"><a href="javascript:selector.gotoStep2('+channel.uid+')">'+channel.title+'</a></li>';
        },
        
        emptybox: function(text1, text2) {
            return '<br />' +
                   '<div id="initsearch_down">' +
                       '<div id="initsearch_up">' +
                           '<p>' +
                               '<span>'+text1+'</span><br />' +
                               text2 +
                           '</p>' +
                       '</div>' +
                   '</div>';
        },
        
        category: function(category) {
            var href = category.link || 'javascript:selector.gotoStep3('+category.uid+')';
            var title = '<a href="'+(category.link || href)+'">'+category.title+'</a>';
            return '<dt>' +
                       '<span>'+title+'</span>' +
                   '</dt>' +
                   '<dd>' +
                       '<div class="description">' +
                            category.description +
                       '</div>' +
                       '<div class="details">' +
                           '<a href="'+href+'" title="Dettagli"><img src="fileadmin/assets/img/buttons/vai.gif" alt="Vai" title="Vai" /></a>' +
                       '</div>' +
                   '</dd>';
        },
        
        categories: function(categories, channel, prevStep2) {
            var _self = this;
            
            var gotostep = prevStep2 ? 'gotoStep2('+channel.uid+')' : 'gotoStep1()';
            
            var content = '<br />' +
                           '<div id="cnt_header">' +
                               (channel.icon ? '<img src="'+channel.icon+'" alt="" title="" id="spvita"/>' : '') +
                               '<a href="javascript:selector.'+gotostep+'" title="Indietro"><img src="fileadmin/assets/img/buttons/indietro2.gif" alt="Indietro" title="Indietro" id="backbtt" /></a>' +
                           '</div>' +
                           '<dl>';
            categories.each(function(category) {
                content += _self.category(category);
            });
            
            return content + '</dl>';
        },
        
        product: function(product) {
            return this.category(product);
        },
        
        products: function(products, channel, prevStep2) {
            return this.categories(products, channel, prevStep2);
        }
    },

    init: function(dom) {
        var channels = [];
        
        var model = {
            channels: channels
        };
        
        $A(dom.getElementsByTagName('channel')).each(function(elem) {
            var categories = new Array();
            
            var products = new Array();
            
            var channel = domAttrs2Obj(elem);
            Object.extend(channel, {
                categories: categories,
                products: products
            });
            channels.push(channel);
            
            $A(elem.childNodes).findAll(function(v) {
                return v.nodeName.toLowerCase() == 'product';
            }).each(function(elem) {
                var product = domAttrs2Obj(elem);
                Object.extend(product, {
                    parent: channel
                });
                products.push(product);
            });;

            $A(elem.getElementsByTagName('category')).each(function(elem) {
                var products = new Array();
                
                var category = domAttrs2Obj(elem);
                Object.extend(category, {
                    products: products,
                    parent: channel
                });
                categories.push(category);
                
                $A(elem.getElementsByTagName('product')).each(function(elem) {
                    var product = domAttrs2Obj(elem);
                    Object.extend(product, {
                        parent: category
                    });
                    products.push(product);
                });
            });
        });
        
        this.model = model;
    },
    
    reset: function() {
        this.activateStep(this.steps.indexOf('step1'));
        this.updateChannels();
    },
    
    activateStep: function(step) {
        this.steps.each(function (e, i) {
            var span = $A($(e).childNodes).detect(function(v) {return v.nodeName.toLowerCase() == 'span'});
            if (step == i) Element.addClassName(span, "active");
            else Element.removeClassName(span, "active");
        });
        this.current.step = step;
    },
    
    activateChannel: function(channelUid) {
        if (this.current.channelUid) {
            var a = $A($('channel_'+this.current.channelUid).childNodes).detect(function(v) {return v.nodeName.toLowerCase() == 'a'});
            Element.removeClassName(a, "active");
            this.current.channelUid = null;
        }
        
        if (channelUid) {
            var a = $A($('channel_'+channelUid).childNodes).detect(function(v) {return v.nodeName.toLowerCase() == 'a'});
            Element.addClassName(a, "active");
            this.current.channelUid = channelUid;
        }
    },
    
    activateCategory: function(categoryUid) {
        if (this.current.categoryUid) {
            this.current.categoryUid = null;
        }
        
        if (categoryUid) {
            this.current.categoryUid = categoryUid;
        }
    },
    
    updateChannels: function() {
        var _self = this;
        var html = "";
        this.model.channels.each(function(channel) {
            //alert(_self.view);
            html += _self.view.channel(channel);
        });
        Element.update($('listacanali'), html);
    },
    
    updateEmptyBox: function(text1, text2) {
        Element.update($('cntcatprod'), this.view.emptybox(text1, text2));
    },
    
    updateBoxStep2: function (channelUid) {
        var channel = this.model.channels.find(function(channel) {
            return channel.uid == channelUid;
        });

        if (channel.categories.length) {
            Element.update('cntcatprod', this.view.categories(channel.categories, channel));
            //Element.show($A($('step3').childNodes).find(function(v) {return v.nodeName.toLowerCase() == 'span'}));
            Element.update('elencostep', this.view.steps(this.stepLabels));
        } else {
            Element.update('cntcatprod', this.view.products(channel.products, channel));
            //Element.hide($A($('step3').childNodes).find(function(v) {return v.nodeName.toLowerCase() == 'span'}));
            Element.update('elencostep', this.view.steps(this.stepLabelsNoCat));
        }
    },
    
    
    
    updateBoxStep3: function (categoryUid) {
        var _self = this;
        var channel = this.model.channels.find(function(channel) {
            return channel.uid == _self.current.channelUid;
        });
        var category = channel.categories.find(function(category) {
            return category.uid == categoryUid;
        });
        Element.update($('cntcatprod'), this.view.products(category.products, channel, 1));
    },
    
    gotoStep1: function() {
        this.activateStep(this.steps.indexOf('step1'));
        this.updateEmptyBox("Trova il prodotto previdenziale pił adatto alle tue esigenze.", "Seleziona una voce dall'elenco qui a fianco");
        this.activateChannel(null);
        this.activateCategory(null);
    },

    gotoStep2: function(channelUid) {
        this.activateChannel(channelUid);
        this.activateCategory(null);
        this.updateBoxStep2(channelUid);
        this.activateStep(this.steps.indexOf('step2'));
    },
    
    gotoStep3: function(categoryUid) {
        this.activateStep(this.steps.indexOf('step3'));
        this.activateCategory(categoryUid);
        this.updateBoxStep3(categoryUid);
    }

};


window.onload = function() {
    var req = new Ajax.Request();
    req.initialize(Constants.XML_URL, {
        onComplete: function(transport, object) {
            //process(transport.responseXML);
            selector.init(transport.responseXML);
            selector.reset();
        }
    });
};