// JavaScript Document

function MediaBox ()
{
	var _container = $("#mediabox");
	var _gallery = $(".mediabox_gallery", _container);
	var _navigation = $(".mediabox_nav", _container);
	
	var _itensLength = $("ul li", _gallery).length;
	var _itemWidth = $(".mediabox_gallery li", _container).width();
	
	var _index = 0;
	var _timer;
	
	function setupMediaboxGallery ()
	{
            // set UL width
            $("ul", _container).css("width", _itensLength * _container.width());
			
            // setup navigations
            _navigation.append("<ul></ul>");
			
            for(var i = 0; i < _itensLength; i++)
            {
                $("ul", _navigation).append("<li id='mediabox_nav_" + i + "' rel='" + i + "'></li>");
            }
			
            _navigation.css("margin-top", _container.height() - $("ul", _navigation).height() - 35);
			$("#mediabox_nav_0").addClass("activated");

            // Controls
            setupControls ();
	}
	
	function setupControls ()
	{
            $("ul li", _navigation).click(function (){ 
                selectItem(parseInt($(this).attr("rel"))); 
                clearInterval(_timer);
                _timer = window.setInterval(onTimer, 5000);
            });
            _timer = window.setInterval(onTimer, 5000);
	}
	
	function onTimer ()
	{
            _index++;
            if(_index > _itensLength-1) _index = 0;
            selectItem (_index);
	}
	
	function selectItem (index)
	{
            // save index
            _index = index;

            // animate gallery
            $("ul", _gallery).animate({marginLeft: -index * _itemWidth}, 500);

            // reset nav
            $("ul li", _navigation).removeClass("activated");

            // select nav item
            $("#mediabox_nav_" + index).addClass("activated");
	}
	
	// init
	setupMediaboxGallery();
}