document.observe('dom:loaded', function() {
    var fontSizeChanger = new Element('div', {'class': 'font-size-changer'});
    var fontSmaller = new Element('span', {'class': 'font-size-smaller'}).update('Smaller');
    var fontLarger = new Element('span', {'class': 'font-size-larger'}).update('Larger');
    
    fontSizeChanger.appendChild(fontSmaller);
    fontSizeChanger.appendChild(fontLarger);
    
    $$('.article-body').first().insert({before: fontSizeChanger});
    
    var sizes = ['1.0em', '1.15em', '1.3em'];
    var currentSize = Cookie.get('article-font-size');
    if (!currentSize) currentSize = 0;
    if (currentSize == 0) fontSmaller.addClassName('disabled');
    if (currentSize == sizes.length - 1) fontLarger.addClassName('disabled');
    $$('.article-body').invoke('setStyle', {fontSize: sizes[currentSize]});
    
    // Remove "size" attribute from any "font" tags
    $$('.article-body font').invoke('writeAttribute', 'size', null);
    
    // Remove inline "size" style from all tags
    $$('.article-body *').invoke('setStyle', {fontSize: null});
    
    function deselect() {
        if (document.selection)
            document.selection.empty();
        else if (window.getSelection)
            window.getSelection().removeAllRanges();
    }
    
    var observeClick = function(event)
    {
        var element = Event.element(event);
        deselect();
        if (element.hasClassName('font-size-smaller')) {
            if (currentSize == 0) return;
            currentSize--;
            var newSize = sizes[currentSize];
            $$('.article-body').invoke('setStyle', {fontSize: newSize});
            $$('.font-size-changer .disabled').invoke('removeClassName', 'disabled');
            if (currentSize == 0) element.addClassName('disabled');
        } else if (element.hasClassName('font-size-larger')) {
            if (currentSize == sizes.length - 1) return;
            currentSize++;
            var newSize = sizes[currentSize];
            $$('.article-body').invoke('setStyle', {fontSize: newSize});
            $$('.font-size-changer .disabled').invoke('removeClassName', 'disabled');
            if (currentSize == sizes.length - 1) element.addClassName('disabled');
        } else {
            return;
        }
        
        Cookie.set('article-font-size', currentSize);
    }
    
    // Observe the 'smaller' and 'larger' spans
    fontSizeChanger.observe('click', observeClick);
    
    var raterDiv = new Element('div', {id: 'article-rater', 'class': 'article-rating'}).update("Loading Rating plugin...");
    $$('.article .info').first().insert(raterDiv);
    var rater = new RT.Rater(raterDiv, {
        value:          Math.round($F('rater-value')),
        locked:         $F('rater-locked') == 1 ? true : false,
        lockOnClick:    false,
        classes:        {
            container:      'rater_container_house',
            off:            'rater_off',
            on:             'rater_on',
            selected:       'rater_selected'
        },
        updateUrl:      $F('rater-update-url'),
        onSuccess:      function(t) {
            //alert("You submitted a rating of " + t.responseText.evalJSON(true).value);
            var json = t.responseText.evalJSON();
            updateRating(json.rating, json.ratings, json.value);
        }
    });

    var raterResults = new Element('div', {'class': 'article-rating-results'});
    raterDiv.insert(raterResults);

    var raterVote = new Element('div', {'class': 'article-rating-vote'});
    raterDiv.insert(raterVote);
    
    var tmplResults = new Template('Rated #{rating} out of 5 by #{raters} Member#{raters_plural}');
    var tmplMemberRating = new Template('You rated this article a #{member_rating}');
    
    var updateRating = function(rating, raters, member_rating)
    {
        if (raters > 0) {
            raterResults.update(tmplResults.evaluate({
                rating:         Math.round(rating),
                raters:         raters,
                raters_plural:  raters == 1 ? '' : 's'
            }));
            
            if (member_rating > 0) {
                raterVote.update(tmplMemberRating.evaluate({
                    member_rating:           member_rating
                }));
            }
        }
    }
    
    // Tooltip for Rater
    if (!$F('rater-locked')) {
        new RT.Tooltip(raterDiv, 'Click to rate this article', {
            placement:      {
                element:        'topLeft',
                tooltip:        'bottomLeft'
            },
            offsetTop:      -18,
            offsetLeft:     72,
            stem:           'bottomLeft'
        });
    }
    
    updateRating($F('rater-value'), $F('rater-ratings'), parseInt($F('rater-member-rating')));
});