var rut = 'work/category/'



/**
 * @author fabian to liquid
 */
var imageCurrent = 0;
var categoryCurrent = 'print';
var projectCurrent = null;
var table;
var rowsTable; 
window.onload = function(){	startFunctions();}
function startFunctions()
{
	table = null;
	rowsTable = columsTable = 3; 
	addElems(print);
	
	document.getElementById('print').onclick = loadCategory;
	document.getElementById('web').onclick = loadCategory;
	document.getElementById('brand').onclick = loadCategory;
	
	document.getElementById('next').onclick = showImageNext;
	document.getElementById('preview').onclick = showImagePreview;
	
	putTextProject(0);
	imageSlide(0);
}
function createTable()
{
	if (table)						
	{
		var t =	document.getElementById('table');
		document.getElementById('table').parentNode.removeChild(t);
		table = null;
	}	
	table = document.createElement('table');	
	table.id = 'table';
}
function addElems(project)
{
	createTable();
	var myRows = new Array();
	for (var i = 0, fils = 0; i < project.proj.length && fils < rowsTable;i++)
	{
		if (project  && project.proj )
		{
			myRows[myRows.length] = document.createElement('tr');
			fils++;
			myRows[myRows.length-1].className = 'row';	
			for (var col = 0; col < columsTable;col++)
			{
				var cell  = document.createElement('td');
				cell.id = null;
				cell.className = 'cell';
				cell.id = i + col;
				cell.onclick = showImage;
				loadCell(cell,project,i + col);

				if (project.first)
					myRows[myRows.length-1].appendChild(cell);
			}
			i = i + 2;
		}
	}
	for (var i = 0; i < myRows.length;i++)
		table.appendChild(myRows[i]);			
	document.getElementById('panel').appendChild(table);
}
function loadCell(cel,project,position)
{
	var url =	'url(' + rut + categoryCurrent + '/' + project.proj[position] + '/min/' + project.first[position] + ')';
	cel.style.background = url + ' no-repeat top left';
}
function putTextProject(id)
{
	switch (categoryCurrent)
	{
		case 'print':	document.getElementById('title1').innerHTML = print.text[id][0];
						document.getElementById('text1').innerHTML = print.text[id][1];
						document.getElementById('title2').innerHTML = print.text[id][2];
						document.getElementById('text2').innerHTML = print.text[id][3];
						break;
		case 'web': 	
						document.getElementById('title1').innerHTML = web.text[id][0];
						document.getElementById('text1').innerHTML = web.text[id][1];
						document.getElementById('title2').innerHTML = web.text[id][2];
						document.getElementById('text2').innerHTML = web.text[id][3];
						break;
		case 'brand':	
						document.getElementById('title1').innerHTML = brand.text[id][0];
						document.getElementById('text1').innerHTML = brand.text[id][1];
						document.getElementById('title2').innerHTML = brand.text[id][2];
						document.getElementById('text2').innerHTML = brand.text[id][3];
						break;
	}
}
function showImage()
{	var url = '';
	projectCurrent = this.id;
	putTextProject(this.id);
	imageCurrent = 0;
	switch (categoryCurrent)
	{
		case 'print':	url = 'url(' + rut + categoryCurrent + '/' + print.proj[this.id] + '/max/' + print.imgs[this.id][imageCurrent++] + ')'; 
						if (print.imgs[this.id].length > imageCurrent)
							document.getElementById('next').style.display = '';
						else
							document.getElementById('next').style.display = 'none';
						break;
		case 'web': 	url = 'url(' + rut + categoryCurrent + '/' + web.proj[this.id] + '/max/' + web.imgs[this.id][imageCurrent++] + ')'; 
						if (web.imgs[this.id].length > imageCurrent)
							document.getElementById('next').style.display = '';
						else
							document.getElementById('next').style.display = 'none';
						break;
		case 'brand':	url = 'url(' + rut + categoryCurrent + '/' + brand.proj[this.id] + '/max/' + brand.imgs[this.id][imageCurrent++] + ')'; 
						if (brand.imgs[this.id].length > imageCurrent)
							document.getElementById('next').style.display = '';
						else
							document.getElementById('next').style.display = 'none';
						break;
	}	
	document.getElementById('image').style.background = url + ' no-repeat top left';
	document.getElementById('preview').style.display = 'none';
}
function loadCategory()
{
	if (this.id == 'print' || this.id == 'web' || this.id == 'brand')
		categoryCurrent = this.id;
	
	switch (this.id)
	{
		case 'print':	addElems(print);
						document.getElementById('print').className = 'select';
						document.getElementById('web').className = 'deselect';
						document.getElementById('brand').className = 'deselect';
						break;
		case 'web':		addElems(web); 
						document.getElementById('print').className = 'deselect';
						document.getElementById('web').className = 'select';
						document.getElementById('brand').className = 'deselect';
						break;
		case 'brand': 	addElems(brand); 
						document.getElementById('print').className = 'deselect';
						document.getElementById('web').className = 'deselect';
						document.getElementById('brand').className = 'select';
						break;
	}	
	imageSlide(0);	
}
function imageSlide(pos)
{
	var myURL = 'url(' + rut + categoryCurrent + '/';
	switch (categoryCurrent)
	{
		case 'print':	myURL += print.proj[pos] + '/max/' + print.imgs[pos][0] + ')'; 
						if (print.imgs[pos].length > imageCurrent)
							document.getElementById('next').style.display = '';
						else
							document.getElementById('next').style.display = 'none';
						break;
		case 'web':		myURL += web.proj[pos] + '/max/' + web.imgs[pos][0] + ')'; 
						if (web.imgs[pos].length > imageCurrent)
							document.getElementById('next').style.display = '';
						else
							document.getElementById('next').style.display = 'none';
						break;
		case 'brand': 	myURL += brand.proj[pos] + '/max/' + brand.imgs[pos][0] + ')'; 
						if (brand.imgs[pos].length > imageCurrent)
							document.getElementById('next').style.display = '';
						else
							document.getElementById('next').style.display = 'none';
						break;
	}	
	
	document.getElementById('image').style.background = myURL + ' no-repeat top left';
	document.getElementById('preview').style.display = 'none';
}
function showImageNext()
{
	var url = '';
	switch (categoryCurrent)
	{
		case 'print':	url = 'url(' + rut + categoryCurrent + '/' + print.proj[projectCurrent] + '/max/' + print.imgs[projectCurrent][imageCurrent++] + ')'; 
						if (imageCurrent == print.imgs[projectCurrent].length)
						{
							document.getElementById('next').style.display = 'none';
							imageCurrent -= 2;
						}
						break;
		case 'web':		url = 'url(' + rut + categoryCurrent + '/' + web.proj[projectCurrent] + '/max/' + web.imgs[projectCurrent][imageCurrent++] + ')'; 
						if (imageCurrent == web.imgs[projectCurrent].length)
						{
							document.getElementById('next').style.display = 'none';
							imageCurrent -= 2;
						}
						break;
		case 'brand':	url = 'url(' + rut + categoryCurrent + '/' + brand.proj[projectCurrent] + '/max/' + brand.imgs[projectCurrent][imageCurrent++] + ')'; 
						if (imageCurrent == brand.imgs[projectCurrent].length)
						{
							document.getElementById('next').style.display = 'none';
							imageCurrent -= 2;
						}
						break;
	}	
	document.getElementById('image').style.background = url + ' no-repeat top left';
	
	document.getElementById('preview').style.display = '';
}
function showImagePreview()
{
	var url = '';
	switch (categoryCurrent)
	{
		case 'print':	url = 'url(' + rut + categoryCurrent + '/' + print.proj[projectCurrent] + '/max/' + print.imgs[projectCurrent][imageCurrent--] + ')'; 
						
						
						break;
		case 'web':		url = 'url(' + rut + categoryCurrent + '/' + web.proj[projectCurrent] + '/max/' + web.imgs[projectCurrent][imageCurrent--] + ')'; 
						if (imageCurrent > web.imgs[projectCurrent].length - 1)
							document.getElementById('next').style.display = '';
						break;
		case 'brand':	url = 'url(' + rut + categoryCurrent + '/' + brand.proj[projectCurrent] + '/max/' + brand.imgs[projectCurrent][imageCurrent--] + ')'; 
						if (imageCurrent > brand.imgs[projectCurrent].length - 1)
							document.getElementById('next').style.display = '';
						break;
	}	
	document.getElementById('image').style.background = url + ' no-repeat top left';
	if (imageCurrent < 0) 
	{
		document.getElementById('preview').style.display = 'none';
		imageCurrent = 1;
	}
	document.getElementById('next').style.display = '';
}