﻿var TextControl = Class.create();

TextControl.prototype = {
    bgControl: null,
    content: null,
    theme: null,
    scroll: null,
    options: null,
    settings: null,
    change: null,
    jar: new CookieJar({ expires: 2592000 }),

    initialize: function() {
        this.options = Object.extend({
            parentId: null,
            contentId: 'content',
            themeId: '__theme',
            bgcId: '__bgc',
            fgcId: '__fgc',
            ffId: '__ff',
            fsId: '__fs',
            scrollId: '__scroll',
            fontSize: null,
            fontFamily: null,
            bgColor: null,
            fgColor: null,
            spacing: null,
            blackberry: false
        }, arguments[0] || {});
        this.content = $(this.options.contentId);
        if (this.options.parentId) this.bgControl = $(this.options.parentId);
        if (this.bgControl == null) this.bgControl = this.content;
        if (this.options.scrollId) this.scroll = $(this.options.scrollId);
        if (this.options.themeId) this.theme = $(this.options.themeId);
        if (this.options.eventId == null) {
            var h = new Hash(window.location.search.toQueryParams());
            this.eventId = h.get(this.options.eventNameParam);
        }
        else this.eventId = this.options.eventId;
        if (this.options.spacing == null) this.options.spacing = 1.5;
        this.settings = this.jar.get('tps');
        if (this.settings == null) this.settings = this.jar.get('textPlayerSettings');
        if (this.settings == null) this.settings = {};
        //override any cookie settings with settings that were passed in
        if (this.options.fontSize != null) this.settings.fontSize = this.options.fontSize;
        if (this.options.fontFamily != null) this.settings.fontFamily = this.options.fontFamily;
        if (this.options.fgColor != null) this.settings.fgColor = this.options.fgColor;
        if (this.options.bgColor != null) this.settings.bgColor = this.options.bgColor;

        //start checking if there are controls for the text settings and if there are, listen for
        //changes to those controls
        if (this.theme) {
            this.theme.observe('change', this._theme.bindAsEventListener(this));
        }
        if ($(this.options.bgcId)) {
            $(this.options.bgcId).observe('change', this._bgColor.bindAsEventListener(this));
            if (this.settings.bgColor) $(this.options.bgcId).value = this.settings.bgColor;
        }
        if ($(this.options.fgcId)) {
            $(this.options.fgcId).observe('change', this._fgColor.bindAsEventListener(this));
            if (this.settings.fgColor) $(this.options.fgcId).value = this.settings.fgColor;
        }
        if ($(this.options.ffId)) {
            $(this.options.ffId).observe('change', this._fontFamily.bindAsEventListener(this));
            if (this.settings.fontFamily) $(this.options.ffId).value = this.settings.fontFamily;
        }
        if ($(this.options.fsId)) {
            $(this.options.fsId).observe('change', this._fontSize.bindAsEventListener(this));
            if (this.settings.fontSize) $(this.options.fsId).value = this.settings.fontSize;
        }
        if (this.settings.fontFamily) this._setFontFamily(this.settings.fontFamily);
        if (this.settings.fontSize) this._setFontSize(this.settings.fontSize);
        if (this.settings.fgColor) this._setFgColor(this.settings.fgColor);
        if (this.settings.bgColor) this._setBgColor(this.settings.bgColor);
    },
    _theme: function(event) {
        if (this.change != null) return;
        var e = this.change = Event.element(event);
        if (e && e.value.length > 0) this._setTheme(e.value);
        this.change = null;
    },
    _setTheme: function(value) {
        if (value && value.length > 0) {
            var bg = value.split(';')[0];
            this._setBgColor(bg);
            if ($(this.options.bgcId)) $(this.options.bgcId).value = bg;
            var fg = value.split(';')[1];
            this._setFgColor(fg);
            if ($(this.options.fgcId)) $(this.options.fgcId).value = fg;
        }
    },
    _checkTheme: function() {
        if (this.bgControl && this.theme && this.change != this.theme && this.options.fgcId && this.options.bgcId) {
            var bg = $(this.options.bgcId);
            var fg = $(this.options.fgcId);
            var value = bg.value + ';' + fg.value;
            var option;
            var custom;
            $A(this.theme.options).each(function(o) {
                if (o.value == '') custom = o;
                if (o.value == value) option = o;
            });
            if (option) option.selected = true;
            else custom.selected = true;
        }
    },
    _bgColor: function(event) {
        if (this.change != null) return;
        var e = this.change = Event.element(event);
        if (e && e.value.length > 0) this._setBgColor(e.value);
        this.change = null;
    },
    _setBgColor: function(value) {
        if (value && value.length > 0) {
            this.bgControl.setStyle({ backgroundColor: value });
            this.onTextChange();
            if (this.change && this.change.id == this.options.bgcId && this.bgControl.getStyle('color') == this.bgControl.getStyle('backgroundColor')) alert('Back color and font color are now the same.  You will have to change one or the other to see the text.');
            this.settings.bgColor = value;
            this._saveSettings();
            this._checkTheme();
        }
    },
    _fgColor: function(event) {
        if (this.change != null) return;
        var e = this.change = Event.element(event);
        if (e && e.value.length > 0) this._setFgColor(e.value);
        this.change = null;
    },
    _setFgColor: function(value) {
        if (value && value.length > 0) {
            this.bgControl.setStyle({ color: value });
            this.onTextChange();
            if (this.change && this.change.id == this.options.fgcId && this.bgControl.getStyle('color') == this.bgControl.getStyle('backgroundColor')) alert('Back color and font color are now the same.  You will have to change one or the other to see the text.');
            this.settings.fgColor = value;
            this._saveSettings();
            this._checkTheme();
        }
    },
    _fontFamily: function(event) {
        if (this.change != null) return;
        var e = this.change = Event.element(event);
        if (e && e.value.length > 0) this._setFontFamily(e.value);
        this.change = null;
    },
    _setFontFamily: function(value) {
        if (value && value.length > 0) {
            this.content.setStyle({ fontFamily: value });
            this.onTextChange();
            this.settings.fontFamily = value;
            this._saveSettings();
        }
    },
    _fontSize: function(event) {
        if (this.change != null) return;
        var e = this.change = Event.element(event);
        if (e && e.value.length > 0) this._setFontSize(e.value);
        this.change = null;
    },
    _setFontSize: function(value) {
        if (value && value.length > 0) {
            var size = new Number(value.substring(0, value.length - 2)) * this.options.spacing;
            this.content.setStyle({ fontSize: value, lineHeight: size + 'px' });
            this.onTextChange();
            this.settings.fontSize = value;
            this._saveSettings();
        }
    },
    onTextChange: function() {
        //the only time that we don't scroll the text is if the scroll explicitly off
        if (this.scroll == null || this.scroll.checked == true) {
            if (Object.isUndefined(this.content.scrollTop)) window.scroll(0, this.content.offsetHeight);
            else this.content.scrollTop = this.content.scrollHeight - this.content.clientHeight;
        }
    },
    _saveSettings: function() { this.jar.remove('textPlayerSettings'); this.jar.put('tps', this.settings); }
}