var listGalleries = [];
var mainView = null;
var currentPicture = 0;
var holders = ['wrapper','oneWrapper'];
var scrollWidget = null;
var imagesSrc = [];
var currentDir = '';
var currentGName = '';
var buttonsFlag = false;
var bigPictureHeight = '404';
var numberPictures = 0;
var bigPictures = null;
var subsription = 0;
var gPath = '/g/';
var URL  = '/cgi-bin/dg?dir=';

	
function onSliderChange(){
	dojo.byId('horizontalSlider').value = arguments[0];
	var g = dojo.byId('galleries');
	var h = parseInt(g.clientHeight);
	var ul = dojo.byId('menu_ul');
	var offset = parseInt(ul.offsetHeight)+14;

	if (h>=offset){ return; }
	var top = parseInt(ul.style.top) || 0;
	if (arguments[0] == 0){
		ul.style.top = '0px';
	}
	var scr = dijit.byId('horizontalSlider').maximum / (offset-h);
	ul.style.top = -(Math.ceil(arguments[0] / scr)) + 'px';
}
function mainGallery(){
	
	var d = dojo.byId('menu_ul');
	var bod = dojo.byId('bod');
	bod.style.opacity = 0;
	d.style.visibility = 'visible';
	d.style.top = '0px';
	var g = dojo.byId('horizontalSlider').style.display = 'block';
	dojo.fx.chain([dojo.fadeIn({node:bod,duration:3000})]).play();
	
	dojo.query(".dijitSliderDecrementIconH > span").empty();
	dojo.query(".dijitSliderIncrementIconH > span").empty();
	

	
	dojo.byId('wrapper').style.display = 'block';
	dijit.byId('wrapper').layout();
	

	var li = dojo.query("#menu_ul > li").connect("onclick",getGallery);
	for (var i=0;i<li.length;i++){
		listGalleries[i] = { 
			dir:li[0].getAttribute('dir'),
			gname:li[i].getAttribute('gname'),
			thumb:li[i].getAttribute('thumb'),
			index:li[i].getAttribute('index')
		};
	}
	dojo._destroyElement(dojo.byId('Loading'));
	drawNumberGalleries();
}

function getGallery(e){
	if (!e) { e = window.event }
	var gal = dojo.byId('wrapper');
	gal.style.cursor = 'wait';
	var dir = e.currentTarget.getAttribute('dir');
	var gname = e.currentTarget.getAttribute('gname');
	var thumb = e.currentTarget.getAttribute('thumb');
	//var index = e.currentTarget.getAttribute('index');
	currentDir = dir;
	currentGName = gname;
	bigPictures = new Array();
	currentPicture = 0;
	numberPictures = 0;
	imagesSrc = [];
	

	dojo.xhrGet({
		url: URL+dir,
		handleAs:'xml',
		preventCache: true,
		timeout: 5000,
		load:function(response,ioArgs){
			switchView('oneWrapper');
			var movie = dojo.byId('Movie');
			var imgs = response.getElementsByTagName("image");
			numberPictures = imgs.length;
			
			var mH = dojo.byId('movieHolder');
			mH.innerHTML = '';
			
			var t = document.createElement('table');
			t.id = 'tholder';
			mH.appendChild(t);
			var the = document.createElement('thead');
			var tr = document.createElement('tr');
			var te = document.createElement('td');
			tr.appendChild(te);
			the.appendChild(tr);
			t.appendChild(the);
			var tb = document.createElement('tbody');
			t.appendChild(tb);
			tr = document.createElement('tr');
			tr.id = 'trholder';
			tb.appendChild(tr);
			//var tr = dojo.byId('trholder');
			//tr.innerHTML = '';
			
			for (var i=0;i<imgs.length;i++ ){
				var img = imgs[i].firstChild.nodeValue;
				imagesSrc[i] = { ind:i,src:img };
				var newImg = new Image();
				newImg.src = gPath+dir+'/thumbnails/'+img;
				newImg.height = "56";
				newImg.style.cursor = 'pointer';
				newImg.id = 'thumb_'+i;
				if (i==0){
					newImg.style.opacity = 0.5;
				} else { newImg.style.opacity = '0.999'; }
				newImg.onclick = function(i){
					return function(e){
						dojo.publish('/click/on/thumb',[i]);
						e.currentTarget.style.opacity = '0.5';
					};
				}(i);
				var td = document.createElement('td');
				td.appendChild(newImg);
				tr.appendChild(td);
			}
			
			/*if (typeof subscription != 'undefined'){
				console.log('Undef');
				dojo.unsubscribe(subscription);
				console.log(subscription);
				subscription = null;
				console.log(subscription);
			}*/
			if (subsription==0){
				dojo.subscribe('/click/on/thumb',connectToPrevNext);
				subsription = 1;
			}
			printBigPicture(0);
			var galName = dojo.byId('gname_label');
			galName.innerHTML = currentGName;
			
			//printBigPicture(0);
			
			makeScrollPane();
			
			addButtons();
			
			createNameGallery(gname);
			createNextPrev();
			
			createCurrentThumbnail();
			
			//Refresh();
			return response;
		},
		error:function(response,ioArgs){
			alert('Error loading gallery: '+gname);
			return response;
		}
	});
}
function switchView(holder){
	for (var i=0;i<holders.length;i++){
		if (holder == holders[i]){
			dojo.byId(holders[i]).style.display = 'block';
		}
		else{
			dojo.byId(holders[i]).style.display = 'none';
		}
	}
}
function makeScrollPane() {
    if(scrollWidget){
		Refresh();
	}
	else{
		/*scrollWidget = new dojox.layout.ScrollPane({
			orientation: "horizontal"
		},"movieHolder");*/
		var d= dojo.byId('movieHolder');
		dojo.connect(d,'onmousemove',scrollMyWidget);
		scrollWidget = 1;
		Refresh();
	}
}
function getCoordinates(e) {
  var Coordinates = {};
  var xcoord, ycoord;
  if( !e ) { e = window.event; }
  if( !e ) { return; }
  if( typeof( e.pageX ) == 'number' ) {
    xcoord = e.pageX;
    ycoord = e.pageY;
  } else if( typeof( e.clientX ) == 'number' ) {
    xcoord = e.clientX;
    ycoord = e.clientY;
    if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
      xcoord += document.body.scrollLeft;
      ycoord += document.body.scrollTop;
    } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
      xcoord += document.documentElement.scrollLeft;
      ycoord += document.documentElement.scrollTop;
    }
  } else { return; }
  e.cancelBubble = true;
  Coordinates.x = xcoord;
  Coordinates.y = ycoord;
  return Coordinates;
}
function scrollMyWidget(e){
	
	var coords1 = dojo.coords(dojo.byId('movieHolder'));
	var coords2 = dojo.coords(dojo.byId('tholder'));
 	var wrapWidth = coords1.w;
	var wrapLeft  = coords1.x;
	var tWidth = coords2.w;
        if ( tWidth <= wrapWidth ){return false;}
        var coords = getCoordinates(e);
	//var tLeft = coords2.x;
	var c = tWidth - wrapWidth;
	var d = c/wrapWidth;
	var g = -(Math.floor((coords.x - wrapLeft) * d));
	if ( coords.x - wrapLeft > (wrapWidth / 2) ) {g-=10;}
	dojo.byId('tholder').style.left = g+'px';
}
function Refresh(){
	dojo.addOnLoad(function(){dijit.byId('oneWrapper').layout()});
	//scrollWidget.layout();
}
function printBigPicture(ind){
	var gn = dojo.byId('gname_label');
	gn.style.opacity = 0;
	var img;
	if (!bigPictures[ind] || !bigPictures[ind].height){
		img = new Image();
		img.height = bigPictureHeight;
		img.src = '/g/'+currentDir+'/'+imagesSrc[ind].src;
	}
	else { img = bigPictures[ind];}
	//dojo.style({node:img,style:"opacity",value:0});
	img.style.opacity = 0.1;
	var p = dojo.byId('Picture');
	dojo.NodeList(p).empty();
	p.appendChild(img);

	dojo.fx.combine([
		dojo.fadeIn({node:img,duration:2000}),
		dojo.fadeIn({node:gn,duration:1500})
	]).play();
	var currNumb = dojo.byId('currentImage');
	var curr = parseInt(ind)+1;
	currNumb.innerHTML = curr+' of '+numberPictures;
	
	// plreload imgs
	preloadPrevNext(img);
}
function addButtons(){
	if (!buttonsFlag){
		var but = document.createElement('div');
		but.id = 'main_page';
		var span = document.createElement('span');
		span.innerHTML = 'Galleries';
		but.appendChild(span);
		but.className='out';
		but.onclick = function(){
			var ga = dojo.byId('wrapper');
			ga.style.cursor = 'default';
			switchView('wrapper');
		}
		var buttons = dojo.byId('Buttons');
		buttons.appendChild(but);
		dojo.connect(but,'onmouseenter',changeClass);
		dojo.connect(but,'onmouseleave',changeClass);

		var slide = document.createElement('div');
		var span2 = document.createElement('span');
		span2.innerHTML = 'Slide Show';
		slide.className = 'out';
		slide.appendChild(span2);
		dojo.connect(slide,'onmouseenter',changeClass);
		dojo.connect(slide,'onmouseleave',changeClass);
		buttons.appendChild(slide);

		var but1 = document.createElement('div');
		var span1 = document.createElement('span');
		span1.innerHTML = 'Refresh';
		but1.appendChild(span1);
		but1.className = 'out';

		var refresh = dojo.byId('Refresh');
		refresh.style.display = 'none';
		refresh.appendChild(but1);
		
		but1.onclick = Refresh;
		dojo.connect(dojo.byId('Right'),'onmouseenter',ABC);
		dojo.connect(dojo.byId('Right'),'onmouseleave',CDE);
		dojo.connect(but1,'onmouseenter',changeClass);
		dojo.connect(but1,'onmouseleave',changeClass);
		buttonsFlag = true;
	}
}
function ABC(e){
	dojo.byId('Refresh').style.display = 'block';
}
function CDE(e){
	dojo.byId('Refresh').style.display = 'none';
}
function changeClass(e){
	var cl = e.currentTarget.className;
	e.currentTarget.className = (cl == 'out') ? 'over' : 'out'; 
}
function drawNumberGalleries(){
	var s = dojox.gfx.createSurface("numberGalleries", 62, 36);
	var c = s.createCircle({ cx : 34, cy : 20, r : 16})
          .setFill(dojo.mixin(
            { type : "radial", cx : 0, cy : 0},
            { colors: [
              { offset: 0,   color: [255, 0, 0, 0] },
              { offset: 0.5, color: "orange" },
              { offset: 1,   color: [0, 0, 255, 0] }
            ]}
          ));
	var n = s.createText({x:25,y:26,text:numberGalleries});
	n.setFont({family:"Times",size:"18px",weight:"bold"});
	n.setFill("#FF552A");
}
function createNameGallery(gname){
	dojo.byId('GN').innerHTML = '';
	var g = dojox.gfx.createSurface("GN", 124, 389);
	//var word = gname.toUpperCase();
	//var word = gname.toLowerCase();
	var word = gname;
	for (var i=0;i<word.length;i++ )
	{
		var n = (i+1)*25;
		var t = g.createText({x:50,y:n,text:word[i]});
		t.setFont({family:"Tahoma",size:"22px",weight:"bold"});
		t.setFill("#FF552A");
		t.setStroke({color:"#f2bc14",width:2});
	}
}
function connectToPrevNext(ind){
	if ( typeof ind == "number" ){
		currentPicture = parseInt(ind);
		printBigPicture(currentPicture);
	}
	else {
		if (ind == 'next'){
			var np = parseInt(currentPicture)+1;
			currentPicture = (np == numberPictures) ? 0 : np;
		}
		else {
			var pp = parseInt(currentPicture)-1;
			currentPicture = (pp < 0) ? parseInt(numberPictures)-1 : pp;
		}
		printBigPicture(currentPicture);
		//var td = dojo.query("#trholder > td")[currentPicture];
		//dojo.query(td, " > img")[0].style.opacity = '0.5';
		dojo.byId('thumb_'+currentPicture).style.opacity = '0.5';
	}
	createCurrentThumbnail();
}
function createCurrentThumbnail(){
	var currentThumb = dojo.byId('currentThumbnail');
	currentThumb.innerHTML = '';
	var thumb = new Image();
	thumb.src = gPath+currentDir+'/thumbnails/'+imagesSrc[currentPicture].src;
	currentThumb.appendChild(thumb);
	dojo.connect(thumb,'onclick',resetThumbnails);
}
function resetThumbnails(){
	var tds = dojo.query("#trholder > td > img")
	dojo.forEach(tds,function(elm,index){
		//console.log(index+' I:'+elm.style.opacity+' CURR:'+currentPicture+' ID:'+elm.id);
		if (index != parseInt(currentPicture)){ dojo.byId(elm.id).style.opacity = '1'; }
		else { dojo.byId(elm.id).style.opacity = '0.5'; }
	});
}
function createNextPrev(){
	var next = dojo.byId('Next');
	next.onclick = function(){
		dojo.publish('/click/on/thumb',["next"]);
	};
	var prev = dojo.byId('Prev');
	prev.onclick = function(){
		dojo.publish('/click/on/thumb',["prev"]);
	};
}
function preloadPrevNext(img){
	var pp = currentPicture-1;
	var prev = pp < 0 ? numberPictures-1 : pp;
	if (!bigPictures[prev] || !bigPictures[prev].height){
		var imgP = new Image();
		imgP.height = bigPictureHeight;
		imgP.src = gPath+currentDir+'/'+imagesSrc[prev].src;
		bigPictures[prev] = imgP;
	}
	var np = currentPicture+1;
	var next = np == numberPictures ? 0 : np;
	if (!bigPictures[next] || !bigPictures[next].height){
		var imgN = new Image();
		imgN.height = bigPictureHeight;
		imgN.src = gPath+currentDir+'/'+imagesSrc[next].src;
		bigPictures[next] = imgN;
	}
}