var MarketingBelt = Class.create({
    initialize: function(messageData) {
        this.messageData = messageData;
        this.curIdx = 0;
        this.count = messageData.length;

        Event.observe(window, 'load', function() {
            setTimeout(this.display.bind(this), 500);
        }.bind(this));
    },

    prev: function() {
        this.curIdx = (this.curIdx == 0) ? this.count - 1 : this.curIdx - 1;
        
        this.display();
    },

    next: function() {
        this.curIdx = (this.curIdx == (this.count - 1)) ? 0 : this.curIdx + 1;

        this.display();
    },

    display: function() {
        if (this.messageData && this.messageData[this.curIdx]) {
            new Effect.Move('index-advert-text-body', {
                x: $('index-advert-text-body').getWidth(),
                y: 0,
                duration: 0.5,
                queue: { position: 'end', limit: 1, scope: 'index-advert' },
                messageData: this.messageData[this.curIdx],
                afterFinish: function(ef1) {
                    new Effect.Move(ef1.element, {
                        x: -2 * $(ef1.element).getWidth(),
                        y: 0,
                        duration: 0,
                        queue: { position: 'end', limit: 1, scope: 'index-advert' },
                        messageData: ef1.options.messageData,
                        afterFinish: function(ef2) {
                            var curData = ef2.options.messageData;
                            $('index-advert-quote').update(curData.quote);

                            var authorText = '';
                            for (var authorIdx = 0; authorIdx < curData.authors.length; ++authorIdx) {
                                var authorData = curData.authors[authorIdx];

                                if (authorText != '') authorText += '<span class="index-advert-author-sep">,</span>';
                                authorText += '<span class="index-advert-author-name">' + authorData.name + ',</span>';
                                authorText += '<span class="index-advert-author-title">' + authorData.title + '</span>';
                            }
                            $('index-advert-author').update(authorText);

                            var quoteHeight = $('index-advert-quote').getHeight();
                            var authorHeight = $('index-advert-author').getHeight();
                            var totalHeight = $('index-advert-text').getHeight();
                            var marginBottom = 6;

                            var quoteTop = Math.max(0, Math.floor((totalHeight - quoteHeight - authorHeight - marginBottom) / 2));
                            $('index-advert-quote').style.top = quoteTop + "px";

                            var authorTop = quoteTop + quoteHeight + marginBottom;
                            $('index-advert-author').style.top = authorTop + "px";

                            new Effect.Move(ef2.element, {
                                x: $(ef2.element).getWidth(),
                                y: 0,
                                duration: 0.5,
                                queue: { position: 'end', limit: 1, scope: 'index-advert' }
                            });
                        }
                    });
                }
            });
        }
    }
});

var AdvantageBelt = Class.create({
    initialize: function(messageData) {
        this.messageData = messageData;
        this.curIdx = 0;
        this.count = messageData.length;

        Event.observe(window, 'load', function() {
            setTimeout(this.display.bind(this), 1000);
        }.bind(this));
    },

    prev: function() {
        this.curIdx = (this.curIdx == 0) ? this.count - 1 : this.curIdx - 1;
        
        this.display();
    },

    next: function() {
        this.curIdx = (this.curIdx == (this.count - 1)) ? 0 : this.curIdx + 1;

        this.display();
    },

    page: function(idx) {
        this.curIdx = idx;

        this.display();
    },

    display: function() {
        this.animTimer = null;
        if (this.messageData && this.messageData[this.curIdx]) {
            new Effect.Move('index-advantage-text-body', {
                x: $('index-advantage-text-body').getWidth(),
                y: 0,
                duration: 0.5,
                queue: { position: 'end', limit: 1, scope: 'index-advantage' },
                beltObj: this,
                afterFinish: function(ef1) {
                    new Effect.Move(ef1.element, {
                        x: -2 * $(ef1.element).getWidth(),
                        y: 0,
                        duration: 0,
                        queue: { position: 'end', limit: 1, scope: 'index-advantage' },
                        beltObj: ef1.options.beltObj,
                        afterFinish: function(ef2) {
                            var curCount = ef2.options.beltObj.messageData.length;
                            var curData = ef2.options.beltObj.messageData[ef2.options.beltObj.curIdx];

                            $('index-advantage-image').update('<img src="' + basePath + staticPath + '/img/' + curData.image + '" alt="" />');
                            $('index-advantage-title').update(curData.title);
                            $('index-advantage-description').update(curData.text);

                            var indexText = "";
                            for (var i = 0; i < curCount; ++i) {
                                var imageName;
                                if (i == ef2.options.beltObj.curIdx) {
                                    imageName = 'advantage-bullet-active.gif';
                                } else {
                                    imageName = 'advantage-bullet.gif';
                                }
   
                                indexText += '<a href="" class="index-advantage-index-link"><img class="index-advantage-index-image" alt="" src="' + basePath + staticPath + '/img/' + imageName + '" /></a>';
                            }
                            $('index-advantage-index').update(indexText);

                            var links = $('index-advantage-index').select('.index-advantage-index-link');
                            for (var linkIdx = 0; linkIdx < links.length; ++linkIdx) {
                                var link = links[linkIdx];
                                link.onclick = function(idx) {
                                    if (this.animTimer) {
                                        clearTimeout(this.animTimer);
                                        this.animTimer = null;
                                    }
                                    this.page(idx);

                                    return false;
                                }.bind(ef2.options.beltObj, linkIdx);
                            }

                            new Effect.Move(ef2.element, {
                                x: $(ef2.element).getWidth(),
                                y: 0,
                                duration: 0.5,
                                queue: { position: 'end', limit: 1, scope: 'index-advantage' },
                                beltObj: ef2.options.beltObj,
                                afterFinish: function(ef3) {
                                    ef3.options.beltObj.animTimer = setTimeout(function() {
                                        this.next();
                                    }.bind(ef3.options.beltObj), 10000);
                                }
                            });
                        }
                    });
                }
            });
        }
    }
});