var crtPage = 'works';
var crtLang = 'en';
var currentPainting = 0;
var firstVisible = 0;
var nVisible = 8;
var nPaintings = 0;
var paintingNodes;

function fadeAndMove(index) {
  if(index < 0 || index >= nPaintings)
    return;

  var theImg = dojo.byId("theImg");
  theImg.onload=fadeIn; //call image fadeIn when the image has loaded
  
  var oldThumb = dojo.byId("thumb" + currentPainting);
  var newThumb = dojo.byId("thumb" + index);
  oldThumb.className = (currentPainting == 0) ? "firstThumb" : "thumb"; 
  newThumb.className = (index == 0) ? "firstThumbSelected" : "thumbSelected";  

  dojo.fadeOut({ node:"theText" }).play();
  dojo.fadeOut({ node:"theImg", onEnd:function() { 
  	move(index);
	}}).play();
}

function move(index) {
  if(index < 0 || index >= nPaintings)
    return;

  currentPainting = index;
  var name = paintingNodes[currentPainting].getAttribute('name_'+crtLang);
  var file = paintingNodes[currentPainting].getAttribute('file');
  var price = paintingNodes[currentPainting].getAttribute('price');
  var size = paintingNodes[currentPainting].getAttribute('size');
  var medium = paintingNodes[currentPainting].getAttribute('medium_'+crtLang);
  var year = paintingNodes[currentPainting].getAttribute('year');

  var zoomLink = dojo.byId('zoomLink');
  zoomLink.href = "works/medium/" + file;
  
  var largeZoomLink = dojo.byId('largeZoomLink');
  largeZoomLink.href = "works/large/" + file;
  
  var theImg = dojo.byId("theImg");
  theImg.alt = name;
  theImg.title = name;
  theImg.src = "works/small/" + file;

  var theName = dojo.byId('theName');
  theName.innerHTML = name;

  var theMedium = dojo.byId('theMedium');
  theMedium.innerHTML = medium;

  var theSize = dojo.byId('theSize');
  theSize.innerHTML = size;

  var thePrice = dojo.byId('thePrice');
  thePrice.innerHTML = price;
 
  if( price == null || price == "Collected" || price == "Sold")
  	dojo.byId('contactInfo').style.visibility = "hidden";
  else
  	dojo.byId('contactInfo').style.visibility = "visible";
}  

function fadeIn() {
  dojo.fadeIn({ node:"theImg" }).play();
  dojo.fadeIn({ node:"theText" }).play();
}

function showThumbs() {
  var thumbsScroll = dojo.byId("thumbsScroll");
  thumbsScroll.innerHTML = "<div id='thumbList'></div>";

  var i=0;
  var thumbList = dojo.byId("thumbList");
  for(i=0; i<nPaintings; i++) {
    var name = paintingNodes[i].getAttribute('name_'+crtLang);;
  	var file = paintingNodes[i].getAttribute('file');
    thumbList.innerHTML += "<a href='works/small/" + file + "' onclick='return false;' title='" + name + "' target='_blank'><img id='thumb" + i + "' alt='" + name + "' width='60' height='60' class='" + 
    	((i == 0) ? "firstThumb" : "thumb") + ((i == currentPainting) ? "Selected" : "") + "' onclick='fadeAndMove(" + i + ")'/></a>";
  }
}

var steps = 0;
var nSteps = 10;
var stepSize = null;
var scrollToX = null;
var interval = null;
function doScroll() {
	dojo.byId("thumbsScroll").scrollLeft += stepSize;
	if(++steps > nSteps) {
		steps = 0;
		dojo.byId("thumbsScroll").scrollLeft = scrollToX;
		clearInterval(interval);
		interval = null;
	}
}

function smoothScroll(toX) {
	var fromX = dojo.byId("thumbsScroll").scrollLeft;
	if(Math.abs(fromX - toX) < nSteps)
		dojo.byId("thumbsScroll").scrollLeft = toX;
	scrollToX = toX;
	steps = 0;
	stepSize = (toX - fromX) / nSteps;
	interval = setInterval(doScroll, 20);
}

function prev() {
	if(interval != null)
		return;

	var newCurrent = currentPainting - 1;
	if( newCurrent >= 0 ) {
		if(newCurrent < firstVisible)
			prevPage(newCurrent);
		else
			fadeAndMove(newCurrent);
	}
}

function next() {
	if(interval != null)
		return;

	var newCurrent = currentPainting + 1;
	if( newCurrent < nPaintings ) {
		if(newCurrent > firstVisible + 7)
			nextPage(newCurrent);
		else
			fadeAndMove(newCurrent);
	}
}

function prevPage(newCurrent) {
	if(interval != null)
		return;

	var newFirst = firstVisible - nVisible;
	if(newFirst - nVisible < 0) {
		newFirst = 0;
	}
	if(newFirst != firstVisible) {
		firstVisible = newFirst;
		smoothScroll(firstVisible * 70);
		if(newCurrent != null)
			fadeAndMove(newCurrent);
		else
			fadeAndMove(firstVisible);
	}
}

function nextPage(newCurrent) {
	if(interval != null)
		return;

	var newFirst = firstVisible + nVisible;
	if(newFirst + nVisible > nPaintings) {
		newFirst = nPaintings - nVisible;
	}
	if(newFirst != firstVisible) {
		firstVisible = newFirst;
		smoothScroll(firstVisible * 70);
		if(newCurrent != null)
			fadeAndMove(newCurrent);
		else
			fadeAndMove(firstVisible);
	}
}

var playInterval = null;
function play() {
	if(playInterval != null)
		clearInterval(playInterval);

  dojo.style("stopBtn","opacity","0");
  dojo.fadeOut({ node:'playBtn', onEnd:function() { 
			dojo.byId("playBtn").style.display = "none";
			dojo.byId("stopBtn").style.display = "inline";
			dojo.fadeIn({ node:'stopBtn'} ).play();
	}}).play();


	smoothScroll(0);
	fadeAndMove(0);
	playInterval = setInterval(next, 3000);
}

function stop() {
	if(playInterval != null)
		clearInterval(playInterval);

  dojo.fadeOut({ node:'stopBtn', onEnd:function() { 
			dojo.byId("stopBtn").style.display = "none";
			dojo.byId("playBtn").style.display = "inline";
			dojo.fadeIn({ node:'playBtn'} ).play();
	}}).play();
}

function loadThumbs() {
  for(var i=0; i<nPaintings; i++) {
    var file = "works/thumbs/" + paintingNodes[i].getAttribute('file');
    dojo.byId("thumb"+i).src = file;
  }
}

function showPaintings(){
  paintingNodes = dojo.byId("paintingsList").getElementsByTagName('img');
  nPaintings = paintingNodes.length;
  showThumbs();
  var theImg = dojo.byId("theImg");
  theImg.onload=fadeContentIn;
  move(currentPainting);
  loadThumbs();
}

function fadeContentIn() {
  dojo.fadeIn({ node:'content', onEnd: function() {
			var thumbsScroll = dojo.byId("thumbsScroll");
			if(thumbsScroll != null && typeof(thumbsScroll) != "undefined")
		  	thumbsScroll.focus();
		} }).play();
}

function showPage(page, lang) {
	if(page != null && typeof(page) != "undefined")
		crtPage = page;
	if(lang != null && typeof(lang) != "undefined")
		crtLang = lang;
	dojo.style("content","opacity","0");
	dojo.byId('languageSelector').innerHTML = dojo.byId('languageSelector_' + crtLang).innerHTML;
	dojo.byId('menu').innerHTML = dojo.byId('menu_' + crtLang).innerHTML;
	dojo.byId('page').innerHTML = dojo.byId(crtPage + '_' + crtLang).innerHTML;

	if(crtPage == "works")
		showPaintings();

	fadeContentIn();
}