window.addEvent('load',init);
window.addEvent('domready', domInit);

var index;
var thumbScroll;

function init()
{
	index = 0;
	initFades();
	initThumbs();
}
function domInit()
{
	initControls();
	initDisplay();
}


function initDisplay()
{
//	$('loading').style.display = 'none';
	$('loading').tween('opacity', '0');//= 'none';
	$('contents').style.cursor = 'auto';
}

function initFades()
{
	$('port_header').set('opacity', '.5');

	var tweenOptions = {
			wheelstops: false,
			duration: 250,
			transition: Fx.Transitions.Quint.easeOut
			};

	$('header').set('tween', tweenOptions );
	$('header').tween('opacity', '.25');
	
	$('footer').set('tween', tweenOptions );
	$('footer').tween('opacity', '.25');
	
	$('thumbs_wrapper').set('tween', tweenOptions );
	$('thumbs_wrapper').tween('opacity', '.50');

	
	$('header').addEvent('mouseover', function(){$('header').tween('opacity','1');});
	$('header').addEvent('mouseout', function(){$('header').tween('opacity','.25');});

	$('footer').addEvent('mouseover', function(){$('footer').tween('opacity','1');});
	$('footer').addEvent('mouseout', function(){$('footer').tween('opacity','.25');});

	$('thumbs_hitarea').addEvent('mouseover', function(){$('thumbs_wrapper').tween('opacity','1');});
	$('thumbs_hitarea').addEvent('mouseout', function(){$('thumbs_wrapper').tween('opacity','.50');});
	

	var thumbTweenOptions = {
			wheelstops: false,
			duration: 250
			};
	$('thumbs_up').set('tween', thumbTweenOptions);	
	$('thumbs_down').set('tween', thumbTweenOptions);	

	$('thumbs_up').tween('opacity', '.10');
	$('thumbs_down').tween('opacity', '.10');
}

function initThumbs()
{
	thumbScroll = new Fx.Scroll('thumbs_wrapper', {
		wheelstops: false,
		wait: false,
		offset: {'x': 0, 'y': -260},	/* when scrolling to this element, position this target in the top left of the container */
		transition: Fx.Transitions.Quint.easeOut,
		duration: 1000
		});

	for(i=0; i < arraysize; i++)
	{
		assignThumbsHelper('thumb_'+i, i);
	}

	thumbScroll.toTop().chain(function()
			{
				$('thumb_0').fireEvent('changeimg');
			});
}
function assignThumbsHelper(target,i)
{
	$(target).addEvent('click', function(event)
		{
			event = new Event(event).stop();
			$(target).fireEvent('changeimg');
		});
	$(target).addEvent('changeimg', function(event)
		{
			thumbScroll.toElement(target);
			index = i;
			makeHot(this);
			changeImg(index);
		});

	$(target).set('opacity','.5');
	$(target).addEvent('mouseover', function(event){ $(target).tween('opacity','1'); });
	$(target).addEvent('mouseout', function(event){ $(target).tween('opacity','.5'); });
}
function makeHot(target)
{
	for(i=0; i < arraysize; i++)
	{
		$('thumb_'+i).firstChild.style.borderColor = '#ffffff';
	}

	target.firstChild.style.borderColor = "#9d0000";
}



function initControls()
{
	assignThumbControls();
	assignThumbControlFaders();
	disableThumbControl($('thumbs_up')); //initialize disabled control
}
function assignThumbControlFaders()
{
	assignThumbControlFadersHelper($('thumbs_up'));
	assignThumbControlFadersHelper($('thumbs_down'));
}
function assignThumbControlFadersHelper(target)
{
	target.style.cursor = 'pointer';
	target.removeEvents('mouseover'); // Clean up events
	target.removeEvents('mouseout'); // Clean up events
	target.addEvent('mouseover', function(){target.tween('opacity','1');});
	target.addEvent('mouseout', function(){target.tween('opacity','.10');});
}
function disableThumbControl(target)
{
	target.style.cursor = 'default';
	target.tween('opacity', '.20');
	target.removeEvents('mouseover');
	target.removeEvents('mouseout');
}
function assignThumbControls()
{
	$('thumbs_up').addEvent('click', function(event)
			{
				assignThumbControlFaders();
				if ((index - 6) <= 0)	// disable this control
				{
					index = 0;
					disableThumbControl($('thumbs_up'));
				}
				else
				{
					index -= 6;
				}
				thumbScroll.toElement('thumb_'+(index));
			});
	$('thumbs_down').addEvent('click', function(event)
			{
				assignThumbControlFaders();
				if ((index + 6 + 1) >= arraysize)	// disable this control
				{
					index = arraysize - 1;
					disableThumbControl($('thumbs_down'));
				}
				else
				{
					index += 6;
				}
				thumbScroll.toElement('thumb_'+(index));
			});
}

function changeImg(index)
{
	$('imgs').fade('out');
	$('loading').tween('opacity',1);

	imgAsset = new Asset.images(imgFullDir+imgArray[index], {
		onProgress: function(){
					},
		onComplete: function(){
						$('loading').tween('opacity',0);
						$('imgs').empty();
						$('imgs').set('opacity',0);
						$('imgs').fade('in');
						$('imgs').grab(new Element('img', {src: imgFullDir+imgArray[index]}));
					}
		});
}