pages = {};
pages.templates = {
    init: function() {
        this.fields = document.getElementsByClassName("field");
        //this.matrixCells = $("formBody").getElementsByTagName("td");
        this.categorys = document.getElementsByClassName("category");
        this.itemSubTitle = document.getElementsByClassName("itemSubTitle");
        this.itemTitle = document.getElementsByClassName("itemTitle");
        this.itemText = document.getElementsByClassName("itemText");

        if (typeof (themeObject) != 'undefined') {
            this.load(themeObject);
        }
    },

    defaultTheme: function() {
        this.background =
		{
		    backgroundColor: "#f5f5f5"
		};

        this.header =
		{
		    backgroundColor: "#F0F9FF",
		    color: "#000000",
		    fontFamily: "arial",
		    fontSize: "24",
		    logo: "",
		    logoBackgroundColor: "#FFFFFF"
		};

        this.body =
		{
		    backgroundColor: "#FFFFFF",
		    pager: { color: "#DC5151", fontFamily: "arial", fontSize: "12" },
		    category: { color: "#DC5151", fontFamily: "arial", fontSize: "16" },
		    title: { color: "#DC5151", fontFamily: "arial", fontSize: "16" },
		    subTitle: { color: "#666666", fontFamily: "arial", fontSize: "14" },
		    item: { color: "#000000", fontFamily: "arial", fontSize: "12" },
		    borderColor: "#dcdcdc",
		    hoverColor: "#FFFFE0"
		};

        this.actions =
		{
		    backgroundColor: "#FFFFFF"
		};
    },

    applyTheme: function() {
        this.applybackground();
        this.applyheader(true);
        this.applybody();
        this.applyactions();
    },

    applybackground: function() {
        $("formBackground").style.backgroundColor = this.background.backgroundColor;
    },

    applyheader: function(logo) {
        $("formHeader").style.backgroundColor = this.header.backgroundColor;
        $("title").style.color = this.header.color;
        $("title").style.fontFamily = this.header.fontFamily;
        $("title").style.fontSize = this.header.fontSize + "px";
        if ($("form-logo")) $("form-logo").style.backgroundColor = this.header.logoBackgroundColor;

        logo && this.applylogo();
    },

    applylogo: function() {
        var form_logo = $("form-logo");
        if ($("survey-logo")) form_logo.removeChild($("survey-logo"));
        if (this.header.logo) {
            form_logo.appendChild(Builder.node('img', { id: "survey-logo", src: "/uploadFiles/logos/" + this.header.logo + "?timestamp=" + Math.random() }));
            //form_logo.appendChild( $img({id:"survey-logo",src:"/images/logos/"+page.header.logo}) );
            $("form-logo").style.backgroundColor = this.header.logoBackgroundColor;
        }
    },
    applybody: function() {
        $("formBody").style.backgroundColor = this.body.backgroundColor;

        $("formPager").style.color = this.body.pager.color;
        $("formPager").style.fontFamily = this.body.pager.fontFamily;
        $("formPager").style.fontSize = this.body.pager.fontSize + "px";

        for (var i = 0; i < this.categorys.length; i++) {
            this.categorys[i].style.color = this.body.category.color;
            this.categorys[i].style.fontFamily = this.body.category.fontFamily;
            this.categorys[i].style.fontSize = this.body.category.fontSize + "px";
        }
        
        for (var i = 0; i < this.fields.length; i++)
            this.fields[i].style.borderBottom.borderColor = this.body.borderColor;

        //for (var i = 0; i < this.matrixCells.length; i++)
        //    this.matrixCells[i].style.border = "1px solid " + this.body.borderColor;

        for (var i = 0; i < this.itemTitle.length; i++) {
            this.itemTitle[i].style.color = this.body.title.color;
            this.itemTitle[i].style.fontFamily = this.body.title.fontFamily;
            this.itemTitle[i].style.fontSize = this.body.title.fontSize + "px";
        }

        for (var i = 0; i < this.itemSubTitle.length; i++) {
            this.itemSubTitle[i].style.color = this.body.subTitle.color;
            this.itemSubTitle[i].style.fontFamily = this.body.subTitle.fontFamily;
            this.itemSubTitle[i].style.fontSize = this.body.subTitle.fontSize + "px";
        }

        for (var i = 0; i < this.itemText.length; i++) {
            this.itemText[i].style.color = this.body.item.color;
            this.itemText[i].style.fontFamily = this.body.item.fontFamily;
            this.itemText[i].style.fontSize = this.body.item.fontSize + "px";
        }
    },

    applyactions: function() {
        $("actionArea").style.backgroundColor = this.actions.backgroundColor;
    },

    load: function(ret) {
        this.defaultTheme();
        this.background = ret.background || this.background;
        this.header = ret.header || this.header;
        this.header.logoBackgroundColor = this.header.logoBackgroundColor || "#FFFFFF";
        this.body = ret.body || this.body;
        this.body.hoverColor = this.body.hoverColor || "#FFFFE0";
        this.actions = ret.actions || this.actions;

        this.applyTheme();

    }
};
Event.observe(window, "load", pages.templates.init.bind(pages.templates));