///<reference path="http://www.prototypejs.org/assets/2008/9/29/prototype-1.6.0.3.js" />

var _ajaxImage = '/App_/ROOT/Module/Earthkeeper/Engine/VoicesDetail/_Resource/ajax-loader.gif';
var _serviceHost = '/App_/ROOT/Service/VoicesAnswer.ashx';

var _expandText = 'read more';
var _collapseText = 'show less';

var Answer = Class.create();

Object.extend(Answer.prototype, {
    initialize: function(key) {
        //+ protected
        this._offStateText = _expandText;
        this._onStateText = _collapseText;
        this.contentDivId = 'answer_' + key;
        //+ public
        this.Key = key;
        this.ContentHolder = $(this.contentDivId);
        this.Content = this.ContentHolder.innerHTML;
        this.AnswerFrame = undefined;
        this.FullContent = undefined;
        this.toggleAnchor = undefined;
        this.loadingAnimation = undefined;
        this.setupViewElements();
        this.extendContentHolder();
    },
    setupViewElements: function() {
        this.toggleAnchor = new Element('a', { 'href': 'javascript:void(0);', 'style': 'margin-top:15px' }).update(this._offStateText);
        this.AnswerFrame = new Element('div', { 'class': 'answerFrame', 'style': 'position:relative;' });
        this.loadingAnimation = new Element('div', { 'class': 'answerLoading', 'style': 'display:none; margin-top:10px; margin-bottom:20px;' });
        //+ image
        var animationImage = new Element('img', { 'src': _ajaxImage });
        this.loadingAnimation.insert(animationImage);
    },
    extendContentHolder: function() {
        this.ContentHolder.wrap(this.AnswerFrame);
        this.AnswerFrame.insert({ top: this.loadingAnimation });
        this.AnswerFrame.insert({ after: this.toggleAnchor });
        this.toggleAnchor.observe('click', this.onToggle.bind(this));
    },
    onToggle: function(e) {
        var collapsed = (this.toggleAnchor.innerHTML == this._offStateText);
        switch (collapsed) {
            case true:
                if (this.FullContent == undefined) {
                    this.ShowAnimation();
                    var _answer = this;
                    new Ajax.Request(_serviceHost, {
                        method: 'get',
                        parameters: { answerKey: this.Key },
                        onSuccess: function(transport) {
                            _answer.FullContent = transport.responseText;
                            _answer.ShowFullContent();
                            _answer.HideAnimation();
                        },
                        onFailure: function(e) {
                            _answer.HideAnimation();
                        }
                    });
                } else {
                    this.ShowAnimation();
                    this.ShowFullContent();
                    this.HideAnimation();
                }
                break;
            case false:
                this.ShowCondensedContent();
                this.AnswerFrame.up(1).scrollTo();
                break;
        }
    },
    ShowFullContent: function() {
        this.ContentHolder.update(this.FullContent);
        this.toggleAnchor.update(this._onStateText);
    },
    ShowCondensedContent: function() {
        this.ContentHolder.update(this.Content);
        this.toggleAnchor.update(this._offStateText);
    },
    ShowAnimation: function() {
        this.ContentHolder.setOpacity(0.25);
        this.loadingAnimation.show();
    },
    HideAnimation: function() {
        this.ContentHolder.setOpacity(1);
        this.loadingAnimation.hide();
    }
});



var AnswerCollection = Class.create(Enumerable, {

    initialize: function() {
        var readMoreAnswers = $$('div.isReadMore');
        readMoreAnswers.each(function(spanContent) {

            var rawId = $(spanContent).readAttribute('id');
            var key = rawId.substring('answer_'.length);
            var answer = new Answer(key);

        });
    }
});

Event.observe(window, 'load', function() {
    var answers = new AnswerCollection();
});