PORTFOLIO = {
    sidebar : '',
    main    : ''
    
};

function showpage(pagenr, pagecount) {
	for (var i=0; i<pagecount; i++) {
		var pageclass = (i==pagenr) ? 'show' : 'hide';
		document.getElementById('sidebarpage'+i).setAttribute('class',pageclass);
		document.getElementById('sidebarpage'+i).setAttribute('className',pageclass);
		var linkclass = (i==pagenr) ? 'active' : 'inactive';
		document.getElementById('pagelink'+i).setAttribute('class',linkclass);
		document.getElementById('pagelink'+i).setAttribute('className',linkclass);
	}
}

function showmain (f) {
    document.getElementById('mainfoto').src = f;
}

    if (typeof(fotos) != 'undefined') {
    
        // rock and roll!  
        // fotos, thumbsmap, imagemap
        PORTFOLIO.fotos  = fotos;
        var totalfotos   = fotos.length;
        var fotosPerPage = 10;
        var pagecount    = Math.ceil( totalfotos / fotosPerPage );
        var pageclass    = 'show';
        var pagemenu     = '';
        var linkclass    = 'active';
		// console.log(pagecount);
		
		
		for (var i=0; i<pagecount; i++) {
			pagemenu += '<a id="pagelink'+i+'" class="'+linkclass+'" onclick="showpage('+i+','+pagecount+'); return false;">'+(i+1)+'</a> ';
			linkclass = 'inactive';
		}
		PORTFOLIO.sidebar += '<p>'+pagemenu+'</p>';
		
        for (var i in fotos) {
            var foto = fotos[i];
            if (PORTFOLIO.main == '') {
                PORTFOLIO.main = '<img src="'+ imagemap + foto + '" id="mainfoto" />';
            }
			if ((i % fotosPerPage)==0) { 
				PORTFOLIO.sidebar += '<div id="sidebarpage'+(Math.floor( i / fotosPerPage ))+'" class="'+pageclass+'">';
				pageclass='hide';
			}
            PORTFOLIO.sidebar += '<img src="' + thumbsmap + foto + '" id="thumb' + i + '" onclick="showmain(\'' + imagemap + foto + '\'); return false;" />';
			if ((i % fotosPerPage)==(fotosPerPage-1)) { 
				PORTFOLIO.sidebar += '</div>';
			}
        }
		if ((pagecount!=0) && (i % fotosPerPage)!=(fotosPerPage-1)) { 
			PORTFOLIO.sidebar += '</div>';
		}
        
		



        // put the stuff in place
        document.getElementById('content').innerHTML += '<div class="portfolio">' + PORTFOLIO.main + '</div>';
        document.getElementById('rightcolumn').innerHTML = '<div class="portfolio">' + PORTFOLIO.sidebar + '</div>';
        
        // add listeners to the images 
    
    }