function $X(element)
{
	element = document.getElementById(element);
	return element;
}

$(document).ready(function(){
	var boxElements = [ "marqueeDirection", "marqueeSpeed", "boxWidth", "boxHeight", "boxBackgroundColor", "boxBorderColor", "boxBorderWidth", "boxBorderStyle" ];
	
	jQuery.each(boxElements, function() {
		$("#" + this).change(function () {
			boxUpdate();
		}).keyup(function () {
			boxUpdate();
		});
	});
	
	$('#boxBackgroundColor, #boxBorderColor').ColorPicker({
		targetID : '',
		newTimeout : '',
		
		eventName: 'focus',
		
		onSubmit: function(hsb, hex, rgb, el) {
			$(el).val("#" + hex);
			$(el).ColorPickerHide();
			boxUpdate();
		},
		onChange: function(cal, hex, el) {
			$("#" + targetID).val('#' + hex);
			
			newTimeout = setTimeout("boxUpdate();", 1200); //IE gets slow
		},
		onBeforeShow: function () {
			$(this).ColorPickerSetColor(this.value);
			targetID = this.id;
		}
	});
	
	boxUpdate();
	Rows.RebuildImages();
});

function boxUpdate()
{
	var cssObj = {
		'width' : $("#boxWidth").val() + 'px',
		'height' : $("#boxHeight").val() + 'px',
		'background-color' : $("#boxBackgroundColor").val(),
		'border-color' : $("#boxBorderColor").val(),
		'border-width' : $("#boxBorderWidth").val(),
		'border-style' : $("#boxBorderStyle").val(),
		'text-align' : $("#imageAlign").val(),
		'overflow' : 'auto'
	}
	
	$("#pdiv").attr("direction", $("#marqueeDirection").val());
	$("#pdiv").attr("scrollamount", $("#marqueeSpeed").val());
	$("#pdiv").css(cssObj);
}

Rows =
{
	count: 9,
	
	Add: function()
	{
		Rows.count++;
	    
		ol = $X('listmgr');
		li = document.createElement('li');
		li.setAttribute ('id', 'row_' + Rows.count); 
		li.innerHTML = '<div class="form-text"><input type="text" name="url[]" onchange="Rows.Update(this.parentNode.id, this.value);" onkeyup="Rows.Update(this.parentNode.id, this.value);"></div><a href="javascript:void(0);" onclick="Rows.Remove(this.parentNode.id);"><img src="images/delete.gif" alt="delete" /></a>';
		ol.appendChild(li);
	},
	
	Remove: function(id)
	{	
		if (Rows.count <= 1)
		{
			alert("Sorry, you must have at least one image to create scrolling images.");
		}
		else
		{
			var image = $X(id);
			image.parentNode.removeChild(image);
		}
		
		Rows.count--;
		Rows.RebuildImages();
	},
	
	Update: function(id, url)
	{
		Rows.RebuildImages();
		return true;
	},
	
	RebuildImages: function ()
	{
		Rows.RemoveImages();
		
		var lis = $X('listmgr').getElementsByTagName('li');
		for (var li = 0; li < lis.length; ++li)
		{
			var value = lis[li].getElementsByTagName('input')[0].value;
			if (value.length > 0)
			{
				Rows.AddImage(li, value);
			}
		}
	},
	
	RemoveImages: function ()
	{
		var element = $X('pdiv');
		
		if (element.hasChildNodes())
		{
			while (element.hasChildNodes())
			{
				element.removeChild(element.childNodes[0]);
			}
		}
	},
	
	AddImage: function (count, url)
	{
		count++; //Add one to fix the each ID number...
		var img = document.createElement('img');
		img.setAttribute ('id', 'preview_'+ count +''); 
		img.setAttribute ('src', url);
		img.style.display = 'inline';
		$X('pdiv').appendChild(img);
	}
}