/** mjGallery1.14 */

function mjGallery() {
	// scroll to top-left
	window.scrollTo(0,0);
	
    // create modal
    var mjModal = dojo.create('div', {id: 'mjModal'}, dojo.body());
    
    dojo.animateProperty({
        node: 'mjModal',
		duration: 1500,
		properties: {
			opacity: {
				start: '0',
				end: '1'
			}
		}
    }).play();
	
	var mjTitle = dojo.create('span', {id: 'mjTitle', innerHTML: 'MCAS Yuma - 2009 Year in Pictures'}, mjModal);
   
	// exit the gallery link
	dojo.create('a', {
		href: 'javascript: void(0);',
		innerHTML: 'exit the gallery',
		onclick: function() {
			dojo.fadeOut({
				node: 'mjModal',
				onEnd: function() {
					dojo.body().removeChild(dojo.byId('mjModal'));
				}
			}).play();
		}
	}, mjModal);
   
	dojo.create('br', null, mjModal); dojo.create('br', null, mjModal);
	
	var mjIndexContainer = dojo.create('div', {id: 'mjIndexContainer'}, mjModal);
	var table = dojo.create('table', {'class': 'mjTable'}, mjIndexContainer);
	var mjIndex = dojo.create('tbody', {id: 'mjIndex'}, table);
	
	var curIndex = 0;
	var setPlay; // setTimeout
	var isPlaying = false;
	var fadeIn, fadeOut;
	
	function togglePlay() {
		if (fadeIn && fadeIn.status() === 'playing') {
			fadeIn.stop();
		}
		if (fadeOut && fadeOut.status() === 'playing') {
			fadeOut.stop();
		}
		if (isPlaying === true) {
			clearTimeout(setPlay);
		}
	}
	
	var mjControls = dojo.create('div', {id: 'mjControls'}, mjIndexContainer);
	var mjPrev = dojo.create('div', {id: 'mjPrev'}, mjControls);
	dojo.create('a', {
		href: 'javascript: void(0)',
		innerHTML: '<center>PREV</center>',
		onclick: function() {
			togglePlay();
			changePic(curIndex-1);
		}
	}, mjPrev);
	
	var mjPlay = dojo.create('div', {id: 'mjPlay'}, mjControls);
	dojo.create('a', {
		href: 'javascript: void(0)',
		innerHTML: '<center>PLAY</center>',
		onclick: function() {
			if (isPlaying === false) {
				this.innerHTML = '<center>PAUSE</center>';
				isPlaying = true;
				togglePlay();
				changePic(curIndex+1);
			} else {
				this.innerHTML = '<center>PLAY</center>';
				togglePlay();
				isPlaying = false;
			}
		}
	}, mjPlay);
	
	var mjNext = dojo.create('div', {id: 'mjNext'}, mjControls);
	dojo.create('a', {
		href: 'javascript: void(0)',
		innerHTML: '<center>NEXT</center>',
		onclick: function() {
			curIndex += 1;
			togglePlay();
			changePic(curIndex);
		}
	}, mjNext);
   
	for (var i=0; i < mjImageInfo.length; i++) {
        if (i === 0 || i % 4 === 0) {
            var row = dojo.create('tr', null, mjIndex);
        }
        var cell = dojo.create('td', {
			id: 'mjCell_'+i,
			onclick: function() {
				togglePlay();
				changePic(+this.id.substring(7))
			},
			onmouseover: function() {
				this.style.backgroundColor = '#777';
			},
			onmouseout: function() {
				if (+this.id.substring(7) !== curIndex) {
					this.style.backgroundColor = '#333';
					
				}
			}
		}, row);
        
		dojo.create('img', {src: mjImageInfo[i].thumb}, cell);
    }
	
	var mjView = dojo.create('div', {id: 'mjView'}, mjModal);
	var mjViewContainer = dojo.create('div', {id: 'mjViewPic'}, mjView);
	var mjViewCaption = dojo.create('div', {id: 'mjViewCaption'}, mjView);
	
	var myViewImage = dojo.create('img', {id: 'mjViewImage', src: mjImageInfo[0].large}, mjViewContainer);
	myViewImage.removeAttribute('height');
	myViewImage.removeAttribute('width');
	
	mjViewCaption.innerHTML = mjImageInfo[0].title;
	
	// preload images
	dojo.require('dojox.image');
	var imageArray = [];
	for (var i=0; i < mjImageInfo.length; i++) {
		imageArray.push(mjImageInfo[i].large);
	}
	dojox.image.preload(imageArray);
	
	function changePic(index) {
		var prevIndex = curIndex;
		curIndex = index;
		dojo.style('mjCell_'+prevIndex, {backgroundColor: '#333'});
		dojo.style('mjCell_'+(index), {backgroundColor: '#777'});
		fadeOut = dojo.fadeOut({
			node: 'mjView',
			duration: 2000,
			onEnd: function() {
				mjViewImage.src = mjImageInfo[index].large;
				mjViewCaption.innerHTML = mjImageInfo[index].title;
				fadeIn = dojo.fadeIn({
					node: 'mjView',
					duration: 2000,
					onEnd: function() {
						if (isPlaying === true) {
							setPlay = setTimeout(function() {changePic(index+1)}, 10000);
						}
					}
				});
				fadeIn.play();
			}
		});
		fadeOut.play();
	}
};