colorsquares/js/init.js

var square = function(id) {
	var newSquare = {
		'id': id,

		'h': 0,
		's': 95,
		'l': 65,

		'hstep': 1,

		interval: null,
		intervalEnabled: true,
		intervalView: false,

		'init': function() {
			this.setHSL(Math.random() * 360);
			this.registerEvents();
		},

		'registerEvents': function() {
			var me = this;
			$(this.id).on('click', function(){
				me.handleClick();
			});
			$(this.id).on('mouseenter', function(){
				$(me.id).addClass('square-selected');
				me.update();
			});
			$(this.id).on('mouseleave', function(){
				$(me.id).removeClass('square-selected');
				me.update();
			});

			$('html').keypress(function(event) {
				switch(event.charCode) {
					case 113: //q
						me.changeLightness(5);
						break;
					case 119: //w
						me.changeLightness(-5);
						break;
					case 97: //a
						me.changeSaturation(5);
						break;
					case 115: //s
						me.changeSaturation(-5);
						break;
					case 116: //t
						me.toggleIntervalView();
						break;
					case 43: //plus (+)
						me.hstep += 1;
						break;
					case 45: //minus (-)
						me.hstep -= 1;
						break;
					case 48: //null (0)
						me.hstep = 1;
						break;
					case 114: //r
						if(me.intervalView == true) {
							me.toggleIntervalEnabled();
						} else {
							me.toggleInterval();
						}
						break;
					default:
						//console.log(["key pressed", event.charCode]);
						break;
				}
 			});
		},

		'handleClick': function() {
			if(this.intervalView == true) {
				this.toggleIntervalEnabled();
			} else {
				this.setHSL(0);
			}
		},

		'toggleIntervalView': function() {
			this.intervalView = !this.intervalView;
			this.update();
		},

		'toggleIntervalEnabled': function() {
			this.intervalEnabled = !this.intervalEnabled;
			this.update();
		},

		'toggleInterval': function() {
			var me = this;
			if(this.interval === null) {
				if(this.intervalEnabled == true) {
					this.interval = window.setInterval(function(vCallback, nDelay) {
						me.adaptFromEnvironment();
					}, 50);
				}
			} else {
				window.clearInterval(this.interval);
				this.interval = null;
			}
			this.update();
		},

		'adaptFromEnvironment': function() {
			this.changeHue(this.hstep);
			//maybe get hsl from top and left
			//calculate and set new hsl to self.
		},

		'setHSL': function(h,s,l) {
			this.h = (h !== undefined && h !== null) ? h : this.h;
			this.s = (s !== undefined && s !== null) ? s : this.s;
			this.l = (l !== undefined && l !== null) ? l: this.l;
			this.update();
		},

		'getHSLForCSS': function(h, s, l) {
			h = h % 360;
			if(s < 0) s = 0;
			if(s > 100) s = 100;
			if(l < 0) l = 0;
			if(l > 100) l = 100;

			return 'hsl(' + h + ', ' + s + '%, '+ l + '%)';
		},

		'changeHue': function(step) {
			this.h += step;
			this.update();
		},

		'changeSaturation': function(step) {
			this.s += step;
			this.update();
		},

		'changeLightness': function(step) {
			this.l += step;
			this.update();
		},

		'validate': function() {
			this.h = this.h % 360;
			if(this.s < 0) this.s = 0;
			if(this.s > 100) this.s = 100;
			if(this.l < 0) this.l = 0;
			if(this.l > 100) this.l = 100;
		},

		'update': function() {
			this.validate();

			//fetch values
			h = this.h;
			s = this.s;
			l = this.l;

			if(this.intervalView == true) {
				if(this.intervalEnabled == true) {
					l = 85;
				} else {
					l = 15;
				}
				h = 240;
				s = 50;
			}

			if($(this.id).hasClass('square-selected')) l += 25;
			$(this.id).css('background-color', this.getHSLForCSS(h,s,l));
			//$(this.id).css('border-color', this.getHSLForCSS(h,s,85));
			$(this.id).css('-webkit-box-shadow', '0px 0px 20px 15px ' + this.getHSLForCSS(h,s,l));
			$(this.id).css('box-shadow', '0px 0px 20px 15px ' + this.getHSLForCSS(h,s,l));

		}
	};

	newSquare.init();

	return newSquare;
};

var squares = {};
var amountOfSquares = 49;

$(document).ready(function() {
	for(var i = 1; i <= amountOfSquares; i++) {
		id = 'square-' + i;
		$('#squarecontainer').html($('#squarecontainer').html() + '<span class="square" id="'+id+'">'+'</span>');
	}

	//DOM must be ready before making the squares work.
	for(var i = 1; i <= amountOfSquares; i++) {
		id = 'square-' + i;
		newSquare = new square('#' + id);
		squares[id] = newSquare;
	}
});