var IOTW = {};

IOTW.init = function()
{
	$('div.rounded').each(function(){IOTW.roundify(this)});
	$('div.rounded2').each(function(){IOTW.roundify(this)});

	if (navigator.userAgent.indexOf('Firefox') > 0)
	{
		IOTW.tweakFireFoxCMXForm();
		$('div.photo .rating ul.drops').css('margin-left','60px');
	}

	IOTW.retainInkDropState();
}

/**
 * Retains the current inkdrop rating after mousing out of the ink drops.
 */
IOTW.retainInkDropState = function()
{
	IOTW.activeDrop = null;

	$('ul.drops').bind('mouseover',function()
	{
		$(this).find('li').each(function(i)
		{
			if (this.className.indexOf('active') >= 0)
			{
				IOTW.activeDrop = this;
				$(this).removeClass('active');
			}
		});
	});

	$('ul.drops').bind('mouseout',function(i)
	{
		if (IOTW.activeDrop)
		{
			$(IOTW.activeDrop).addClass('active');
			IOTW.activeDrop = null;
		}
	});
}

/**
 * Adds necessary structural elements to make a rounded box.
 *
 * Original HTML:
 * <div class="rounded">
 *   <div class="content">my content</div>
 * </div>
 *
 * Roundified HTML:
 * <div class="rounded">
 *   <div class="midright">
 *     <div class="topleft"><div class="topright">&nbsp;</div></div>
 *     <div class="content">my content</div>
 *     <div class="bottomleft"><div class="bottomright">&nbsp;</div></div>
 *   </div>
 * </div>
 */
IOTW.roundify = function(e)
{
	var midright = document.createElement('div');
	var topleft = document.createElement('div');
	var topright = document.createElement('div');
	var bottomleft = document.createElement('div');
	var bottomright = document.createElement('div');
	var content = document.createElement('div');

	topleft.className = 'topleft';
	topright.className = 'topright';
	topleft.appendChild(topright);
	topright.appendChild(document.createTextNode('\u00A0'));

	bottomleft.className = 'bottomleft';
	bottomright.className = 'bottomright';
	bottomleft.appendChild(bottomright);
	bottomright.appendChild(document.createTextNode('\u00A0'));

	for (var j=0; j<e.childNodes.length; ++j)
		content.appendChild(e.childNodes[j].cloneNode(true));

	midright.className = 'midright';
	midright.appendChild(topleft);
	midright.appendChild(content);
	midright.appendChild(bottomleft);

	while (e.childNodes.length > 0)
		e.removeChild(e.childNodes[0]);

	e.appendChild(midright);
};

/**
 * Fixes the label inline-block style that doesn't work in FireFox.
 *
 * @see http://www.alistapart.com/articles/prettyaccessibleforms
 */
IOTW.tweakFireFoxCMXForm = function()
{
	$('form.vcssform').hide().end();
	$('form.vcssform').find('li/label').not('.nocmx').each(function(i)
	{
		var labelContent = this.innerHTML;
		var labelWidth = document.defaultView.getComputedStyle(this,'').getPropertyValue('width');
		var labelSpan = document.createElement('span');

		labelSpan.style.display = 'block';
		labelSpan.style.width = labelWidth;
		labelSpan.innerHTML = labelContent;
		this.style.display = '-moz-inline-box';
		this.innerHTML = null;
		this.appendChild( labelSpan );
	}).end();

	$('form.vcssform').show().end();
};

IOTW.ratePhoto = function(form, photoId, rating)
{
	form.photoId.value = photoId;
	form.rating.value = rating;
	form.submit();
}