/*  
JAVASCRIPT IMAGE GALLERY W/ mootools
Description: A easy, non destructive javascript image gala.
Version: 1.1.3
Author: Devin Ross
Author URI: http://tutorialdog.com
*/

/*
Release notes:
	1.1 - Adds loading animation, and properly fades in images when fully loaded
	1.1.1 - Fixes displaying description, Fades out current image, Works with Mootools 1.2
	1.1.2 - Corrects IE Problem with Transitioning to Next Image (Note: this fix undo's release 1.1's to fade image in smoother)
	1.1.3 - Corrects First Image Text Problem
*/
	window.addEvent('domready', function() {
  
  var myImages = new Asset.images(['assets/ajax-loader.gif', 'assets/JR_Splash.png', 'assets/book/1.png',  'assets/book/1t.png', 'assets/book/2t.png', 'assets/book/3t.png', 'assets/book/4t.png', 'assets/book/5t.png', 'assets/book/6t.png', 'assets/book/7t.png', 'assets/book/8t.png', 'assets/book/9t.png', 'assets/book/10t.png', 'assets/book/11t.png', 'assets/book/12t.png', 'assets/book/13t.png', 'assets/book/14t.png', 'assets/book/15t.png', 'assets/book/16t.png', 'assets/book/17t.png', 'assets/book/18t.png', 'assets/book/19t.png'], {
    
  onComplete: function(){
            (function(){
        document.getElementById("loading").style.display = "none";
        document.getElementById("img_gallery").style.display = "block";
}).delay(2500);
}
});
});

window.addEvent('domready', function() {
		  (function(){
        document.getElementById("loading").style.display = "none";
        document.getElementById("img_gallery").style.display = "block";
}).delay(10000);
		
		// CHANGE THIS !!
		var slides = 8;		// NUMBER OF SLIDES IN SLIDESHOW, CHANGE ACCORDINGLY
		var totimages = 54; // NUMBER OF IMAGES
		var pos = 0;
		var offset = 461;	// HOW MUCH TO SLIDE WITH EACH CLICK
		var currentslide = 1;	// CURRENT SLIDE IS THE FIRST SLIDE
		var inspector = $('fullimg');	// WHERE THE LARGE IMAGES WILL BE PLACE	
		var fx = new Fx.Morph(inspector, {duration: 300, transition: Fx.Transitions.Sine.easeOut});
 		var fx2 = new Fx.Morph(inspector, {duration: 200, transition: Fx.Transitions.Sine.easeOut});

		
		/* THUMBNAIL IMAGE SCROLL */
		var imgscroll = new Fx.Scroll('wrapper', {
   			offset: {'x': 0, 'y': 0},
   			transition: Fx.Transitions.Cubic.easeOut	// HOW THE SCROLLER SCROLLS
		}).toLeft();

	
		/* EVENTS - WHEN AN ARROW IS CLICKED THE THUMBNAILS SCROLL */
		$('moveleft').addEvent('click', function(event) { event = new Event(event).stop();
			if(currentslide == 1) return;
			currentslide--;					// CURRENT SLIDE IS ONE LESS
			pos += -(offset);				// CHANGE SCROLL POSITION
			imgscroll.start(pos);			// SCROLL TO NEW POSITION
		});
		$('moveright').addEvent('click', function(event) { event = new Event(event).stop();
			if(currentslide >= slides) return;
			currentslide++;
			pos += offset;
			imgscroll.start(pos);
		});
		/*turn thumbs on */
      
		/* WHEN AN ITEM IS CLICKED, IT INSERTS THE IMAGE INTO THE FULL VIEW DIV */
		/* WHEN AN ITEM IS CLICKED, IT INSERTS THE IMAGE INTO THE FULL VIEW DIV */
		$$('.item').each(function(item){ 
			item.addEvent('click', function(e) { 
				e = new Event(e).stop();
				fx2.start({ 
					'opacity' : 0													
				}).chain(function(){
					
					inspector.empty();		// Empty Stage

					fx2.start({ 'opacity' : 1 });
          var myImage = new Asset.image(item.href, {onload: imageLoaded});    
          var loadimg = 'assets/ajax-loader.gif';	   // Reference to load gif
          (function(){
          var load = new Element('img', { 'src': loadimg, 'class': 'loading' }).inject(inspector);
}).delay(250);

					/* When the large image is loaded, fade out, fade in with new image */
					function imageLoaded(){  // While this line of code causes the images to load/transition in smoothly, it cause IE to stop working
					var largeImage = new Element('img', { 'src': item.href }); // create large image
 

            fx.start({ 
							'opacity' : 0													
						}).chain(function(){
							inspector.empty();	           				// empty stage

							var description = item.getElement('span');	// see if there is a description
              var imagenumber;
                if (Number(description.get('text')) < 10) 
                {
                imagenumber = ('0'+description.get('text'));
                }
                else 
                { 
                imagenumber = (description.get('text'));
                }                
                

           if (Number(description.get('text')) > 1) 
            {
            document.getElementById('prev-a').href=('assets/book/'+(Number(description.get('text'))-1)+'.png');
            document.getElementById('prev-a').innerHTML = ('<span>'+(Number(imagenumber)-1)+'</span>');
                      }
            else if (Number(description.get('text')) == 1)
            {document.getElementById('next-a').href=('assets/book/'+'2'+'.png');
            document.getElementById('next-a').innerHTML = ('<span>'+'2'+'</span>');
            document.getElementById('prev-a').href=('assets/book/'+'1'+'.png');      document.getElementById('prev-a').innerHTML = ('<span>'+'1'+'</span>');
            };						
            if (Number(description.get('text')) < totimages)
            {document.getElementById('next-a').href=('assets/book/'+(Number(description.get('text'))+1)+'.png');
            document.getElementById('next-a').innerHTML = ('<span>'+(Number(imagenumber)+1)+'</span>');
                                  }            
            else if (Number(description.get('text')) == totimages)
            {document.getElementById('next-a').href=('assets/book/'+'1'+'.png');
            document.getElementById('next-a').innerHTML = ('<span>'+'1'+'</span>');

            };
            var des = new Element('p').set('text', description.get('text')).inject(inspector);

                
                document.getElementById('imagenumber').innerHTML = imagenumber;
               // document.getElementById('righttop').innerHTML = (imagecounterfront+(Number(description.get('text'))+1)+imagecounterrear);	
							largeImage.inject(inspector); // insert new image
							fx.start({'opacity': 1});	 // then bring opacity of elements back to visible				
						});
					};
					
				});
			});
		});

		// INSERT THE INITAL IMAGE - LIKE ABOVE
		inspector.empty();
		var description = $('first').getElement('span');
		
		//if(description) var desc = new Element('p').setHTML(description.get('html')).inject(inspector);
		if(description) var des = new Element('p').set('text', description.get('text'));
		var largeImage = new Element('img', {'src': $('first').href});
								fx.start({ 
							'opacity' : 0													
						}).chain(function(){
							inspector.empty();	           				// empty stage

							var description = $('first').getElement('span');	// see if there is a description
              var imagenumber;
                if (Number(description.get('text')) < 10) 
                {
                imagenumber = ('0'+description.get('text'));
                }
                else 
                { 
                imagenumber = (description.get('text'));
                }                
                

           if (Number(description.get('text')) > 1) 
            {
            document.getElementById('prev-a').href=('assets/book/'+(Number(description.get('text'))-1)+'.png');
            document.getElementById('prev-a').innerHTML = ('<span>'+(Number(imagenumber)-1)+'</span>');
                      };						
            if (Number(description.get('text')) < totimages)
            {document.getElementById('next-a').href=('assets/book/'+(Number(description.get('text'))+1)+'.png');
            document.getElementById('next-a').innerHTML = ('<span>'+(Number(imagenumber)+1)+'</span>');
                                  };
          

                
                document.getElementById('imagenumber').innerHTML = imagenumber;
               // document.getElementById('righttop').innerHTML = (imagecounterfront+(Number(description.get('text'))+1)+imagecounterrear);	
							largeImage.inject(inspector); // insert new image
							fx.start({'opacity': 1});	 // then bring opacity of elements back to visible				
						});
		
		/*inspector.empty();
		var description = $('first').getElement('span');
		if(description) var desc = new Element('p').setHTML(description.get('html')).inject(inspector);
		var largeImage = new Element('img', {'src': $('first').href}).inject(inspector);*/
	
});