color main

main.js

(function(window, $) {
    var elements = {};
    window.Spectrum = (function(elements){

        var initialize = function() {
            elements.$colorField = $('#colorField');
            elements.$generateColorForm = $('#generateColorForm');
            elements.$frontPage = $('#frontPage');
            elements.$generateContainer = $('#generateContainer');

            elements.$generateContainer.hide();
            elements.$generateColorForm.unbind('submit').submit(function(event){
                var hexValue = elements.$colorField[0].value;
                if (hexValue[0] === '#') {
                    hexValue = hexValue.substr(1);
                }
                hexValue = hexValue.toUpperCase();
                if (hexValue.length === 3) {
                    hexValue =
                        hexValue[1] + hexValue[1] +
                        hexValue[2] + hexValue[2] +
                        hexValue[3] + hexValue[3];
                }

                event.preventDefault();
                submitHandler(event, hexValue);
                return false;
            });
        };

        var submitHandler = function(e, hexValue) {
            var shades = 30;
            var source = $('#generate-color-template').html(),
                template = Handlebars.compile(source),
                data = generateColors(hexValue, shades);

            Handlebars.registerHelper('urlHex', function(hex){
                if (typeof hex === 'string') {
                    return hex;
                } else {
                    return hex.hexString();
                }
            });

            $('#generateContainer').html(template(data));
            elements.$frontPage.hide();
            
            elements.$generateContainer.show();
        };

        var generateColors = function(hexValue, shades) {
            //Sometimes form gets submitted twice, this is a saftey to make sure we have a value
            if(typeof hexValue === 'undefined'){
               return false;
            }

            var hex = '#' + hexValue,
                color = new _C(hex),
                compColor = new _C(hex).rotate(180);
                colorArray = createWhiteToBlack(color),
                compArray = createWhiteToBlack(compColor),
                greyColor = new _C(hex).greyscale();
                greyArray = createWhiteToBlack(greyColor);
                //Our data structure to pass to handlebars
                generatedColors = {};

            //create our white to black model
            generatedColors.baseColor = color.hexString();
            generatedColors['colorRange'] = colorArray;

            //create our complements
            generatedColors['baseComp'] = compColor.hexString();
            generatedColors['compColors'] = compArray;

            //create our complements
            generatedColors['baseGrey'] = greyColor.hexString();
            generatedColors['greyColors'] = greyArray;

            return generatedColors;
        };

        var createWhiteToBlack = function(color) {
            var rangeArray = [];

            var black = new _C().rgb(0,0,0);
            var white = new _C().rgb(255, 255, 255);

            thisToWhite = createRange(color, white, 16, true).reverse();
            thisToBlack = createRange(color, black, 16, true);

            // From our color to white
            // We trim our color off of this array so it's not included twice
            for (var i = 0, whiteLen = thisToWhite.length - 1; i < whiteLen; i++) {
                rangeArray.push(thisToWhite[i]);
            }

            //From our color to black
            for (var j = 0, blackLen = thisToBlack.length; j < blackLen; j++) {
                rangeArray.push(thisToBlack[j]);
            }

            return rangeArray;
        };

        var createRange = function(fromColor, toColor, steps, include) {
            if (include === null) include = false;
            var a = fromColor.rgb(),
                b = toColor.rgb(),
                colors = [];
            steps--;
            for (n=1; n<steps;n++){
                var nr = Math.floor(a.r+(n*(b.r-a.r)/steps));
                var ng = Math.floor(a.g+(n*(b.g-a.g)/steps));
                var nb = Math.floor(a.b+(n*(b.b-a.b)/steps));
                colors.push({
                    hex: new _C().rgb(nr, ng, nb).hexString()
                });
            }
            if (include) {
                colors.unshift({
                    hex: fromColor.hexString()
                });
                colors.push({
                    hex: toColor.hexString()
                });
            }
            return colors;
        };

        return {
            initialize: initialize,
            generateColors: generateColors,
            elements: elements
        };
    })(elements);

    window.FrontPage = (function(elements){
        var initialize = function() {
            var $container = $('#randoms');

            elements.$frontPage.show();
            elements.$generateContainer.hide();
            createSwatches();
        };

        var randomColor = function() {
            return '#'+('00000'+(Math.random()*16777216<<0).toString(16)).substr(-6);
        };

        var createSwatches = function() {
            var source = $('#random-color-template').html(),
                template = Handlebars.compile(source),
                data = {
                    colors: []
                };

            Handlebars.registerHelper('urlHex', function(hex){
                return hex.substr(1);
            });

            for (var i = 0; i < 70; i++) {
                data.colors[i] = {};
                data.colors[i]['hex'] = randomColor();
            }
            console.log(data);
            $('#randomContainer').html(template(data));

            $swatches = $('.random-color a');

            //fix heights
            $swatches.each(function() {
                var $parent = $(this).parent();
                $parent.height($parent.width());
            });
        };

        return {
            initialize: initialize,
            createSwatches: createSwatches
        };
    })(elements);
}(window, $));

$(document).ready(function() {
    var spectrum_el = Spectrum.initialize();
    var front_page = FrontPage.initialize();
    $('.navbar-inner .brand').click(function(event){
        event.preventDefault();
        $('#generateContainer').hide();
        $('#frontPage').show();
    });

    $('.random-color a').click(function(event){
        event.preventDefault();
        $('#colorField').val($(this).attr('href'));
        $('#generateColorForm').submit();
    });

    $('.random-color a').hover(function(){
        $('.navbar-inner .brand').css('color', $(this).css('color'));
    });
});