var $ = function (element) { return document.getElementById(element) };

var Portfolio = {
	showLarge: function (src) {
		$('modal').innerHTML = '<img src="files/'+src+'" alt='+src+' />';
		$('modal').style.display = 'block';
	},
	scanName: function (src) { return 'large_' + src.substr(-6); },
	show: function (portfolio) {
		if (portfolio == 'online') {
			$('online').style.display = 'block';
			$('offline').style.display = 'none';
			$('aba-online').className = 'selecionado';
			$('aba-offline').className = '';
		} else {
			$('online').style.display = 'none';
			$('offline').style.display = 'block';
			$('aba-offline').className = 'selecionado';
			$('aba-online').className = '';
		}
	}
};

var loadScripts = function () {
	
	var arrImages = document.getElementsByTagName('img');
	var arrLarges = Array();
	
	for (var i = 0; i < arrImages.length; i++) {
		var img = arrImages[i];

		arrLarges[i] = new Image();
		arrLarges[i].src = 'files/' + Portfolio.scanName(img.src);

		img.onclick = function () {
			Portfolio.showLarge(Portfolio.scanName(this.src));
			GA.track('/portfolio/' + Portfolio.scanName(this.src));
		}
	}
	
	Portfolio.show('online');

	$('modal').onclick = function () {
		$('modal').style.display = 'none';
	}
	
};

window.onload = function () { loadScripts(); }