var dynamicBox_pagingControls = [];

function dynamicBox_paging(p_dynamicBoxId, p_page) {

	var pageId = 'dynamicbox-' + p_dynamicBoxId + '-page-' + p_page;
	var list = document.getElementById(pageId);
	
	list.className = 'dynamicbox-visible';
	
	var lists = document.getElementById(p_dynamicBoxId).getElementsByTagName('ul');
	
	for (var i=0; i < lists.length; i++)
		if (lists[i].id != pageId && lists[i].className != 'dynamicbox-paging-container')
			lists[i].className = 'dynamicbox-invisible';	
		
	dynamicBox_loadContent(p_dynamicBoxId, list.getElementsByTagName('li')[0].getElementsByTagName('a')[0].id.split('-')[2], true);		
}

function dynamicBox_pagingNext(e) {
	
	var dynamicBoxId = getTarget(e).parentNode.className;
	var nextPage = dynamicBox_pagingControls[dynamicBoxId].page + 1; 
	var lastPage = dynamicBox_pagingControls[dynamicBoxId].pages; 
	
	if (nextPage <= lastPage) {
		dynamicBox_pagingControls[dynamicBoxId].page = nextPage; 
		dynamicBox_paging(dynamicBoxId, nextPage);		
		dump('carregar itens da página: ' + nextPage);		
	} else {
		dump('manter a última página (página: '+ lastPage +') em exibição');	
	}	
	
	if (nextPage >= lastPage)
		getTarget(e).className = 'dynamicbox-paging-link-off';
	else	
		getTarget(e).className = 'dynamicbox-paging-link-on';

	document.getElementById('dynamicbox-' + dynamicBoxId + '-paging-link-preview').className = 'dynamicbox-paging-link-on';	
	
}

function dynamicBox_pagingPreview(e) {
	
	var dynamicBoxId = getTarget(e).parentNode.className;
	var nextPage = dynamicBox_pagingControls[dynamicBoxId].page - 1; 
	
	if (nextPage > 0) {
		dynamicBox_pagingControls[dynamicBoxId].page = nextPage; 
		dynamicBox_paging(dynamicBoxId, nextPage);
		dump('carregar itens da página: ' + nextPage);
	} else {
		dump('manter a primeira página (página: 1) em exibição');	
	}

	if (nextPage <= 1)
		getTarget(e).className = 'dynamicbox-paging-link-off';
	else	
		getTarget(e).className = 'dynamicbox-paging-link-on';
		
	document.getElementById('dynamicbox-' + dynamicBoxId + '-paging-link-next').className = 'dynamicbox-paging-link-on';
}

// load content
function dynamicBox_loadContent(p_dynamicBoxId, p_itemid, p_fadeIt) {
	
	// tornando visível a div container do conteúdo selecionado
	document.getElementById('dynamicbox-' + p_dynamicBoxId + '-content-' + p_itemid).className = 'dynamicbox-content-container-on';
	
	// tornando invisível as outras divs
	var divs = document.getElementById(p_dynamicBoxId).getElementsByTagName('div');
	
	for (var i=0; i < divs.length; i++) {
		
		if (divs[i].className == 'dynamicbox-content') {
			
			var internalDivs = divs[i].getElementsByTagName('div');
			
			for (var j=0; j < internalDivs.length; j++)				
				if (internalDivs[j].id != 'dynamicbox-' + p_dynamicBoxId + '-content-' + p_itemid)
					internalDivs[j].className = 'dynamicbox-content-container-off';			
		}	
	}
	
	var itens = document.getElementById('dynamicbox-' + p_dynamicBoxId + '-page-' + dynamicBox_pagingControls[p_dynamicBoxId].page).getElementsByTagName('a');
	
	document.getElementById(p_dynamicBoxId + '-item-' + p_itemid).className = 'on';
	
	for (var i=0; i < itens.length; i++)
		if (itens[i].id != p_dynamicBoxId + '-item-' + p_itemid)
			itens[i].className = 'off';
	
	if (p_fadeIt)
		yf.fadeIt('dynamicbox-' + p_dynamicBoxId + '-content-' + p_itemid);
	
	dump('função: <span style="color:red;">dynamicBox_loadContent</span> | p_boxid: <span style="color:red;">' + p_dynamicBoxId + '</span> | p_itemid: <span style="color:red;">'+ p_itemid +'</span>');
}

// click event
function dynamicBox_itemClick(e) {		
	dump('função: <span style="color:red;">dynamicBox_itemClick</span> | item: <span style="color:red;">' + getTarget(e).id + '</span>');
	dynamicBox_loadContent(getTarget(e).id.split('-')[0], getTarget(e).id.split('-')[2], false);		
}

// init
function dynamicBox_init() {
	
	var allDivs = document.getElementsByTagName('div');
	var allDynamicBox = [];
	var itemId = '';
	var dynamicBoxId = '';
	
	for (var i=0; i < allDivs.length; i++)
		if (allDivs[i].className == 'dynamicbox')
			allDynamicBox.push(allDivs[i]);
	
	// configurando comportamento dos elementos em cada div dynamicbox   
	for (var i=0; i < allDynamicBox.length; i++) {	
		
		// id desta instancia da dynamicbox
		dynamicBoxId = allDynamicBox[i].id;				
		dynamicBox_pagingControls[dynamicBoxId] = {page:1,pages:1};
		
		// comportamento dos links (itens)
		var lists = allDynamicBox[i].getElementsByTagName('ul');
				
		for (var j=0; j < lists.length; j++) {
			
			var itens = lists[j].getElementsByTagName('a');
			
			for (var l=0; l < itens.length; l++) {
				
				addEvent(itens[l], 'click', dynamicBox_itemClick);
				itens[l].setAttribute('href','javascript:void(0)');
			}	
			
			// escondendo paginas  	
			if (j>0)
				lists[j].className = 'dynamicbox-invisible';
		}

		// controles de navegação
		var allInternalDivs = allDynamicBox[i].getElementsByTagName('div');
		
		for (var m=0; m < allInternalDivs.length; m++) {
			
			if (allInternalDivs[m].className == 'dynamicbox-paging') {

				dynamicBoxId = allInternalDivs[m].id.split('-')[2];
				
				dynamicBox_pagingControls[dynamicBoxId] = {page:1,pages:lists.length}; 	
				
				// list
				var ul  = document.createElement('ul');
				ul.className = 'dynamicbox-paging-container';
				
				// elemento 'a': próximo 
				var a1  = document.createElement('a');
				a1.setAttribute('href','javascript:void(0)');
				a1.id = 'dynamicbox-' + dynamicBoxId + '-paging-link-preview';
				a1.style.textAlign = 'left';
				a1.className = 'dynamicbox-paging-link-off';
				a1.innerHTML = '&laquo; anterior';
				addEvent(a1, 'click', dynamicBox_pagingPreview);
				
				// elemento 'a': anterior
				var a2  = document.createElement('a');
				a2.setAttribute('href','javascript:void(0)');		
				a2.id = 'dynamicbox-' + dynamicBoxId + '-paging-link-next';
				a2.style.textAlign = 'right';
				a2.className = 'dynamicbox-paging-link-on';		
				a2.innerHTML = 'próximo &raquo;';
				addEvent(a2, 'click', dynamicBox_pagingNext);
				
				// elemento 'li' container para o link: anterior   
				var li1 = document.createElement('li');
				li1.appendChild(a1);
				li1.className = dynamicBoxId;
				
				// elemento 'li' container para o link: próximo
				var li2 = document.createElement('li');
				li2.appendChild(a2);		
				li2.className = dynamicBoxId;
				
				ul.appendChild(li1);
				ul.appendChild(li2);
				
				allInternalDivs[m].appendChild(ul);			
			}	
		}
	}		
	
	for (var i=0; i<allDynamicBox.length; i++) {
		itemId = allDynamicBox[i].getElementsByTagName('ul')[0].getElementsByTagName('li')[0].getElementsByTagName('a')[0].id.split('-')[2];		
		dynamicBox_loadContent(allDynamicBox[i].id, itemId, false);		
	}
}

// miscelanea

var yf = {	
	
	b : ["00","11","22","33","44","55","66","77","88","99","aa","bb","cc","dd","ee","ff"],	
	count : 0,
	delay : 100,
	timeoutId : 0,
		
	fadeIt : function (ids)
	{
		clearTimeout(yf.timeoutId);
		yf.timeoutId = setTimeout("yf.setBackgroundColor('"+ ids +"')", yf.delay); 
	},	
	
	setBackgroundColor : function (ids)
	{		
		ids = ids.split(",");
		
		for (var i=0; i<ids.length; i++)
			document.getElementById(ids[i]).style.backgroundColor = "#ffff"+ yf.b[yf.count];		
		
		if (yf.count++ < yf.b.length - 1)		
			yf.fadeIt(ids);	
		else
			yf.count = 0;		
	}
}

function dump(p_str) {
	//document.getElementById('dump').innerHTML += '<br/>' + p_str;
}

// dom utils
function getTarget(p_object)
{
	var object = (window.event) ? window.event : p_object;
	var target = object.target ? object.target : object.srcElement;
	
	if (target.nodeType == 3) 
		target = target.parentNode;
	
	return target;
}

function addEvent(p_object, p_event, p_function) {	
	if (p_object.addEventListener) {
		p_object.addEventListener(p_event, p_function, false);
		return true;
	} else if (p_object.attachEvent) {
		p_object.attachEvent('on' + p_event, p_function);
		return true;
	} else {
		return false;
	}	
}

// init
addEvent(window, 'load', dynamicBox_init);