// ==UserScript==
// @name        Breadfish Customizer
// @namespace   BauerProductions
// @include     http://breadfish.de*
// @require     http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js
// @version     1
// @grant       GM_xmlhttpRequest
// ==/UserScript==

var username = null;

var settings = new Array();

function SaveSettings(identificator, property, value){
    if(value[0] == "#") value = value.slice(1, value.length);

    var data = new Array();
    var tmp = [identificator, property, value];

    data.push(tmp);
    data = JSON.stringify(data);

    GM_xmlhttpRequest({
        method: "GET",
        url: "http://jack.city-of-sa.de/BreadfishCustomizer/setsettings.php?username=" + username + "&data=" + data,
        onload: function(response){
            // alert(response.responseText);
        }
    });
}

function GetSettings(object, name, value){
    GM_xmlhttpRequest({
        method: "GET",
        url: "http://jack.city-of-sa.de/BreadfishCustomizer/getsettings.php?username=" + username,
        onload: function(response){
            settings = JSON.parse(response.responseText);

            for(var i=0; i<settings.length; i++){
                $(settings[i]["identificator"]).css(settings[i]["property"], "#" + settings[i]["value"]);
            }
        }
    });
}

$(document).ready(function(){
    if($("#userMenu a span").length == 0){
        return 0;
    }

    username = $("#userMenu a span").html()

    GetSettings();

    $("#footerNavigation .navigationItems").append("<li class=\"styleChooser\"><a id=\"breadfishCustomizerSettingsLink\">Breadfish Customizer</a></li>");

    $("#breadfishCustomizerSettingsLink").click(function(){
        var greyedBackground = document.createElement("div");
        greyedBackground.style.position = "fixed";
        greyedBackground.style.zIndex = "999";
        greyedBackground.style.left = "0px";
        greyedBackground.style.top = "0px";
        greyedBackground.style.right = "0px";
        greyedBackground.style.bottom = "0px";
        greyedBackground.style.backgroundColor = "rgba(190, 190, 190, 0.60)";
        $(document).keyup(function(event){
            if(event.which == 27){
                $(greyedBackground).animate({opacity: "0"}, "slow", function(){
                    $(greyedBackground).remove();
                    $(document).unbind("keyup");
                });
            }
        });

        var settingsContainerTitle = document.createElement("div");
        settingsContainerTitle.style.position = "absolute";
        settingsContainerTitle.style.left = "0px";
        settingsContainerTitle.style.right = "0px";
        settingsContainerTitle.style.height = "50px";
        settingsContainerTitle.style.width = "100%";
        settingsContainerTitle.style.color = "white";
        settingsContainerTitle.style.backgroundColor = "#2A3441";
        settingsContainerTitle.innerHTML = "Breadfish Customizer - Einstellungen";
        settingsContainerTitle.style.fontSize = "20px";
        settingsContainerTitle.style.textAlign = "center";

        var settingsContainer = document.createElement("div");
        settingsContainer.style.position = "fixed";
        settingsContainer.style.width = "800px";
        settingsContainer.style.minHeight = "300px";
        settingsContainer.style.left = "50%";
        settingsContainer.style.top = "0px";
        settingsContainer.style.marginLeft = "-400px";
        settingsContainer.style.backgroundColor = "white";
        settingsContainer.style.paddingLeft = "20px";
        settingsContainer.style.paddingRight = "20px";
        settingsContainer.style.paddingBottom = "20px";
        settingsContainer.style.borderBottomLeftRadius = "20px";
        settingsContainer.style.borderBottomRightRadius = "20px";

        var settingsContainerOptionsContainer = document.createElement("span");
        settingsContainerOptionsContainer.style.marginTop = "50px";
        settingsContainerOptionsContainer.style.display = "block";

        $(settingsContainer).append(settingsContainerTitle);
        $(settingsContainer).append(settingsContainerOptionsContainer);
        $(greyedBackground).append(settingsContainer);

        var options = [
            ["-topMenu", "bc-menue-color", "Farbe des obersten Menüs", "background-color"],
            ["-content", "bc-content-color", "Farbe des Kontentbereiches", "background-color"],
            ["body", "bc-page-background-color", "Farbe des Seitenhintergrundes", "background-color"],
            ["-search form input", "bc-search-back-color", "Farbe der Suchmaske (Hintergrund)", "background-color"],
            ["-search form input", "bc-search-fore-color", "Farbe der Suchmaske (Vordergrund)", "color"],
            [".sidebar", "bc-sidebar-back-color", "Farbe des Seitenmenüs (Sidebar)", "background-color"],
            [".containerHeadline h3 a", "bc-forum-overview-link-fore-color", "Farbe der Forenlinks (Startseite)", "color"],
        ];
        for(var i=0; i<options.length; i++){
            if(options[i][0][0] == "-"){
                var tmpElementID = "#" + options[i][0].slice(1, options[i][0].length);
            }else{
                var tmpElementID = options[i][0];
            }

            var settingsOption = document.createElement("span");
            settingsOption.style.float = "left";
            settingsOption.style.marginRight = "20px";
            settingsOption.style.marginTop = "20px";
            settingsOption.innerHTML = "<a title='Halten, um zu identifizieren' onmousedown='$(\"" + tmpElementID + "\").css(\"border\", \"1px solid red\");' onmouseup='$(\"" + tmpElementID + "\").css(\"border\", \"0px\");'>" + options[i][2] + "</a>: <br /><input type='color' id='" + options[i][1] + "' />";

            settingsOption.onchange = (function(i, tmpElementID){return function(){
                SaveSettings(options[i][0], options[i][3], $("#" + options[i][1]).val());

                $(tmpElementID).css(options[i][3], $("#" + options[i][1]).val());

                $("html, body").animate({scrollTop: ($(tmpElementID).offset().top)}, 'fast', function(){
                    $(settingsContainer).animate({ opacity: 0.3}, 'fast');
                    setTimeout(function(){
                        $(window).scroll(function(){
                            $(settingsContainer).animate({ opacity: 1.0}, 'fast');
                            $(window).unbind("scroll");
                            $(window).unbind("click");
                        });

                        $(window).click(function(){
                            $(settingsContainer).animate({ opacity: 1.0}, 'fast');
                            $(window).unbind("scroll");
                            $(window).unbind("click");
                        });
                    }, 1000);
                });
            };})(i, tmpElementID);
            $(settingsContainerOptionsContainer).append(settingsOption);
        }
        $(settingsContainerOptionsContainer).append("<span style='clear: both;'></span>");
        $("body").append(greyedBackground);
    });


});