/* lite object */

function litegrid (_self_selector, url)
{
	/* vars */

	// selectors
	this.self   = (_self_selector != undefined) ? _self_selector : '#lite-container';

	// define how big your blocks are; maybe keep the same aspect ratio
	this.pixel_width  = 20;
	this.pixel_height = 20;

	// offsets for larger pixel areas
	this.x_offset = 4;
	this.y_offset = 4;

	// offsets for nav size
	this.nav_width  = 40;
	this.nav_height = 420;

	// selected pixel class
	this.pixel_class = 'black';

	// saved pixels
	this.save = {};


	// experimental
	this.is_dragging = false;
	this.is_clicked  = [];


	/* events */

	// load!
	this.load = function (url)
	{
		$(this.self + ' .dialog').html('loading.. hang on!').show();

		$.getJSON(
			'load.php',
			{'url':url},
			function (pixels) {
				for (p in pixels)
				{
					var p = pixels[p];
					var pixel_id = 'p' + p.x.substring(0, p.x.indexOf('px')) + '-' + p.y.substring(0, p.y.indexOf('px'));
					$(lite.self + ' .lite-pixels').append('<div id="' + pixel_id + '" class="' + p.c + '" style="left:' + p.x + ';top:' + p.y + ';display:block;"></div>');
				}
				$(lite.self + ' .dialog').html('').hide();
			}
		);
	};	

	// grab xy
	this.get_xy = function (event)
	{
		return {
			x: (Math.floor(event.pageX / lite.pixel_width)  * lite.pixel_width)  - lite.x_offset,
			y: (Math.floor(event.pageY / lite.pixel_height) * lite.pixel_height) - lite.y_offset
		};
	}

	// click event
	this.click = function (event)
	{
		coords = lite.get_xy(event);

		// prevent clicks behind the nav
		if (coords.y < lite.nav_height && coords.x < lite.nav_width)
			return;

		var pixel_id = 'p' + coords.x + '-' + coords.y;

		if (lite.is_clicked[pixel_id] !== undefined && lite.is_clicked[pixel_id] == true) return;
		lite.is_clicked[pixel_id] = true;

		// a pixel exists at this location
		if ($('#' + pixel_id).length)
		{
			// it's the same as the selected color
			if ($('#' + pixel_id).hasClass(lite.pixel_class))
			{
				$('#' + pixel_id).fadeOut('slow', function () {
					$(this).remove();
					lite.is_clicked[pixel_id] = false;
				});
			}
			// it's different
			else
			{
				$('#' + pixel_id).fadeOut('slow', function () {
					$(this).attr('class', 'p ' + lite.pixel_class);
					$(this).fadeIn('slow', function () {
						lite.is_clicked[pixel_id] = false;
					});
				});
			}
		}
		// no pixel exists
		else
		{
			$(lite.self).find('.lite-pixels').append(
				  '<div '
				+   'class="p ' + lite.pixel_class + '" '
				+   'id="' + pixel_id + '" '
				+   'style="left:' + coords.x + 'px; top:' + coords.y + 'px;"'
				+ '></div>'
			);
			$('#' + pixel_id).fadeIn('slow', function () {
				lite.is_clicked[pixel_id] = false;
			});
		}
	};

	// mouseover event
	this.mousemove = function (event)
	{
		coords = lite.get_xy(event);

		$('#lite-hover').css({
			left: coords.x,
			top:  coords.y
		});
	};


	/* constructor */

	// change loading text to have our control units
	$(this.self).attr('class', 'lite-container').html(
		  '<div class="lite-canvas">'
		+   '<div class="dialog"></div>'
		+   '<div class="lite-nav"></div>'
		+   '<div class="p black" id="lite-hover"></div>'
		+   '<div class="lite-pixels"></div>'
		+ '</div>'
	);

	// populate the nav
	$(this.self + ' .lite-nav').html(
		  '<div class="cls"></div>'
		+ '<div class="black selected"></div>'
		+ '<div class="gray"></div>'
		+ '<div class="white"></div>'
		+ '<div class="yellow"></div>'
		+ '<div class="lime"></div>'
		+ '<div class="green"></div>'
		+ '<div class="aqua"></div>'
		+ '<div class="blue"></div>'
		+ '<div class="royal"></div>'
		+ '<div class="purple"></div>'
		+ '<div class="pink"></div>'
		+ '<div class="red"></div>'
		+ '<div class="orange"></div>'
		+ '<div class="save"></div>'
	);
	$(this.self + ' .lite-nav').find("div[class!='save'][class!='cls']").click(function () {
		lite.pixel_class = $(this).attr('class');
		$('#lite-hover').attr('class', 'p ' + lite.pixel_class);
		$(this).siblings().removeClass('selected');
		$(this).addClass('selected');
	});

	// save action
	$(this.self + ' .lite-nav').find("div[class='save']").click(function () {
		// build data
		lite.save = {};
		var i = 0;
		$(lite.self + ' .lite-pixels').find('div').each(function () {
			i++;
			lite.save['p[' + i + '][c]'] = $(this).attr('class');
			lite.save['p[' + i + '][x]'] = $(this).css('left');
			lite.save['p[' + i + '][y]'] = $(this).css('top');
		});

		// postback data
		$.post(
			'save.php',
			lite.save,
			function (ret) {
				window.location = ret;
			}
		);
	});

	// clear screen action
	$(this.self + ' .lite-nav').find("div[class='cls']").click(function () {
		if (confirm('do you want to clear the current canvas?')) {
			$(lite.self + ' .lite-pixels').empty();
		}
	});

	// add interaction
	$(this.self).click(this.click).mousemove(this.mousemove);
	$('#lite-hover').draggable({
		grid:  [this.pixel_width, this.pixel_height],
		drag:  this.click
	});

	// load operation
	//this.load((url.length) ? url : '2b6bf8762fedbd714e336243dba66190133fb48c');
}