the great cleanup, the legend continues

11 files changed, 313 insertions, 921 deletions

diff --git a/share/frontend/im/colors/iframe.js b/share/frontend/im/colors/iframe.js
deleted file mode 100644
index 4b7d2ac..0000000
--- a/share/frontend/im/colors/iframe.js
+++ /dev/null
@@ -1,25 +0,0 @@
-$("#lnkcolorbox").click(function() {
-	$.fancybox.open({
-		href : 'colors.htm',
-		width  : 700,           // set the width
-		height : 610,
-		fitToView : true,
-		autoDimensions:false,
-		autoSize:false,
-		type : 'iframe',
-		closeBtn  : false,
-		padding : 5,
-		beforeShow : function(){					
-			$('.fancybox-iframe').contents().find('#submitvalue').click(function(){
-				$('.fancybox-iframe').contents().find('form').submit();						
-				$.fancybox.close();
-			});					
-		},				
-		beforeClose : function(){
-			x = $('.fancybox-iframe').contents().find('#namespace').val();
-		},
-		afterClose: function(){
-			$('#img-hue').val(x);
-		}
-	});
-});
diff --git a/share/frontend/im/colors/images/Thumbs.db b/share/frontend/im/colors/images/Thumbs.db
deleted file mode 100644
index ec01f6a..0000000
--- a/share/frontend/im/colors/images/Thumbs.db
+++ /dev/null
diff --git a/share/frontend/im/colors/js/ancient.js b/share/frontend/im/colors/js/ancient.js
deleted file mode 100644
index 5bf15c0..0000000
--- a/share/frontend/im/colors/js/ancient.js
+++ /dev/null
@@ -1,528 +0,0 @@
-var old = {};

-var colorsheight;

-var colorswidth;

-var widthratio = 7;

-var numberacross = 10;

-var backgroundstate = 2;

-var infostate = 0;

-var names = true;

-var hexes = false;

-var rgbs = false;

-var favshow = false;

-var selectedname = "";

-var selectedrgb;

-var curfavcolor = "";

-var curfavcolorId = "";

-var separate = ';';

-//---------element objects----------

-var transbutton = $('#transbutton');

-var submitvalue = $('#submitvalue');

-var addfav = $('#addfavlist');

-var openfav = $('#openfavlist');

-var preview = $('#preview');

-var colornames = $('#colornames');

-var namespace = $('#namespace');

-var extra = $('#extra');

-var container = $('#container');

-var switches = $('#switches');

-var transparent = $('#transparent');

-var infospace = $('#infospace');

-var infoswitch = $('#infoswitch');

-var backgroundswitch = $('#backgroundswitch');

-var bg_menu = $('#bg_menu');

-var vasebackground = $('#vasebackground');

-var hexswitch = $('#hexswitch');

-var favpanel = $('#favpanel');

-var orgheight = 0;

-var bscroll = false;

-//----------------------------------

-$(function(){

-	ColorPicker.show();

-});

-

-function selectfavColor(selcolor, id)

-{	

-	addfav.html('Remove from Favorites');

-	curfavcolor = selcolor;

-	curfavcolorId = id;

-	var rgbregex = /rgb\((\d{1,3}), (\d{1,3}), (\d{1,3})\)/;

-	var hexregex = /^#(?:[0-9a-f]{3}){1,2}$/i;

-	hexes = false;

-	names = false;

-	rgbs = false;

-	var match = rgbregex.exec(selcolor);

-	if (match != null) {

-		selectedname = rgbtoname[selcolor];

-		selectedrgb = selcolor;

-		hexes = true;

-		hexswitch.html('CLICK TO SWITCH TO HEX VALUES');

-	} else if((match = hexregex.exec(selcolor))!= null) {		

-		names = true;			

-		selectedrgb = hextorgb[selcolor];

-		selectedname = rgbtoname[selectedrgb];

-		hexswitch.html('CLICK TO SWITCH TO COLOR NAMES');

-	} else {

-		selectedname = selcolor;

-		selectedrgb = hextorgb[nametohex[selectedname]];

-		hexswitch.html('CLICK TO SWITCH TO RGB VALUES');

-		rgbs = true;	

-	}

-	colornames.html(selcolor);

-	namespace.val(selcolor);

-	preview.css({'background-color':selectedrgb,'border-style':'none'});

-	vasebackground.css('background-color',selectedrgb);

-}

-

-var ColorPicker = {	

-	GoldenFuncs: {

-		regolden: function(num) {

-		  ratio = (1+Math.sqrt(5))/2;

-		  newnum = Math.round(num/ratio);

-		  return newnum;

-		},

-		goldenize: function(num) {

-		  ratio = (1+Math.sqrt(5))/2;

-		  newnum = Math.round(num*ratio);

-		  return newnum;

-		},		

-		getproperty: function(idandselectr, propertystr) {

-		  //turns css property width or height into an integer value

-		  grab = $(idandselectr).css(propertystr);

-		  grab = grab.slice(0,-2);

-		  numval = parseInt(grab);

-		  return numval;

-		},

-		makegolden: function(idandselectr, propertystr) {

-		  result = ColorPicker.GoldenFuncs.getproperty(idandselectr, propertystr);

-		  newval = ColorPicker.GoldenFuncs.goldenize(result) + 60;

-		  propval = newval.toString()+'px';

-		  if(propertystr == 'height') {

-			  $(idandselectr).css('width', propval);

-		  }else if(propertystr == 'width') {

-			  $(idandselectr).css('height', propval);

-		  }

-		}

-	},

-	Events: {		

-		addEventListener: function(){

-			//--------event handler of transparent button-------

-			transbutton.click(function() {			

-				namespace.val('transparent');

-				preview.css({'background-color':'transparent','border-style':'dashed','border-width':'2px'});

-				colornames.html('transparent');

-				colornames.fadeOut(100);

-				colornames.fadeIn(500);

-				extra.html('<br><br><span style="color:red;background-color:black;border-color:red; border-width:1px; border-style:solid; font-size:14px;">note: the .jpg image format does not support transparency</span>');

-			});

-			transbutton.hover(function(){ transbutton.addClass('hovertrans')},

-							  function(){ transbutton.attr('class','defaulttrans')});

-			submitvalue.hover(function(){ submitvalue.addClass('hovertrans')},

-							  function(){ submitvalue.attr('class','defaulttrans')});

-			addfav.hover(function(){ addfav.addClass('hovertrans')},

-							  function(){ addfav.attr('class','defaulttrans')});					

-			$('.bgOptions').click(function(){

-				if (this.id == "bg1")

-				{

-					$('#colorpicker').css({'background-image':'url("./images/bg.dither.gif")','background-color':'gray','background-color':'black'});

-				}else if(this.id == "bg5"){

-					$('#' + this.id).bind('keypress', function(event){

-						var key = event.which || event.keyCode;

-						if(key === 13) {							

-							$('#colorpicker').css({'background-image':"url('" + $('#bgURI').val() + "')"});	

-							$('#opt_bgURI').val($('#bgURI').val());

-							$('#bgURI').val('');

-						}

-					}); 					

-				}else{

-					$('#colorpicker').css({'background-image':'none','background-color':$('#' + this.id).html().toLowerCase()});

-				}

-				$('#opt_bgColor').val(this.id);

-			});

-			//--------event handler over colorpanel-------

-			var firstwidth;

-			$('.colors').mouseover(function() {

-				extra.html("");

-				if(this.id != 'd0') {

-					$(this).css({'height':ColorPicker.GoldenFuncs.goldenize(colorsheight),

-						         'width':ColorPicker.GoldenFuncs.goldenize(colorswidth)});

-					firstwidth = container.css('width');	

-					newwidth = firstwidth+ColorPicker.GoldenFuncs.goldenize(colorswidth)-colorswidth;

-					container.css('width',newwidth);			

-				}

-			});

-			$('.colors').mouseout(function() {

-				$(this).css('height',colorsheight)

-				$(this).css('width', colorswidth)

-				container.css('width',firstwidth)      

-			});

-			$('.colors').hover(function() {

-				var stringvalue = 'CLICK TO CHOOSE THE COLOR';

-				colornames.fadeOut(100);

-				colornames.fadeIn(500);

-				stringvalue = ColorPicker.showcolorname(this.id);

-				colornames.html(stringvalue);

-			});

-			$('.colors').click(function() {

-				selectednameid = $(this).attr('id')

-				selectedname = divtoname['#'+selectednameid];

-				selectedrgb = $(this).css('background-color');

-				ColorPicker.putitin();

-			});

-			//-------------others handler-------------------------------

-			infoswitch.hover(function(){infospace.show()}, function(){infospace.hide('slow')} );

-			infoswitch.click(function(){ColorPicker.switchcolorinfo()});

-			backgroundswitch.clicked = false;

-					backgroundswitch.click(function(){

-				if (! backgroundswitch.clicked){

-				  bg_menu.slideDown("fast", function(){

-					backgroundswitch.clicked = true;

-					backgroundswitch.addClass("switches_depressed");

-				  });

-				}else{

-				  bg_menu.slideUp("fast", function(){

-					backgroundswitch.clicked = false;

-					backgroundswitch.removeClass("switches_depressed");

-				  })

-				}

-			});

-			addfav.click(function(){ColorPicker.addfavourites()});

-			openfav.click(function(){ColorPicker.openfavourites()});

-			hexswitch.click(function(){ColorPicker.hexcolorswitch()});

-			$('.theswitches').hover(function(){ ColorPicker.switchhovercss(this.id, 'over') }, 

-									function(){ ColorPicker.switchhovercss(this.id, 'out') });

-			//-------handler for window resive----

-			$(window).resize(function()

-			{

-				ColorPicker.setupdimensions();

-			});			

-		}

-	},

-	getcolorfromfavorite: function(fvalue){

-		var rgbregex = /rgb\((\d{1,3}), (\d{1,3}), (\d{1,3})\)/;

-		var hexregex = /^#(?:[0-9a-f]{3}){1,2}$/i;

-		var retcolor = '';

-		var match = rgbregex.exec(fvalue);

-		if (match != null) {

-			retcolor = fvalue;

-		} else if((match = hexregex.exec(fvalue))!= null) {		

-			retcolor = hextorgb[fvalue];			

-		} else {

-			retcolor = hextorgb[nametohex[fvalue]];

-		}

-		return retcolor;

-	},

-	initfavpanel: function(){

-		var fcolors = $('#favcolors').val();

-		var clist=fcolors.split(separate);

-		for(var i=0; i < clist.length; i++) {

-			if (clist[i] != '')

-			{

-				var colname = clist[i];				

-				favpanel.append('<span class="favcolor" id="favcol' + i + '" ><input name="favcolor" type="radio"  onclick="selectfavColor(\'' + clist[i] 

-					+ '\',\'favcol' + i +'\');"><label>' + colname +  '</label><span class="favcolorbox" style="background-color:' + ColorPicker.getcolorfromfavorite(clist[i]) + '">&nbsp;</span></span>');				

-			}			

-		}

-	},

-	existsfavcolor: function(fcolor) {

-		var fcolors = $('#favcolors').val();

-		var clist=fcolors.split(separate);

-		for(var i=0; i < clist.length; i++) {

-			if (clist[i] == fcolor)

-			{

-				return i;

-			}

-		}

-		return -1;

-	},

-	setpaneldimension: function(){

-		var fcolors = $('#favcolors').val();	

-		var clist=fcolors.split(separate);

-	},

-	addfavourites: function() {

-		var fcolors = $('#favcolors').val();

-		

-		if (curfavcolor != '') {

-			var clist=fcolors.split(separate);

-			var index = ColorPicker.existsfavcolor(curfavcolor);

-			if(index != 0 && index == clist.length - 1)

-			{

-				fcolors = fcolors.replace(separate + curfavcolor, '');

-			}else if(clist.length == 1) {

-				fcolors = fcolors.replace(curfavcolor, '');

-			}else{

-				fcolors = fcolors.replace(curfavcolor+ separate, '');

-			}

-			$('#' + curfavcolorId).remove();

-			addfav.html('Add to Favorites');

-			curfavcolor = "";

-			curfavcolorId = "";

-			$('#favnone').attr('checked','checked');

-			if (fcolors == '')

-			{

-				favpanel.hide();

-				favshow = false;

-				openfav.attr('class','defaulttrans');

-			}

-		}else {

-			if (ColorPicker.existsfavcolor(namespace.val()) == -1)

-			{				

-				if (fcolors.length > 0) {

-					fcolors = fcolors + separate + namespace.val();

-				}else {

-					fcolors = namespace.val();

-				}				

-				var colname = namespace.val();

-				var clist=fcolors.split(separate);

-				var id = clist.length - 1;

-				$('#favmsg').remove();

-				favpanel.append('<span class="favcolor" id="favcol' + id + '" ><input name="favcolor" type="radio" onclick="selectfavColor(\'' + namespace.val() 

-					+ '\',\'favcol' + id +'\');"><label>' + colname +  '</label><span class="favcolorbox" style="background-color:' + ColorPicker.getcolorfromfavorite(namespace.val()) + '">&nbsp;</span></span>');

-			}

-		}

-		$('#favcolors').val(fcolors);		

-		ColorPicker.setpaneldimension();

-	},

-	openfavourites: function() {

-		if (favshow) {

-			favpanel.hide();

-			openfav.attr('class','defaulttrans');

-			favshow = false;

-			$('#favmsg').remove();

-			bscroll = false;

-		}else {

-			favpanel.show();

-			openfav.addClass('hovertrans');

-			favshow = true;

-			var fcolors = $('#favcolors').val();

-			if(fcolors == '') {

-				favpanel.append('<span class="favmsg" id="favmsg">No favourite colors.</span>');

-			}

-			bscroll = true;

-			ColorPicker.setpaneldimension();

-		}

-		addfav.html('Add to Favorites');

-		curfavcolor = "";

-		curfavcolorId = "";

-		$('.favcolor input[type=radio]').attr('checked',false);				

-	},

-	loadColorStorage: function() {

-		var opts = $('#opt_hexswitch').val();

-		names = false;

-		rgbs = false;

-		hexes = false;

-		if(opts == 'names') {

-			selectedname = namespace.val();

-			selectedrgb = hextorgb[nametohex[selectedname]];

-			hexswitch.html('CLICK TO SWITCH TO RGB VALUES');

-			rgbs = true;

-		}else if(opts == 'rgbs') {

-			selectedname = rgbtoname[namespace.val()];

-			selectedrgb = namespace.val();

-			hexes = true;

-			hexswitch.html('CLICK TO SWITCH TO HEX VALUES')

-		}else if(opts == 'hexes') {

-			names = true;			

-			selectedrgb = hextorgb[namespace.val()];

-			selectedname = rgbtoname[selectedrgb];

-			hexswitch.html('CLICK TO SWITCH TO COLOR NAMES');

-		}		

-		colornames.html(selectedname);

-		preview.css({'background-color':selectedrgb,'border-style':'none'});

-		vasebackground.css('background-color',selectedrgb);

-		infostate = parseInt($('#opt_infoswitch').val());

-		ColorPicker.switchcolorinfo();

-		var bgOpt = $('#opt_bgColor').val();	

-		if (bgOpt == "bg1")

-		{

-			$('#colorpicker').css({'background-image':'url("./images/bg.dither.gif")','background-color':'gray','background-color':'black'});

-		}else if(bgOpt == "bg5"){

-			$('#colorpicker').css({'background-image':"url('" + $('#opt_bgURI').val() + "')"});					

-		}else{

-			$('#colorpicker').css({'background-image':'none','background-color':$('#' + bgOpt).html()});

-		}

-		$('#bgURI').val($('#opt_bgURI').val());

-		ColorPicker.initfavpanel();

-	},

-	switchhovercss: function(sel, uno) {

-		var chng = {};

-		chng['color'] = 'white';

-		chng['text-shadow'] = 'black 1px 2px';

-		chng['background-image'] = "url('./images/hoverbackground.jpg')";

-		if(uno == 'over') {

-			for(var key in chng) {

-				old[key] = $('#'+sel).css(key);

-			}

-			for(var key in chng){

-				$('#'+sel).css(key, chng[key]);

-			}

-		}else if(uno == 'out') {

-			for(var key in old){

-				$('#'+sel).css(key, old[key]);

-			}

-		}

-	},

-	showcolorname: function(divstr) {

-		var rgb = $('#'+divstr).css('background-color');

-		var colorname = divtoname['#'+divstr];   

-		var imname = colorname;

-		if (hexes === true) {

-			imname = rgb;

-        }else if(rgbs === true) {

-			imname = colorname;

-		}else if (names === true) {

-			imname = rgbtohex[rgb];

-		}

-		return imname;

-	},

-	hexcolorswitch: function() {

-		if(names == true) {

-			hexes = false;

-			rgbs = false;

-			hexswitch.html('CLICK TO SWITCH TO RGB VALUES');

-			namespace.val(selectedname);

-			names = false;

-			rgbs = true;

-			$('#opt_hexswitch').val('names');

-		}else if(hexes == true) {

-			rgbs = false;

-			names = false;

-			hexswitch.html('CLICK TO SWITCH TO COLOR NAMES');

-			namespace.val(rgbtohex[selectedrgb]);

-			hexes = false;

-			names = true;

-			$('#opt_hexswitch').val('hexes');

-        }else if(rgbs == true) {

-			names = false;

-			hexes = false;

-			hexswitch.html('CLICK TO SWITCH TO HEX VALUES')

-			namespace.val(selectedrgb)

-			rgbs = false;

-			hexes = true;

-			$('#opt_hexswitch').val('rgbs');

-		}

-    },

-	putitin: function() {

-		if (rgbs === true) { thecolor = selectedname; }

-		if (hexes === true) { thecolor = selectedrgb; }

-		if (names === true) { thecolor = rgbtohex[selectedrgb]; }

-		namespace.val(thecolor);

-		preview.css({'background-color':selectedrgb,'border-style':'none'});

-		vasebackground.css('background-color',selectedrgb);

-    },

-	getcontainerwidth: function () {

-		basis = $('.colors').css('width');

-		basis = parseInt(basis.slice(0,-2));

-		secondbasis = '2px';

-		secondbasis = parseInt(secondbasis.slice(0,-2));

-		widthval = (secondbasis*(numberacross*2))+(basis*numberacross)+(basis*.44);//(goldenize(basis)-basis)

-		if (widthval < 406){

-			widthval = 406;

-		}

-		widthval = widthval.toString()+'px';

-		return widthval;

-	},

-	shrinkwidth: function(arg, ratio) {

-		for(var i=0; i < ratio; i++) {

-			arg = ColorPicker.GoldenFuncs.regolden(arg);

-		}

-		division = Math.round(arg);

-		return division;

-	},

-	setupfonts: function () {

-		fontratioone = ColorPicker.shrinkwidth(windowWidth, 9);

-		$('.theswitches').css('font-size',fontratioone);

-		fontratiotwo = ColorPicker.shrinkwidth(windowWidth, 8);

-		$('.subtitle').css('font-size',fontratiotwo);

-		colornames.css('font-size', ColorPicker.GoldenFuncs.goldenize(fontratiotwo)+'px');

-		colornames.css('text-shadow', 'black 1px 2px');

-		var transfont = ColorPicker.GoldenFuncs.regolden(fontratioone);

-		$('.smalltitle').css({'width':'100%','font-size':fontratioone});

-	},

-	setupsides: function() {

-		container.css({'position':'relative','z-index':'1'});

-		switches.css('z-index','10');

-		var basis = container.css('width');

-		basis = parseInt(basis.slice(0,-2));

-		remainder = (100-basis)/2;

-		widths = ColorPicker.GoldenFuncs.regolden(basis);

-		widths = widths.toString()+'px';

-		lateralbasis = ColorPicker.GoldenFuncs.regolden(remainder);

-		leftside = toString(lateralbasis)+'%';

-		rightside = toString(100-lateralbasis)+'%';

-		colornames.css('left', leftside);

-		switches.css({'width': widths, 'left': rightside});

-    },

-	previewdimensions: function() {

-		first = switches.css('width');

-		first = parseInt(first.slice(0,-2));

-		width = ColorPicker.GoldenFuncs.regolden(first);

-		height = ColorPicker.GoldenFuncs.regolden(width);

-		width = width.toString()+'px';

-		height = height.toString()+'px';

-		preview.css({'width':width, 'height':height});

-    },

-	setupdimensions: function() {

-		if(window.innerWidth > 933) {

-			windowWidth = window.innerWidth

-		}else{ windowWidth = 933 }

-		colorswidth = ColorPicker.shrinkwidth(windowWidth, widthratio);

-		$('.colors').css('width', colorswidth.toString()+'px');

-		colorsheight = ColorPicker.GoldenFuncs.regolden(colorswidth);

-		propval = colorsheight.toString()+'px';

-		$('.colors').css('height', propval);

-		var containerwidth = ColorPicker.getcontainerwidth();

-		container.css('width',containerwidth);

-		

-		ColorPicker.setupfonts();

-		ColorPicker.setupsides();

-		ColorPicker.GoldenFuncs.makegolden('#' + switches.attr('id'),'width');

-		ColorPicker.previewdimensions();

-		transparent.css({'float':'bottom','width':'inherit'});

-		orgheight = switches.height();

-	},

-	switchcolorinfo: function() {

-		if(infostate == 1) {

-			for(var i=0; i < color_values.length; i++) {

-				$('#d' + i).html(divtoname['#d' + i]);

-			}

-			infostate = 2;

-			infospace.html('(NAMES)');

-			$('#opt_infoswitch').val('1');

-		}else if(infostate == 0) {

-			$('.colors').html("");			

-			infostate = 1;

-			infospace.html('(NONE)');

-			$('#opt_infoswitch').val('0');

-		}else if(infostate == 2) {

-			for(var i=0; i < color_values.length; i++) {

-				$('#d' + i).html(nametohex[divtoname['#d' + i]]);

-			}

-			infostate = 3;

-			infospace.html('(HEXES)');

-			$('#opt_infoswitch').val('2');

-		}else if(infostate == 3) {

-			for(var i=0; i < color_values.length; i++) {

-				$('#d' + i).html(hextorgb[nametohex[divtoname['#d' + i]]]);		

-			}

-			infostate = 0;			

-			infospace.html('(RGBS)');

-			$('#opt_infoswitch').val('3');

-		}		

-	},

-	show: function() {

-		//-------create color panel--------

-		for (i=1; i < color_values.length ; i++)

-		{

-			$('#d0').attr('style','background-color:' + color_values[0]);

-			var colorbox = $('#d0').clone();

-			colorbox.attr('id','d' + i);

-			colorbox.attr('style','background-color:' + color_values[i]);

-			container.append(colorbox);

-		}

-		//--------initialize------------

-		ColorPicker.setupdimensions();

-		ColorPicker.switchcolorinfo();

-		ColorPicker.hexcolorswitch();

-		ColorPicker.Events.addEventListener();

-	},

-}

diff --git a/share/frontend/im/css/style.css b/share/frontend/im/css/style.css
new file mode 100644
index 0000000..3f0e597
--- /dev/null
+++ b/share/frontend/im/css/style.css
@@ -0,0 +1,170 @@
+*
+	{
+	padding: 0;
+	margin: 0;
+	font-family: sans-serif;
+	}
+body
+	{
+	background-color: #efedee;
+	// background-color: #838388;
+	color: #555;
+	}
+#down_for_maintenance{
+  position: absolute;
+  background: url("http://asdf.us/impattern/patterns/38.png");
+  z-index:2000;
+  height: 100%;
+  width: 100%;
+  top: 0;
+  left:0;
+  display: none;
+}
+#down_for_maintenance > span{
+  background: white;
+}
+#controls,#result
+	{
+	display: inline-block;
+	margin: 10px;
+	width: 430px;
+	float: left;
+	}
+#controls
+	{
+	font-size: 14px;
+	top: 0; left: 0;
+	z-index: 5;
+	}
+#result
+	{
+	background-color: #d6d0d0;
+//	background-color: #131412;
+	margin-left: 20px;
+	padding: 10px;
+	display: none;
+	z-index: 5;
+	}
+#sendtoinput
+	{
+	font-size: 10px; 
+	}
+#instructions
+	{
+	position: absolute;
+	bottom: 10px;
+	left: 10px;
+	line-height: 18px;
+	z-index: 1;
+	}
+p,form
+	{
+//	background-color: #010101;
+	background-color: #fff;
+	background-position: center center;
+	padding: 10px;
+	font-size: 14px;
+	width: 430px;
+	display: block;
+	}
+#gallery-link
+	{
+	background-color: #fff;
+//	background-image: url(imcupbg.jpg);
+	background-position: center center;
+	position: absolute;
+	top: 10px;
+	right: 10px;
+	padding: 10px;
+	z-index: 10;
+	}
+.error
+	{
+	color: red;
+	font-size: 20px;
+	}
+a
+	{
+//	color: #b4d;
+	color: #a39;
+	font-weight: bold;
+	}
+label
+	{
+	display: inline-block;
+	width: 190px;
+	padding-right: 10px;
+	text-align: right;
+	}
+small
+	{
+	color: #777;
+	}
+input[type=text]
+	{
+	width: 100px;
+	}
+#img-url,#output-url,#img-background
+	{
+	width: 200px;
+	}
+#bgswitcheroo, #colorswitcheroo
+  {
+  width: 19px;
+  height:38px;
+  display: inline-block;
+  position: absolute;
+  background-image: url(http://i.asdf.us/im/7e/user_convo_1353562627_1355449919.png);
+  //background-image: url( http://i.asdf.us/im/7b/user_convo_1353562627.png); 
+  background-repeat:no-repeat;
+  background-position: 3px 10px;
+  cursor: pointer;
+  }
+#img-fuzz,#img-width,#img-height,#img-brightness,#img-saturation,#img-contrast,#img-hue,#img-rotate
+	{
+	width: 50px;
+	text-align: right;
+	}
+button
+	{
+	padding: 2px 5px;
+	font-size: 16px;
+	}
+#result img
+	{
+	max-width: 400px;
+	max-height: 400px;
+	}
+#output-cmd
+	{
+	font-size: 12px;
+	white-space: pre;
+	}
+.shim
+	{
+	height: 10px;
+	clear: both;
+	display: block;
+	}
+#output-url
+	{
+	width: 320px;
+	}
+#likebutton
+	{
+  display: none;
+	position: absolute;
+	bottom: 10px;
+	right: 10px;
+	width: 350px;
+	background-color: #fff;
+//	background-image: url(imcupbg.jpg);
+	padding: 10px;
+	color: #ddd;
+	font-family: trebuchet ms, sans-serif;
+	}
+div#controls, span#userlink {
+  display: none;
+} span#userlink a {
+  text-transform: capitalize;
+}
diff --git a/share/frontend/im/gallery_style.css b/share/frontend/im/gallery_style.css
deleted file mode 100755
index 2d78a0e..0000000
--- a/share/frontend/im/gallery_style.css
+++ /dev/null
@@ -1,51 +0,0 @@
-/**** Isotope Filtering ****/
-
-.isotope-item {
-  z-index: 2;
-}
-
-.isotope-hidden.isotope-item {
-  pointer-events: none;
-  z-index: 1;
-}
-
-/**** Isotope CSS3 transitions ****/
-
-.isotope,
-.isotope .isotope-item {
-  -webkit-transition-duration: 0.3s;
-     -moz-transition-duration: 0.3s;
-      -ms-transition-duration: 0.3s;
-       -o-transition-duration: 0.3s;
-          transition-duration: 0.3s;
-}
-
-
-.isotope {
-  -webkit-transition-property: height, width;
-     -moz-transition-property: height, width;
-      -ms-transition-property: height, width;
-       -o-transition-property: height, width;
-          transition-property: height, width;
-}
-
-.isotope .isotope-item {
-  -webkit-transition-property: -webkit-transform, opacity;
-     -moz-transition-property:    -moz-transform, opacity;
-      -ms-transition-property:     -ms-transform, opacity;
-       -o-transition-property:      -o-transform, opacity;
-          transition-property:         transform, opacity;
-}
-
-/**** disabling Isotope CSS3 transitions ****/
-
-.isotope.no-transition,
-.isotope.no-transition .isotope-item,
-.isotope .isotope-item.no-transition {
-  -webkit-transition-duration: 0s;
-     -moz-transition-duration: 0s;
-      -ms-transition-duration: 0s;
-       -o-transition-duration: 0s;
-          transition-duration: 0s;
-}
-
diff --git a/share/frontend/im/arrow_pointing_left.png b/share/frontend/im/img/arrow_pointing_left.png
index ba1fb53..ba1fb53 100755
--- a/share/frontend/im/arrow_pointing_left.png
+++ b/share/frontend/im/img/arrow_pointing_left.png
diff --git a/share/frontend/im/imcupbg.jpg b/share/frontend/im/img/imcupbg.jpg
index b3cf3f5..b3cf3f5 100755
--- a/share/frontend/im/imcupbg.jpg
+++ b/share/frontend/im/img/imcupbg.jpg
diff --git a/share/frontend/im/new.gif b/share/frontend/im/img/new.gif
index 37c39d2..37c39d2 100755
--- a/share/frontend/im/new.gif
+++ b/share/frontend/im/img/new.gif
diff --git a/share/frontend/im/index.html b/share/frontend/im/index.html
index c19770f..313fe04 100755
--- a/share/frontend/im/index.html
+++ b/share/frontend/im/index.html
@@ -1,4 +1,4 @@
-<!doctype html>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
 <html>
 <head>
 <title>PHOTOBLASTER</title>
@@ -13,179 +13,7 @@
 <!--FOR THE COLORS IFRAME-->
 <link rel="stylesheet" type="text/css" href="/im/colors/css/jquery.fancybox.css?v=2.1.5" media="screen" />
 
-<style type="text/css">
-*
-	{
-	padding: 0;
-	margin: 0;
-	font-family: sans-serif;
-	}
-body
-	{
-	background-color: #efedee;
-	// background-color: #838388;
-	color: #555;
-	}
-#down_for_maintenance{
-  position: absolute;
-  background: url("http://asdf.us/impattern/patterns/38.png");
-  z-index:2000;
-  height: 100%;
-  width: 100%;
-  top: 0;
-  left:0;
-  display: none;
-}
-#down_for_maintenance > span{
-  background: white;
-}
-#controls,#result
-	{
-	display: inline-block;
-	margin: 10px;
-	width: 430px;
-	float: left;
-	}
-#controls
-	{
-	font-size: 14px;
-	top: 0; left: 0;
-	z-index: 5;
-	}
-#result
-	{
-	background-color: #d6d0d0;
-//	background-color: #131412;
-	margin-left: 20px;
-	padding: 10px;
-	display: none;
-	z-index: 5;
-	}
-#sendtoinput
-	{
-	font-size: 10px; 
-	}
-#instructions
-	{
-	position: absolute;
-	bottom: 10px;
-	left: 10px;
-	line-height: 18px;
-	z-index: 1;
-	}
-p,form
-	{
-//	background-color: #010101;
-	background-color: #fff;
-//	background-image: url(imcupbg.jpg);
-	background-position: center center;
-	padding: 10px;
-	font-size: 14px;
-	width: 430px;
-	display: block;
-	}
-#gallery-link
-	{
-	background-color: #fff;
-//	background-image: url(imcupbg.jpg);
-	background-position: center center;
-	position: absolute;
-	top: 10px;
-	right: 10px;
-	padding: 10px;
-	z-index: 10;
-	}
-.error
-	{
-	color: red;
-	font-size: 20px;
-	}
-a
-	{
-//	color: #b4d;
-	color: #a39;
-	font-weight: bold;
-	}
-label
-	{
-	display: inline-block;
-	width: 190px;
-	padding-right: 10px;
-	text-align: right;
-	}
-small
-	{
-	color: #777;
-	}
-input[type=text]
-	{
-	width: 100px;
-	}
-#img-url,#output-url,#img-background
-	{
-	width: 200px;
-	}
-#bgswitcheroo, #colorswitcheroo
-  {
-  width: 19px;
-  height:38px;
-  display: inline-block;
-  position: absolute;
-  background-image: url(http://i.asdf.us/im/7e/user_convo_1353562627_1355449919.png);
-  //background-image: url( http://i.asdf.us/im/7b/user_convo_1353562627.png); 
-  background-repeat:no-repeat;
-  background-position: 3px 10px;
-  cursor: pointer;
-  }
-#img-fuzz,#img-width,#img-height,#img-brightness,#img-saturation,#img-contrast,#img-hue,#img-rotate
-	{
-	width: 50px;
-	text-align: right;
-	}
-button
-	{
-	padding: 2px 5px;
-	font-size: 16px;
-	}
-#result img
-	{
-	max-width: 400px;
-	max-height: 400px;
-	}
-#output-cmd
-	{
-	font-size: 12px;
-	white-space: pre;
-	}
-.shim
-	{
-	height: 10px;
-	clear: both;
-	display: block;
-	}
-#output-url
-	{
-	width: 320px;
-	}
-#likebutton
-	{
-  display: none;
-	position: absolute;
-	bottom: 10px;
-	right: 10px;
-	width: 350px;
-	background-color: #fff;
-//	background-image: url(imcupbg.jpg);
-	padding: 10px;
-	color: #ddd;
-	font-family: trebuchet ms, sans-serif;
-	}
-div#controls, span#userlink {
-  display: none;
-} span#userlink a {
-  text-transform: capitalize;
-}
-</style>
+<link rel="stylesheet" type="text/css" href="css/style.css" />
 
 </head>
 <body>
@@ -372,7 +200,7 @@ div#controls, span#userlink {
 
 	<span class="shim"></span>
 	<p>
-  <img src="new.gif" width="32" height="16" />
+  <img src="img/new.gif" width="32" height="16" />
   Draw color codes &rarr; <a href="/ascii/">Ascii</a> 
 	<span class="shim"></span>
   Mess around with heightmaps and textures &rarr; <a href="/imlandscape">ImLandscape</a> 
@@ -383,7 +211,6 @@ div#controls, span#userlink {
 	<span class="shim"></span>
   Oh now it's on....payback time &rarr; <a href="/imbreak/">FOTO FUCKER</a>
 	<span class="shim"></span>
-  <!--<img src="new.gif" width="32" height="16" />-->
   Transform images in 3D &rarr; <a href="/imgrid/">Grid Generator</a>
 	<span class="shim"></span>
   Gradients make everything better &rarr; <a href="/imgradient/">Gradient Generator</a>
@@ -417,149 +244,10 @@ div#controls, span#userlink {
 -->
 
 <script type="text/javascript" src="/js/jquery.js"></script>
-<script type="text/javascript">
-var Main =
-	{
-	API_HEADER: "#@im",
-	generating: false,
-	enter: function (e)
-		{
-		if (Main.generating)
-			return
-		if (e.keyCode === 13)
-			Main.go()
-		},
-	go: function ()
-		{
-		if (Main.generating)
-			return
-		Main.generating = true
-		$("#output-cmd").html('generating...').show()
-		$("#result").show()
-		var data =
-			{
-			url: $("#img-url").val(),
-			transparent: $('#img-transparent:checked').val() !== undefined ? "true" : "false",
-			flip: $('#img-flip:checked').val() !== undefined ? "true" : "false",
-			flop: $('#img-flop:checked').val() !== undefined ? "true" : "false",
-			nearest: $('#img-nearest:checked').val() !== undefined ? "true" : "false",
-			rotate: $("#img-rotate").val(),
-			subtract: $("#img-subtract").val(),
-			fuzz: $("#img-fuzz").val(),
-			width: $("#img-width").val(),
-			height: $("#img-height").val(),
-			black: $("#img-black").val(),
-			white: $("#img-white").val(),
-			//brightness: $("#img-brightness").val(),
-			//saturation: $("#img-saturation").val(),
-			hue: $("#img-hue").val(),
-			contrast: $("#img-contrast").val(),
-			background: $("#img-background").val(),
-			// merge_early: $('#img-merge_early:checked').val() !== undefined ? "true" : "false",
-			compose: $('#img-compose :selected').text(),
-			gravity: $('#img-gravity :selected').text(),
-			// tile: $('#img-tile:checked').val() !== undefined ? "true" : "false",
-			format: $('#img-format :selected').text(),
-			dispose: $('#dispose').val(),
-			username: $("#img-name").val(),
-			}
-		if (data.rotate.match(/-/)){ data.rotate=360-parseInt(data.rotate.replace("-","")); };
-		$("#img-rotate").val("");
-		if (data.username.length > 0)
-			document.cookie = "imname="+data.username+";path=/;domain=.asdf.us;max-age=1086400"
-		$.post("/im/api/generate", data, Main.callback)
-		},
-	error: function (s)
-		{
-		$("#output-cmd").html("<span class='error'>ERROR: " + s + "</span>").show()
-		$("#output-url").hide()
-		$("#output-img").hide()
-		},
-	callback: function (data)
-		{
-		Main.generating = false
-		$("#output-cmd").html("size: "+Main.filesize(data.size)+"<br/>"
-      + data.width + " x " + data.height);
-       
-		$("#output-url").val(data.url);
-		$("#output-img").hide().attr("src", data.url).fadeIn(700)
-		$("#sendtoinput").html("&nbsp;send to input <img src=\"arrow_pointing_left.png\"/>&nbsp;").css({"border": "1px solid gray", "cursor" : "pointer"}).click(function(){
-			$("#img-url").val(data.url);
-		});
-		
-		},
-	filesize: function (size)
-		{
-		if (size < 1024)
-			return size + " bytes"
-		if (size < 1024 * 1024)
-			return Math.floor (size/1024) + " KB"
-		else
-			return Math.floor (size/(1024*1024)) + " MB"
-		},
-	cookie: function ()
-		{
-		if (document.cookie)
-			{
-			var cookies = document.cookie.split(";")
-			for (i in cookies)
-				{
-				var cookie = cookies[i].split("=")
-				if (cookie[0].indexOf("imname") !== -1)
-					{
-					if (cookie[1] !== 'false' && cookie[1] !== 'undefined' && cookie[1].length)
-						{
-						return cookie[1]
-						}
-					}
-				}
-			}
-		return ""
-		},
-	preloadSize: function(url,label,tag){
-		console.log(url)
-		var img = new Image()
-		img.onload = function(){ $(label).html( tag + ": " + img.naturalWidth + " x " + img.naturalHeight ) }
-		img.src = url
-	},
-	init: function ()
-		{
-		var name = Main.cookie ()
-		$("#img-name").val(name)
-    if (name)
-      {
-      $("#userlink").show()
-      $("#userlink a").attr("href", "/im/gallery/?name="+name).html(name+"'s photoblasts")
-      }
-    $("#likebutton,#controls").fadeIn(0)
-		$("#img-generate").bind("click", Main.go)
-		$("div input[type=text]").bind("keydown", Main.enter)
-		$("#img-url").change(function(){Main.preloadSize(this.value,"#img-url-label","image")})
-		$("#img-background").change(function(){Main.preloadSize(this.value,"#background-url-label","bg")})
-		$("#bgswitcheroo").click(function() {
-		    a = $("#img-url").val();
-	    	    b = $("#img-background").val();
-		    $("#img-url").val(b);
-	    	    $("#img-background").val(a);
-		  });
-		$("#colorswitcheroo").click(function() {
-		    a = $("#img-white").val();
-	    	    b = $("#img-black").val();
-		    $("#img-white").val(b);
-	            $("#img-black").val(a);
-		  });
-		$("#img-format").change(function(){
-			$("#gif-options").css( "visibility",  $("#img-format").val() === "gif" ? "visible" : "hidden")
-		})
-
-		},
-	}
-document.getElementById('imform').reset();
-Main.init ()
-</script>
+<script type="text/javascript" src="js/main.js"></script>
 <script type="text/javascript" src="http://asdf.us/js/pbembed.js"></script>
 <!--for the colors iframe-->
-<script type="text/javascript" src="jquery-ui-1.8.16.custom.min.js"></script>
+<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
 <script type="text/javascript" src="/im/colors/js/jquery.remember-state.js"></script>
 <script type="text/javascript" src="/im/colors/js/jquery.fancybox.js?v=2.1.5"></script>
 <script type="text/javascript" src="colors_iframe.js"></script>
diff --git a/share/frontend/im/jquery-ui-1.8.16.custom.min.js b/share/frontend/im/js/jquery-ui-1.8.16.custom.min.js
index 3042d0b..3042d0b 100755
--- a/share/frontend/im/jquery-ui-1.8.16.custom.min.js
+++ b/share/frontend/im/js/jquery-ui-1.8.16.custom.min.js
diff --git a/share/frontend/im/js/main.js b/share/frontend/im/js/main.js
new file mode 100644
index 0000000..8f8b01a
--- /dev/null
+++ b/share/frontend/im/js/main.js
@@ -0,0 +1,138 @@
+var Main =
+	{
+	API_HEADER: "#@im",
+	generating: false,
+	enter: function (e)
+		{
+		if (Main.generating)
+			return
+		if (e.keyCode === 13)
+			Main.go()
+		},
+	go: function ()
+		{
+		if (Main.generating)
+			return
+		Main.generating = true
+		$("#output-cmd").html('generating...').show()
+		$("#result").show()
+		var data =
+			{
+			url: $("#img-url").val(),
+			transparent: $('#img-transparent:checked').val() !== undefined ? "true" : "false",
+			flip: $('#img-flip:checked').val() !== undefined ? "true" : "false",
+			flop: $('#img-flop:checked').val() !== undefined ? "true" : "false",
+			nearest: $('#img-nearest:checked').val() !== undefined ? "true" : "false",
+			rotate: $("#img-rotate").val(),
+			subtract: $("#img-subtract").val(),
+			fuzz: $("#img-fuzz").val(),
+			width: $("#img-width").val(),
+			height: $("#img-height").val(),
+			black: $("#img-black").val(),
+			white: $("#img-white").val(),
+			//brightness: $("#img-brightness").val(),
+			//saturation: $("#img-saturation").val(),
+			hue: $("#img-hue").val(),
+			contrast: $("#img-contrast").val(),
+			background: $("#img-background").val(),
+			// merge_early: $('#img-merge_early:checked').val() !== undefined ? "true" : "false",
+			compose: $('#img-compose :selected').text(),
+			gravity: $('#img-gravity :selected').text(),
+			// tile: $('#img-tile:checked').val() !== undefined ? "true" : "false",
+			format: $('#img-format :selected').text(),
+			dispose: $('#dispose').val(),
+			username: $("#img-name").val(),
+			}
+		if (data.rotate.match(/-/)){ data.rotate=360-parseInt(data.rotate.replace("-","")); };
+		$("#img-rotate").val("");
+		if (data.username.length > 0)
+			document.cookie = "imname="+data.username+";path=/;domain=.asdf.us;max-age=1086400"
+		$.post("/im/api/generate", data, Main.callback)
+		},
+	error: function (s)
+		{
+		$("#output-cmd").html("<span class='error'>ERROR: " + s + "</span>").show()
+		$("#output-url").hide()
+		$("#output-img").hide()
+		},
+	callback: function (data)
+		{
+		Main.generating = false
+		$("#output-cmd").html("size: "+Main.filesize(data.size)+"<br/>"
+      + data.width + " x " + data.height);
+       
+		$("#output-url").val(data.url);
+		$("#output-img").hide().attr("src", data.url).fadeIn(700)
+		$("#sendtoinput").html("&nbsp;send to input <img src=\"img/arrow_pointing_left.png\"/>&nbsp;").css({"border": "1px solid gray", "cursor" : "pointer"}).click(function(){
+			$("#img-url").val(data.url);
+		});
+		
+		},
+	filesize: function (size)
+		{
+		if (size < 1024)
+			return size + " bytes"
+		if (size < 1024 * 1024)
+			return Math.floor (size/1024) + " KB"
+		else
+			return Math.floor (size/(1024*1024)) + " MB"
+		},
+	cookie: function ()
+		{
+		if (document.cookie)
+			{
+			var cookies = document.cookie.split(";")
+			for (i in cookies)
+				{
+				var cookie = cookies[i].split("=")
+				if (cookie[0].indexOf("imname") !== -1)
+					{
+					if (cookie[1] !== 'false' && cookie[1] !== 'undefined' && cookie[1].length)
+						{
+						return cookie[1]
+						}
+					}
+				}
+			}
+		return ""
+		},
+	preloadSize: function(url,label,tag){
+		console.log(url)
+		var img = new Image()
+		img.onload = function(){ $(label).html( tag + ": " + img.naturalWidth + " x " + img.naturalHeight ) }
+		img.src = url
+	},
+	init: function ()
+		{
+		var name = Main.cookie ()
+		$("#img-name").val(name)
+    if (name)
+      {
+      $("#userlink").show()
+      $("#userlink a").attr("href", "/im/gallery/?name="+name).html(name+"'s photoblasts")
+      }
+    $("#likebutton,#controls").fadeIn(0)
+		$("#img-generate").bind("click", Main.go)
+		$("div input[type=text]").bind("keydown", Main.enter)
+		$("#img-url").change(function(){Main.preloadSize(this.value,"#img-url-label","image")})
+		$("#img-background").change(function(){Main.preloadSize(this.value,"#background-url-label","bg")})
+		$("#bgswitcheroo").click(function() {
+		    a = $("#img-url").val();
+	    	    b = $("#img-background").val();
+		    $("#img-url").val(b);
+	    	    $("#img-background").val(a);
+		  });
+		$("#colorswitcheroo").click(function() {
+		    a = $("#img-white").val();
+	    	    b = $("#img-black").val();
+		    $("#img-white").val(b);
+	            $("#img-black").val(a);
+		  });
+		$("#img-format").change(function(){
+			$("#gif-options").css( "visibility",  $("#img-format").val() === "gif" ? "visible" : "hidden")
+		})
+
+		},
+	}
+document.getElementById('imform').reset();
+Main.init ()