// ==UserScript==
// @name       mTurkThemes
// @namespace  http://ericfraze.com
// @version    0.2
// @description  This script inserts custom CSS for mturk.com
// @match      https://www.mturk.com/*
// @resource cssfile https://dl.dropboxusercontent.com/u/8371875/mTurk%20Theme/Output/style.css?version=345678
// @grant			GM_addStyle
// @grant			GM_getResourceText
// @grant			GM_setClipboard
// @grant			GM_getValue
// @grant			GM_setValue
// @copyright  2014+, Eric Fraze
// @require     http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
// @downloadURL none
// ==/UserScript==

// Add CSS
if (GM_getValue('mturk-theme-css', -1) === -1){
	GM_addStyle(GM_getResourceText("cssfile"));
}else{
    GM_addStyle(loadCSS());
}

// Wait for DOM to load
$(document).ready(function() {
    //Add the HTML elements
   $("#user_name_field").after(' | <span id="mturkthemeoptions" class="header_links">Theme Options</span>');
   $("body").append('<div id="mturktheme" class=""></div>');
    resetVariables();
    //if (localStorage.getItem('mturk-theme-data') === null){
    if (GM_getValue('mturk-theme-data', -1) === -1){
    	initThemeFromCSS();
    } else {
    	loadTheme();
        initThemeFromVariable();
    }
    
    console.log(colorGroups);
    
    refreshList();
});

$("#mturkthemeoptions").live('click', function () {
    $("#mturktheme").toggleClass("active");
});

$("#mturktheme .variable-group .expand").live('click', function () {
    $(this).parents(".variable-group-wrapper").toggleClass("active");
});

$("#mturktheme .variable-group-wrapper .color").live('click', function () {
    var variableName;
    var oldColor;
    var newColor = prompt("What do you want the new color to be?");
    
    if (newColor != null) {
        if ($(this).parent('.variable-color').length) {
            variableName = $(this).attr('name');
            oldColor = getProperty(variableName);
            
            setProperty(variableName, oldColor, newColor);
            //$(this).css('background-color', newColor);
        }else{
            oldColor = $(this).attr('name');
            setGroupProperty(oldColor, newColor);
            
            //$('#mturktheme .color[style="background-color: ' + color + ';"]').css('background-color', newColor);
            
            //$(this).parent().children(".header").text(newColor);
        }
        
        refreshList();
        saveTheme();
    }
});

$("#mturktheme .toolbar .import").live('click', function () {
    var newTheme = prompt("Paste in the theme!");
    
    if (newTheme != null) {
    	variables = JSON.parse(newTheme);
        initThemeFromVariable();
    	refreshList();
    	saveTheme();
    }
});

$("#mturktheme .toolbar .export").live('click', function () {
    GM_setClipboard(JSON.stringify(variables));
    alert("Theme copied to clipboard. Pastebin and share!");
});

$("#mturktheme .toolbar .revert").live('click', function () {
    setCSS( loadCSS() );
    initThemeFromCSS();
    refreshList();
    saveTheme();
});

$("#mturktheme .toolbar .save").live('click', function () {
    saveCSS();
});

var variables;
var colorGroups;
function resetVariables() {
    console.log("reseting");
    // All of the color variables
    variables =      [
                        ["hit-capsule-title-color", ""],
                        ["hit-capsule-title-hover-color", ""],
                        ["hit-capsule-title-visited-color", ""],
                        ["hit-capsule-link-right-color", ""],
                        ["hit-capsule-link-right-hover-color", ""],
                        ["hit-capsule-link-right-visited-color", ""],
                        ["header-link-color", ""],
                        ["subtab-text-color", ""],
                        ["separator-text-color", ""],
                        ["searchbar-text-color", ""],
                        ["whatis-link-color", ""],
                        ["dashboard-and-workerID-text-color", ""],
                        ["if-you-re-not-text-color", ""],
                        ["link-default-color", ""],
                        ["link-default-hover-color", ""],
                        ["link-default-visited-color", ""],
                        ["show-earnings-details-text-color", ""],
                        ["button-background-color", ""],
                        ["button-border-color", ""],
                        ["button-text-color", ""],
                        ["tab-text-color", ""],
                        ["tab-background-color-inactive", ""],
                        ["tab-border-color-inactive", ""],
                        ["tab-background-color-active", ""],
                        ["tab-border-color-active", ""],
                        ["page-background-color", ""],
                        ["tab-text-color-active", ""],
                        ["page-header-background-color", ""],
                        ["page-header-border-color", ""],
                        ["default-text-color", ""],
                        ["search-go-button-background-color", ""],
                        ["search-go-button-border-color", ""],
                        ["search-go-button-text-color", ""],
                        ["table-body-background-color", ""],
                        ["table-header-background-color", ""],
                        ["table-header-text-color", ""],
                        ["table-body-border-color", ""],
                        ["table-list-text-color", ""],
                        ["table-list-header-background-color", ""],
                        ["table-list-header-text-color", ""],
                        ["table-list-row-even-background-color", ""],
                        ["table-list-row-border-color", ""],
                        ["table-list-row-odd-background-color", ""],
                        ["table-link-color", ""],
                        ["sort-button-text-color", ""],
                        ["hit-border-color", ""],
                        ["hit-header-unqualified-background-color", ""],
                        ["hit-body-unqualified-background-color", ""],
                        ["hit-header-qualified-background-color", ""],
                        ["hit-body-qualified-background-color", ""],
                        ["page-footer-background-color", ""],
                    ];
        
     colorGroups = [];
}

function getStyle() {
	// Find the correct style element by looking for my comment
	return $( "style:contains('/* mTurk Theme */')" );
}

function getCSS() {
     // Send the CSS text over
     return getStyle().text();
}

function setCSS(css) {
     // Replace the text of the style element
     getStyle().text(css);
}

function findProperty(variableName, flags) {
    // Fancy thing lets flags be optiional.
    flags = typeof flags !== 'undefined' ? flags : 'g';
    
    // Ugh. Regex. I need to escape the escapes here. Crazy.
    // Select the CSS property by the comment in the line above it.
    // NOTE: This relies on the property you want to change being the FIRST value
    // "border: 1px blue solid ;" will change "1px", not "blue"
    // "border: blue 1px solid;" will change "blue"
    // Group 1: comment & property
    // Group 2: property you want to change (I hope!)
    // Group 3: values after the property
    // Group 4: the semicolon
    var regstring = "(.*\\/\\*\\s" + variableName + "\\s\\*\\/\\s+.*:\\s+)(#*[A-Za-z0-9]+)(.*)(;.*)";
    
    // Create the RegEx object
    return new RegExp(regstring, flags);
}

function replaceProperty(regex, str, value) {
    return str.replace(regex, "$1" + value + "$3$4");
}
    
function getPropertyIndex (variableName) {
    for (var i = 0; i < variables.length; i++) {
        if (variableName == variables[i][0]) {
            return i;
    	}
    }
    
    return -1;
}

function getProperty(variableName) {
    // Get the CSS text
    var css = getCSS();
    // Get the CSS property regex
    regex = findProperty(variableName, '');
    // Get the groups
    groups = regex.exec(css);

    // Return the value
    return groups[2];
}

function setProperty(variableName, oldColor, newColor) {
    // Get the CSS text
    var css = getCSS();
    
    // Get the CSS property regex
    regex = findProperty(variableName);
    
    // Replace the color with the one we want.
    css = replaceProperty(regex, css, newColor);
    
    // Apply the new CSS
    setCSS(css);
    
    if (oldColor !== null) {
        var index = getPropertyIndex(variableName);
    
        variables[index][1] = newColor;
        
        if (newColor in colorGroups) {
            colorGroups[newColor].push(index);
        }else{
            colorGroups[newColor] = [];
            colorGroups[newColor][0] = index;
        }
        
        var groupIndex = colorGroups[oldColor].indexOf(index);
        delete colorGroups[oldColor][groupIndex];
    }
    
}

function setGroupProperty (oldColor, newColor) {
    for (var i in colorGroups[oldColor]) {
        index = colorGroups[oldColor][i];
        console.log(index);
        variableName = variables[index][0];
        setProperty(variableName, oldColor, newColor);
    }
    
    delete colorGroups[oldColor];
}

function refreshList () {
    $("#mturktheme").empty();
    $("#mturktheme").append('<div class="toolbar"></div>');
    $("#mturktheme .toolbar").append('<div title="Import theme" class="icon import"></div>');
    $("#mturktheme .toolbar").append('<div title="New theme" class="icon add"></div>');
    $("#mturktheme .toolbar").append('<select class="theme-select"><option value="default">Default</option><option value="night">Night</option></select>');
    $("#mturktheme .toolbar").append('<div title="Export theme" class="icon export"></div>');
    $("#mturktheme .toolbar").append('<div title="Save theme (cannot be reverted!)" class="icon save"></div>');
    $("#mturktheme .toolbar").append('<div title="Revert to last save" class="icon revert"></div>');
    //$("#mturktheme .toolbar").append('<span>Text goes here!</span>');
    for (var color in colorGroups) {
        var colorGroup = colorGroups[color];
        
        var appenndString = '<div class = "variable-group-wrapper"><div class="variable-group"><div class="content">' + color + '</div><div name = "' + color + '" class="color" style="background-color: ' + color + ';"></div><div class="expand"></div></div>';
        for (var ii in colorGroup) {
            var index = colorGroup[ii];
            
            var variableName = variables[index][0];
            
            appenndString += '<div class="variable-color"><div class="content">' + variableName + '</div>'
            appenndString += '<div name = "' + variableName + '" class="color" style="background-color: ' + color + ';"></div></div>';
        }
        appenndString += '</div>';
        $("#mturktheme").append(appenndString);
    }
}

function saveTheme() {
    //localStorage.setItem('mturk-theme-data', JSON.stringify(variables));
    GM_setValue('mturk-theme-data', JSON.stringify(variables));
}

function loadTheme() {
    //variables = JSON.parse(localStorage.getItem('mturk-theme-data'));
    variables = JSON.parse(GM_getValue('mturk-theme-data'));
}

function initThemeFromCSS() {
    resetVariables();
    // Load all the color values.
    var variableName;
    var color;
    for (var i = 0; i < variables.length; i++) {
        variableName = variables[i][0];
        color = getProperty(variableName);
        variables[i][1] = color;
        
        if (color in colorGroups) {
            colorGroups[color].push(i);
        }else{
            colorGroups[color] = [];
            colorGroups[color][0] = i;
        }
    }
}

function initThemeFromVariable() {
    var variableName;
    var color;
    for (var i = 0; i < variables.length; i++) {
        variableName = variables[i][0];
        
        var oldColor = getProperty(variableName);
        
        color = variables[i][1];
        
        setProperty(variableName, null, color);
        
        if (color in colorGroups) {
            colorGroups[color].push(i);
        }else{
            colorGroups[color] = [];
            colorGroups[color][0] = i;
        }
    }
}

function saveCSS() {
    //localStorage.setItem('mturk-theme-data', JSON.stringify(variables));
    GM_setValue('mturk-theme-css', JSON.stringify( getCSS() ));
}

function loadCSS() {
    //variables = JSON.parse(localStorage.getItem('mturk-theme-data'));
   return JSON.parse(GM_getValue('mturk-theme-css'));
}