var portfolio = new Array ();

var imgHome = new Array ();

var imgTitle = new Array ();

var imgId = new Array ();
var typeId = new Array ();
var descId = new Array ();
var TitleId = new Array ();

var imgWeb = new Array ();
var typeWeb = new Array ();
var descWeb = new Array ();
var TitleWeb = new Array ();

var imgGraphic = new Array ();
var typeGraphic = new Array ();
var descGraphic = new Array ();
var TitleGraphic = new Array ();

var imgArt = new Array ();
var typeArt = new Array ();
var descArt = new Array ();
var TitleArt = new Array ();

// HomePage (first) Image: Random

imgHome[0] = ['images/photo-900x420-5.jpg'];
imgHome[1] = ['images/photo-900x420-6.jpg'];
imgHome[2] = ['images/photo-900x420-8.jpg'];
imgHome[3] = ['images/photo-900x420-11.jpg'];

// (Logo) + Title

imgTitle[0] = ['images/Logo_portfolio.gif'];
imgTitle[1] = ['images/Logo_portfolio.gif'];
imgTitle[2] = ['images/Logo_portfolio.gif'];
imgTitle[3] = ['images/Logo_portfolio.gif'];

// Portfolio: VISUAL Identity

imgId[0] = ['images/identity/rainbridge-logos-set1.jpg', 'Rainbridge logos SET 1', 'This is a first set of samples for Rainbridge logo 2008', 'images/Logo_visualid.gif'];
imgId[1] = ['images/identity/rainbridge-logos-set2.jpg', 'Rainbridge logos SET 2', 'This is a second set of samples for Rainbridge logo 2008'];
imgId[2] = ['images/identity/Integra-logos1.jpg', 'Integra logos set', 'A set of samples for Integra logos'];
imgId[3] = ['images/identity/Malaika-logos.jpg', 'Malaika logo <span class="type_normal">(English and Slovak version)</span>', 'Maliaka is a Slovak civic association formed to support children at risk in Africa. To view a website, <a id="desc_link" href="http://www.malaika.sk" target="_blank" onclick="return hs.htmlExpand(this,{ objectType: ’iframe’ } )"> click here</a>.'];
imgId[4] = ['images/identity/children-garden-3D.jpg', 'Children`s Garden', 'Children`s Garden is a non-profit charity established to help impoverished and abandoned children in the Kawangware slum, Nairobi, Kenya.'];
imgId[5] = ['images/identity/MosesNdungu-3D.jpg', 'Business card sample', ''];
imgId[6] = ['images/identity/Rainbridge-3D-1.jpg', 'Rainbridge logo sample', ''];
imgId[7] = ['images/identity/Rainbridge-1.jpg', 'Rainbridge logo samples', ''];
imgId[8] = ['images/identity/Rainbridge-2.jpg', 'Rainbridge logo sample', ''];
imgId[9] = ['images/identity/Rainbridge-3.jpg', 'Rainbridge logo sample', ''];
imgId[10] = ['images/identity/Rainbridge-4.jpg', 'Rainbridge logo sample', ''];
imgId[11] = ['images/identity/Rainbridge-5.jpg', 'Rainbridge logo sample', ''];
imgId[12] = ['images/identity/Rainbridge-6.jpg', 'Rainbridge logo sample', ''];
imgId[13] = ['images/identity/Rainbridge-7.jpg', 'Rainbridge logo sample', ''];
imgId[14] = ['images/identity/Rainbridge-8.jpg', 'Rainbridge logo sample', ''];
imgId[15] = ['images/identity/Integra-1.jpg', 'Integra logo sample', ''];
imgId[16] = ['images/identity/Integra-2.jpg', 'Integra logo sample', ''];
imgId[17] = ['images/identity/Integra-3.jpg', 'Integra logo sample', ''];
imgId[18] = ['images/identity/Integra-4.jpg', 'Integra logo sample', ''];

// Portfolio: Web

imgWeb[0] = ['images/web/FlexibleLayout-web.jpg', 'Flexible Layout Template', 'What is an Elastic Layout? An elastic layout scales with users` text size. Elastic design uses <span class="desc_italic">em</span> values instead of <span class="desc_italic">pixels</span> for all elements. <br /><a id="desc_link" href="images/web/Elastic-layout-full.png" onclick="return hs.expand(this)">click here to view in full size (1:1).</a><div class="highslide-caption">What is an Elastic Layout? An elastic layout scales with users` text size. Elastic design uses <span class="desc_italic">em</span> values instead of <span class="desc_italic">pixels</span> for all elements. <span class="highslide-caption-bold">Flexible "Elastic" Layout</span></div>', 'images/Logo_webdesign.gif'];
imgWeb[1] = ['images/web/Malaika-web.jpg', 'Malaika Website', 'Maliaka is a Slovak civic association formed to support children at risk in Africa. To view a website, <a id="desc_link" href="http://www.malaika.sk" target="_blank" onclick="return hs.htmlExpand(this,{ objectType: ’iframe’ } )"> click here</a>.'];
imgWeb[2] = ['images/web/TenSensesAfrica-web.jpg', 'Ten Senses Africa website', 'Ten Senses Africa will bring the first fair trade certified macadamia nuts to the European market. To view a website, <a id="desc_link" href="http://www.tensensesafrica.com" target="_blank" onclick="return hs.htmlExpand(this,{ objectType: ’iframe’ } )"> click here</a>.'];
imgWeb[3] = ['images/web/OilPartner-web.jpg', 'Oil Partner Template', 'This is a sample design for Oil Partner. <a id="desc_link" href="images/web/OilPartner-full.jpg" onclick="return hs.expand(this)">Click here</a> to view this template in full size (1:1).<div class="highslide-caption"><span class="highslide-caption-bold">Oil Partner</span></div>'];
imgWeb[4] = ['images/web/Prielom-web-1.jpg', 'Prielom Website #1', 'This is a first sample design for Prielom website. <a id="desc_link" href="images/web/Prielom-1-full.jpg" onclick="return hs.expand(this)">Click here</a> to view this template in full size (1:1).<div class="highslide-caption"><span class="highslide-caption-bold">Prielom template #1</span></div>'];
imgWeb[5] = ['images/web/Prielom-web-2.jpg', 'Prielom Website #2', 'Second template for Prielom website. The whole website is made in accordian effect, with a dark background. <a id="desc_link" href="images/web/Prielom-2-full.jpg" onclick="return hs.expand(this)">Click here</a> to view this template in full size (1:1).<div class="highslide-caption">The whole website is made in accordian effect, with a dark background. <span class="highslide-caption-bold">Prielom template #2</span></div>'];
imgWeb[6] = ['images/web/GloryEnglish-web.jpg', 'Glory Website Template', 'This is a sample design for Glory website. This template is 100% tabelles layout, made in z-index form (layers). <a id="desc_link" href="images/web/Glory-full.jpg" onclick="return hs.expand(this)">Click here</a> to view in full size (1:1).<div class="highslide-caption">This template is 100% tabelles layout. Tested and working perfectly in Firefox 2.x, Opera, Safari and finally fixed problems in IE (Internet Explorer) 6 and 7. <span class="highslide-caption-bold">Glory Website Template</span></div>'];
imgWeb[7] = ['images/web/dragan-art-web.jpg', 'DRAGAN-ART PASSAGE', 'This is my "Artist portfolio" website,<a id="desc_link" href="art/index.html" target="_blank" title="DRAGAN-ART PASSAGE" onclick="return hs.htmlExpand(this,{ objectType: ’iframe’ } )"> click here to visit</a>. I`m an academic artist, a painter, so I putted my art-work, the paintings in flash, dynamic site form. <a id="desc_link" href="images/web/dragan-art-full.jpg" onclick="return hs.expand(this)">Click here</a> to see it in full size (1:1).<div class="highslide-caption">This is a dynamic flash website of my art-work, paintings that I did. I called it "Dragan-art passage", the passage where you can observe my art. <span class="highslide-caption-bold">DRAGAN-ART PASSAGE</span></div>'];

// Portfolio: Graphic Design

imgGraphic[0] = ['images/Graphic/WiMAX-Christmas-3D.jpg', 'WiMAX Christmas Invitation', '', 'images/Logo_graphicdesign.gif'];
imgGraphic[1] = ['images/Graphic/AmaroDel-3D.jpg', 'Amaro Del CD', ''];
imgGraphic[2] = ['images/Graphic/EpicStories-3D.jpg', 'Epic Stories', ''];
imgGraphic[3] = ['images/Graphic/infoSERVES.jpg', 'Infoserve Magazine', ''];
imgGraphic[4] = ['images/Graphic/infoSERVE-inside.jpg', 'Infoserve inside', ''];
imgGraphic[5] = ['images/Graphic/RomaBrochure1.jpg', 'Brochure in full colors - front', ''];
imgGraphic[6] = ['images/Graphic/RomaBrochure2.jpg', 'Brochure in full colors - back', ''];

// Portfolio: Art

imgArt[0] = ['images/Art/Biblical_Themes-art.jpg', 'Oil Paintings', 'Biblical Themes. <a id="desc_link" href="art/index.html" target="_blank" title="DRAGAN-ART PASSAGE"> Click here</a> to visit website.', 'images/Logo_art.gif'];
imgArt[1] = ['images/Art/Inspirational_Themes-art.jpg', 'Oil Paintings', 'Inspirational Themes. <a id="desc_link" href="art/index.html" target="_blank" title="DRAGAN-ART PASSAGE"> Click here</a> to visit website.'];


var image_num = 0;
var Q = imgHome.length;

function homeRandom() {
	var whichHomeImg=Math.round(Math.random()*(Q-1));
	$('portfolio_image').src = imgHome[whichHomeImg];
	$('title').src = imgTitle[whichHomeImg];
	$('type').innerHTML = 'Portfolio';
	$('desc').innerHTML = 'Graphic design, user interface design/developing with latest applications. Contemplative design for print, with vector graphics.';	
}

function home () {
	$('portfolio_image').src = 'images/spacer.gif';	
	homeRandom();
	$('navigation').style.visibility = 'hidden';
}

function portfolioId () {
	$('portfolio_image').src = 'spacer.gif';
	$('identity').className = 'current';
	$('interface').className = '';
    $('graphic').className = '';
	$('art').className = '';
	image_num = 0;
	portfolio = imgId.slice(0);
	$('portfolio_image').src = portfolio[0][0];
	$('type').innerHTML = portfolio[0][1];
	$('desc').innerHTML = portfolio[0][2];
	$('title').src = portfolio[0][3];
	$('itemnum').innerHTML = '0' + (image_num+1) + '.';		
	$('navigation').style.visibility = 'visible';
	$('itemnum').style.display = 'block';	
}
	
function portfolioWeb () {
	$('portfolio_image').src = '';
	$('identity').className = '';
	$('interface').className = 'current';
    $('graphic').className = '';
	$('art').className = '';
	image_num = 0;	
	portfolio = imgWeb.slice(0);
	$('portfolio_image').src = portfolio[0][0];
	$('type').innerHTML = portfolio[0][1];
	$('desc').innerHTML = portfolio[0][2];
	$('title').src = portfolio[0][3];
	$('itemnum').innerHTML = '0' + (image_num+1) + '.';	
	$('navigation').style.visibility = 'visible';
	$('itemnum').style.display = 'block';
}

function portfolioGraphic () {
	$('portfolio_image').src = '';
	$('identity').className = '';
	$('interface').className = '';
    $('graphic').className = 'current';
	$('art').className = '';
	image_num = 0;
	portfolio = imgGraphic.slice(0);
	$('portfolio_image').src = portfolio[0][0];
	$('type').innerHTML = portfolio[0][1];
	$('desc').innerHTML = portfolio[0][2];
	$('title').src = portfolio[0][3];
	$('itemnum').innerHTML = '0' + (image_num+1) + '.';
	$('navigation').style.visibility = 'visible';
	$('itemnum').style.display = 'block';
}

function portfolioArt () {
	$('portfolio_image').src = '';
	$('identity').className = '';
	$('interface').className = '';
    $('graphic').className = '';
	$('art').className = 'current';
	image_num = 0;
	portfolio = imgArt.slice(0);
	$('portfolio_image').src = portfolio[0][0];
	$('type').innerHTML = portfolio[0][1];
	$('desc').innerHTML = portfolio[0][2];
	$('title').src = portfolio[0][3];
	$('itemnum').innerHTML = '0' + (image_num+1) + '.';
	$('navigation').style.visibility = 'visible';
	$('itemnum').style.display = 'block';
}


function nextslide() {
	$('portfolio_image').src = 'images/spacer.gif';
	image_num++;
	if (image_num == portfolio.length) {
		image_num = 0;
		}
	$('portfolio_image').src = portfolio[image_num][0];
	$('type').innerHTML = portfolio[image_num][1];
	$('desc').innerHTML = portfolio[image_num][2];
	$('itemnum').innerHTML = '0' + (image_num+1) + '.';
}
	
function prevslide() {
	$('portfolio_image').src = 'images/spacer.gif';
	image_num--;
	if (image_num <= -1) {
		image_num = (portfolio.length-1);
		}
	$('portfolio_image').src = portfolio[image_num][0];
	$('type').innerHTML = portfolio[image_num][1];
	$('desc').innerHTML = portfolio[image_num][2];
	$('itemnum').innerHTML = '0' + (image_num+1) + '.';
}

window.addEvent('load', function(){
		homeRandom();
});