// Variável que define a posição do scroll
$D.global.POSICAO = 0;

$D.listener.push(window,'onload',function(){
  	$D.trace.create();
	$D.global.ddBarra = $D.dragdrop.push('scrollSite','scrollSite',{
		type: 'normal',
		block: true,
		left: -6,
		top: -11,
		width: 1000,
		height: 41,
		ondragmove: function() {
			$D.global.POSICAO = ((parseInt($S('scrollSite').left)+6)*100)/($D.global.SIZE_BARRA-$D.global.SIZE_SCROLL);
		}
	});
});

// Atualiza a altura das colunas
$D.global.REFRESH_COLLS = function() {
	$S('backColl').height = $D.page.visibleSize['y']+'px';
	$S('startColl').height = $D.page.visibleSize['y']+'px';
	$S('itenPortfolio').height = $D.page.visibleSize['y']+'px';
	$S('endColl').height = $D.page.visibleSize['y']+'px';
	$S('imgEndColl').marginTop = (($D.page.visibleSize['y']-$D.basic.getSize('imgEndColl').y)/2)+"px";
	
};
$D.listener.push(window,'onresize',$D.global.REFRESH_COLLS);
$D.listener.push(window,'onload',$D.global.REFRESH_COLLS);

// Atualiza o tamanho e posição da barra de scroll quando necessário
$D.global.POSICIONA_BARRA = function() {
	
	var ST = $D.global.TOTAL_SIZE;
	var SV = $D.page.visibleSize['x'];
	var dif = ST - SV;
	
	if (dif < 0) {
		$D.global.POSICAO = 0;
		$S('setaEsq').top = '-100px';
		$S('setaDir').top = '-100px';
		$S('areaScroll').top = '-100px';
	}else{	
		$D.global.SIZE_SCROLL = $D.basic.getSize('scrollSite').x;
		$D.global.SIZE_BARRA = Math.max(400,$D.page.visibleSize['x']/2);
		$D.global.CENTER_BARRA = Math.ceil($D.global.SIZE_BARRA/2);
		$D.global.INIT_BARRA = Math.ceil($D.page.visibleSize['x']/2)-$D.global.CENTER_BARRA;
		
		$S('areaScroll').width = $D.global.SIZE_BARRA+'px';
		$S('areaScroll').top = ($D.page.visibleSize['y']-26)+'px';
		$S('areaScroll').left = $D.global.INIT_BARRA+'px';
		
		$S('setaEsq').top = ($D.page.visibleSize['y']-26)+'px';
		$S('setaEsq').left = ($D.global.INIT_BARRA-5)+'px';
		
		$S('setaDir').top = ($D.page.visibleSize['y']-26)+'px';
		$S('setaDir').left = ($D.global.INIT_BARRA+$D.global.SIZE_BARRA-5)+'px';
		
		$D.global.SIZE_BARRA = $D.global.SIZE_BARRA+12;
		
		$D.global.ddBarra.width = $D.global.SIZE_BARRA;
		
		$S('scrollSite').left = ((($D.global.SIZE_BARRA-$D.global.SIZE_SCROLL)*($D.global.POSICAO)/100)-6)+"px";
	}
	
};
$D.listener.push(window,'onresize',$D.global.POSICIONA_BARRA);
$D.listener.push(window,'onload',$D.global.POSICIONA_BARRA);

// Timer para o easing da rolagem
$D.global.TIMER_BARRA = new $D.timer();
$D.global.TIMER_BARRA.interval = 20;
$D.global.TIMER_BARRA.ontime = function() {
	
	var ease = 0.3;
	
	var ST = $D.global.TOTAL_SIZE;
	var SV = $D.page.visibleSize['x'];
	var PA = parseInt($S('total').left);
	var dif = ST - SV;
	
	if (dif < 0) {
		$D.global.POSICAO = 0;
		$S('setaEsq').top = '-100px';
		$S('setaDir').top = '-100px';
		$S('areaScroll').top = '-100px';
	}
	
	var newPos = dif * $D.global.POSICAO/-100;
	
	$S('total').left = PA + ((newPos-PA)*ease)+'px';
	
};
$D.listener.push(window,'onload',function(){
	$D.global.TIMER_BARRA.play();
});

// Variável de controle de leitura dos dados
$D.global.DADOS_STATUS = "waiting";

// Função que inicia a leitura dos dados
$D.listener.push(window,'onload',function(){
	if ($D.global.DADOS_STATUS == "waiting") {
		$D.global.DADOS_STATUS = "loading";
		var ajax = new $D.ajax({
			'method': 'POST',
			'url': '/portfolioJson/',
			'oncomplete': function() {
				var json = $D.json.decode(this.text);
				if (json.erro) {
					alert(json.erro);
					return false;
				}
				$D.global.DADOS_PORTFOLIO = json;
				$D.global.CRIA_PROJETOS();
				delete ajax;
			}
		});
		ajax.open();
	}
});

// Função que cria os elementos HTML do portifólio
$D.global.DADOS_HTML = new Array();
$D.global.MENU_TIPOS = new Array();
$D.global.DADOS_HTML_PROP = new Array();
$D.global.CRIA_PROJETOS = function() {
	
	var json = $D.global.DADOS_PORTFOLIO.tipos;
	for (var i = 0; i < json.length; i++) $D.global.MENU_TIPOS[json[i].id] = json[i].caption;
	
	json = $D.global.DADOS_PORTFOLIO.itens;
	for (var i = 0; i < json.length; i++) {
		$D.global.DADOS_HTML[i] = document.createElement('div');
		$D.global.DADOS_HTML[i].innerHTML = '<a href="'+json[i].link+'" target="_blank"><img src="'+json[i].img+'" width="300" height="200" /></a><div class="portfolioNome"><a href="'+json[i].link+'" target="_blank">'+json[i].caption+'</a></div><div class="portfolioTipo"><a href="'+json[i].link+'" target="_blank">'+$D.global.MENU_TIPOS[json[i].tipo]+'</a></div>';
		$D.global.DADOS_HTML[i].className = 'portfolio';
		$D.global.DADOS_HTML[i].id = 'portfolio_'+i;
		$D.global.DADOS_HTML[i].style.cssText = 'left:10px;top:10px;';
		$('itenPortfolio').appendChild($D.global.DADOS_HTML[i]);
	}
	
	json = $D.global.DADOS_PORTFOLIO.tipos;
	var html = '<table border="0" cellpadding="0" cellspacing="0" class="projEsc"><tr onclick="$D.global.FILTRA_ELEMENTOS(0);"><th>TODOS</th><td id="projEsc_0"></td></tr>';
	for (var i = 0; i < json.length; i++) html += '<tr onclick="$D.global.FILTRA_ELEMENTOS('+json[i].id+');"><th>'+json[i].caption2+'</th><td id="projEsc_'+json[i].id+'"></td></tr>';
	html += '</table>';
	$('projEsc').innerHTML = html;
	
	$D.global.DADOS_STATUS = "read";
	$D.global.FILTRA_ELEMENTOS(0);
	$D.global.ORGANIZA_ELEMENTOS();
	
};

// Função que filtra os elementos para porteriormente serem mostrados
$D.global.FILTRA_ELEMENTOS = function(id) {
	
	var json = $D.global.DADOS_PORTFOLIO.itens;
	
	for (var i = 0; i < json.length; i++) {
		if (id == 0 || id == json[i].tipo) {
			$D.global.DADOS_PORTFOLIO.itens[i].visible = true;
			$D.global.DADOS_HTML[i].style.display = '';
		} else {
			$D.global.DADOS_PORTFOLIO.itens[i].visible = false;
			$D.global.DADOS_HTML[i].style.display = 'none';
		}
	}
	
	json = $D.global.DADOS_PORTFOLIO.tipos;
	if (id == 0) $('projEsc_0').innerHTML = '<img src="/media/img/marcaCheckTipo.gif" width="6" height="6" />'; else $('projEsc_0').innerHTML = '';
	for (var i = 0; i < json.length; i++) if (json[i].id == id) $('projEsc_'+json[i].id).innerHTML = '<img src="/media/img/marcaCheckTipo.gif" width="6" height="6" />'; else $('projEsc_'+json[i].id).innerHTML = '';
	
	$D.global.ORGANIZA_ELEMENTOS();
	$D.global.POSICIONA_BARRA();
	
};

// Função que organiza na tela os elementos
$D.global.ORGANIZA_ELEMENTOS = function() {
	
	if ($D.global.DADOS_STATUS != "read") return;
	
	var json = $D.global.DADOS_PORTFOLIO.itens;
	var quantY = Math.floor(($D.page.visibleSize['y']-50)/241);
	var quantX = 0;
	var contY = 0;
	
	for (var i = 0; i < json.length; i++) {
		
		if ($D.global.DADOS_PORTFOLIO.itens[i].visible == false) continue;
		
		$D.global.DADOS_HTML[i].style.top = (10+contY*241)+'px';
		$D.global.DADOS_HTML[i].style.left = (10+quantX*322)+'px';
		
		if (++contY >= quantY) {
			contY = 0;
			quantX++;
		}
		
	}
	
	if (contY >= 1) quantX++;
	
	if((237+quantX*322) > ($D.page.visibleSize['x']-123)){
		$S('endColl').left = (237+quantX*322)+'px';
		$S('itenPortfolio').width = (10+quantX*322)+'px';
	}else{
		$S('endColl').left = ($D.page.visibleSize['x']-$D.basic.getSize('endColl').x)+"px";
		$S('itenPortfolio').width = ($D.page.visibleSize['x']-(227+$D.basic.getSize('endColl').x))+"px";
	}
	
	$D.global.TOTAL_SIZE = (237+quantX*322) + 100;
	
};
$D.listener.push(window,'onresize',$D.global.ORGANIZA_ELEMENTOS);

function handle(delta) {

	if (delta < 0) $D.global.POSICAO += 5; else $D.global.POSICAO -= 5;
	
	$D.global.POSICAO = Math.min(Math.max(0,$D.global.POSICAO),100);
	
	$S('scrollSite').left = ((($D.global.SIZE_BARRA-$D.global.SIZE_SCROLL)*($D.global.POSICAO)/100)-6)+"px";
	
}

/** Event handler for mouse wheel event.
 */
function wheel(event){
        var delta = 0;
        if (!event) /* For IE. */
                event = window.event;
        if (event.wheelDelta) { /* IE/Opera. */
                delta = event.wheelDelta/120;
                /** In Opera 9, delta differs in sign as compared to IE.
                 */
                if (window.opera)
                        delta = -delta;
        } else if (event.detail) { /** Mozilla case. */
                /** In Mozilla, sign of delta is different than in IE.
                 * Also, delta is multiple of 3.
                 */
                delta = -event.detail/3;
        }
        /** If delta is nonzero, handle it.
         * Basically, delta is now positive if wheel was scrolled up,
         * and negative, if wheel was scrolled down.
         */
        if (delta)
                handle(delta);
        /** Prevent default actions caused by mouse wheel.
         * That might be ugly, but we handle scrolls somehow
         * anyway, so don't bother here..
         */
        if (event.preventDefault)
                event.preventDefault();
	event.returnValue = false;
}

if (window.addEventListener) window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;