[TASK] Initial import.

.gitignore

@@ -0,0 +1,2 @@
+.project
+.settings

index.html

@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Colorsquareproject</title>
+		<meta charset="UTF-8" />
+		<link rel="stylesheet" type="text/css" href="style.css" />
+		<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
+		<script type="text/javascript" src="js/init.js"></script>
+	</head>
+	<body>
+		<h1>Ein kleines Feld bunter Kästchen.</h1>
+		<h3>Was auch sonst?... na los, spiel schon damit. :-)</h3>
+		<div id="controlbox">
+			<h1>Tastenbefehle</h1>
+			<h2>Normaler Modus</h2>
+			<dl>
+				<dt>R</dt>
+				<dd>Schaltet Farbanimation ein/aus</dd>
+				<dt>Q</dt>
+				<dd>Lightness erhöhen</dd>
+				<dt>W</dt>
+				<dd>Lightness verringern</dd>
+				<dt>A</dt>
+				<dd>Saturation erhöhen</dd>
+				<dt>S</dt>
+				<dd>Saturation verringern</dd>
+				<dt>+</dt>
+				<dd>Animationsgeschwindigkeit +1</dd>
+				<dt>0 (null)</dt>
+				<dd>Animationsgeschwindigkeit = 1</dd>
+				<dt>-</dt>
+				<dd>Animationsgeschwindigkeit -1</dd>
+				<dt>Linksklick</dt>
+				<dd>Setzt Kästchen auf Rot</dd>
+				<dt>T</dt>
+				<dd>Zum "toggleInterval" Modus</dd>
+			</dl>
+			<hr />
+			<h2>"toggleInterval" Modus</h2>
+			<dl>
+				<dt>T</dt>
+				<dd>Zum normalen Modus</dd>
+				<dt>Linksklick</dt>
+				<dd>Schaltet Farbveränderung für dieses Kästchen ein (hell) oder aus (dunkel)</dd>
+			</dl>
+		</div>
+		<div id="squarecontainer"></div>
+	</body>
+</html>

js/init.js

@@ -0,0 +1,200 @@
+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;
+	}
+});

js/jquery-1.8.3.min.js

@@ -0,0 +1,2 @@
+/*! jQuery v1.8.3 jquery.com | jquery.org/license */
+(function(e,t){function _(e){var t=M[e]={};return v.each(e.split(y),function(e,n){t[n]=!0}),t}function H(e,n,r){if(r===t&&e.nodeType===1){var i="data-"+n.replace(P,"-$1").toLowerCase();r=e.getAttribute(i);if(typeof r=="string"){try{r=r==="true"?!0:r==="false"?!1:r==="null"?null:+r+""===r?+r:D.test(r)?v.parseJSON(r):r}catch(s){}v.data(e,n,r)}else r=t}return r}function B(e){var t;for(t in e){if(t==="data"&&v.isEmptyObject(e[t]))continue;if(t!=="toJSON")return!1}return!0}function et(){return!1}function tt(){return!0}function ut(e){return!e||!e.parentNode||e.parentNode.nodeType===11}function at(e,t){do e=e[t];while(e&&e.nodeType!==1);return e}function ft(e,t,n){t=t||0;if(v.isFunction(t))return v.grep(e,function(e,r){var i=!!t.call(e,r,e);return i===n});if(t.nodeType)return v.grep(e,function(e,r){return e===t===n});if(typeof t=="string"){var r=v.grep(e,function(e){return e.nodeType===1});if(it.test(t))return v.filter(t,r,!n);t=v.filter(t,r)}return v.grep(e,function(e,r){return v.inArray(e,t)>=0===n})}function lt(e){var t=ct.split("|"),n=e.createDocumentFragment();if(n.createElement)while(t.length)n.createElement(t.pop());return n}function Lt(e,t){return e.getElementsByTagName(t)[0]||e.appendChild(e.ownerDocument.createElement(t))}function At(e,t){if(t.nodeType!==1||!v.hasData(e))return;var n,r,i,s=v._data(e),o=v._data(t,s),u=s.events;if(u){delete o.handle,o.events={};for(n in u)for(r=0,i=u[n].length;r<i;r++)v.event.add(t,n,u[n][r])}o.data&&(o.data=v.extend({},o.data))}function Ot(e,t){var n;if(t.nodeType!==1)return;t.clearAttributes&&t.clearAttributes(),t.mergeAttributes&&t.mergeAttributes(e),n=t.nodeName.toLowerCase(),n==="object"?(t.parentNode&&(t.outerHTML=e.outerHTML),v.support.html5Clone&&e.innerHTML&&!v.trim(t.innerHTML)&&(t.innerHTML=e.innerHTML)):n==="input"&&Et.test(e.type)?(t.defaultChecked=t.checked=e.checked,t.value!==e.value&&(t.value=e.value)):n==="option"?t.selected=e.defaultSelected:n==="input"||n==="textarea"?t.defaultValue=e.defaultValue:n==="script"&&t.text!==e.text&&(t.text=e.text),t.removeAttribute(v.expando)}function Mt(e){return typeof e.getElementsByTagName!="undefined"?e.getElementsByTagName("*"):typeof e.querySelectorAll!="undefined"?e.querySelectorAll("*"):[]}function _t(e){Et.test(e.type)&&(e.defaultChecked=e.checked)}function Qt(e,t){if(t in e)return t;var n=t.charAt(0).toUpperCase()+t.slice(1),r=t,i=Jt.length;while(i--){t=Jt[i]+n;if(t in e)return t}return r}function Gt(e,t){return e=t||e,v.css(e,"display")==="none"||!v.contains(e.ownerDocument,e)}function Yt(e,t){var n,r,i=[],s=0,o=e.length;for(;s<o;s++){n=e[s];if(!n.style)continue;i[s]=v._data(n,"olddisplay"),t?(!i[s]&&n.style.display==="none"&&(n.style.display=""),n.style.display===""&&Gt(n)&&(i[s]=v._data(n,"olddisplay",nn(n.nodeName)))):(r=Dt(n,"display"),!i[s]&&r!=="none"&&v._data(n,"olddisplay",r))}for(s=0;s<o;s++){n=e[s];if(!n.style)continue;if(!t||n.style.display==="none"||n.style.display==="")n.style.display=t?i[s]||"":"none"}return e}function Zt(e,t,n){var r=Rt.exec(t);return r?Math.max(0,r[1]-(n||0))+(r[2]||"px"):t}function en(e,t,n,r){var i=n===(r?"border":"content")?4:t==="width"?1:0,s=0;for(;i<4;i+=2)n==="margin"&&(s+=v.css(e,n+$t[i],!0)),r?(n==="content"&&(s-=parseFloat(Dt(e,"padding"+$t[i]))||0),n!=="margin"&&(s-=parseFloat(Dt(e,"border"+$t[i]+"Width"))||0)):(s+=parseFloat(Dt(e,"padding"+$t[i]))||0,n!=="padding"&&(s+=parseFloat(Dt(e,"border"+$t[i]+"Width"))||0));return s}function tn(e,t,n){var r=t==="width"?e.offsetWidth:e.offsetHeight,i=!0,s=v.support.boxSizing&&v.css(e,"boxSizing")==="border-box";if(r<=0||r==null){r=Dt(e,t);if(r<0||r==null)r=e.style[t];if(Ut.test(r))return r;i=s&&(v.support.boxSizingReliable||r===e.style[t]),r=parseFloat(r)||0}return r+en(e,t,n||(s?"border":"content"),i)+"px"}function nn(e){if(Wt[e])return Wt[e];var t=v("<"+e+">").appendTo(i.body),n=t.css("display");t.remove();if(n==="none"||n===""){Pt=i.body.appendChild(Pt||v.extend(i.createElement("iframe"),{frameBorder:0,width:0,height:0}));if(!Ht||!Pt.createElement)Ht=(Pt.contentWindow||Pt.contentDocument).document,Ht.write("<!doctype html><html><body>"),Ht.close();t=Ht.body.appendChild(Ht.createElement(e)),n=Dt(t,"display"),i.body.removeChild(Pt)}return Wt[e]=n,n}function fn(e,t,n,r){var i;if(v.isArray(t))v.each(t,function(t,i){n||sn.test(e)?r(e,i):fn(e+"["+(typeof i=="object"?t:"")+"]",i,n,r)});else if(!n&&v.type(t)==="object")for(i in t)fn(e+"["+i+"]",t[i],n,r);else r(e,t)}function Cn(e){return function(t,n){typeof t!="string"&&(n=t,t="*");var r,i,s,o=t.toLowerCase().split(y),u=0,a=o.length;if(v.isFunction(n))for(;u<a;u++)r=o[u],s=/^\+/.test(r),s&&(r=r.substr(1)||"*"),i=e[r]=e[r]||[],i[s?"unshift":"push"](n)}}function kn(e,n,r,i,s,o){s=s||n.dataTypes[0],o=o||{},o[s]=!0;var u,a=e[s],f=0,l=a?a.length:0,c=e===Sn;for(;f<l&&(c||!u);f++)u=a[f](n,r,i),typeof u=="string"&&(!c||o[u]?u=t:(n.dataTypes.unshift(u),u=kn(e,n,r,i,u,o)));return(c||!u)&&!o["*"]&&(u=kn(e,n,r,i,"*",o)),u}function Ln(e,n){var r,i,s=v.ajaxSettings.flatOptions||{};for(r in n)n[r]Line truncated

style.css

@@ -0,0 +1,49 @@
+body h1, body h3 {
+	text-align: center;
+}
+
+html, body {
+	padding: 0px;
+	margin:	0px;
+	background-color: hsl(0, 0%, 0%);
+	color: hsl(0, 0%, 100%);
+	font-size: 10pt;
+}
+
+.square {
+	width: 50px;
+	height: 50px;
+	float: left;
+	padding: 0px;
+	margin: 16px;
+	text-align: center;
+	border: 1px solid transparent;
+}
+
+.square-selected {
+	border: 1px solid hsl(0, 0%, 100%);
+	width: 50px;
+	height: 50px;
+}
+
+#squarecontainer {
+	height: 588px;
+	width: 588px;
+	margin: 50px auto 0px auto;
+	padding: 10px;
+	border: 2px solid hsl(0, 0%, 10%);
+}
+
+#controlbox hr {
+	border: none;
+	height: 1px;
+	background-color: hsl(0, 0%, 85%);
+}
+
+#controlbox {
+	border: 2px solid hsl(0, 0%, 10%);
+	color: hsl(0, 0%, 90%);
+	width: 250px;
+	float: left;
+	padding: 5px;
+}