/*  
JAVASCRIPT IMAGE GALLERY W/ mootools
Description: A easy, non destructive javascript image gala.
Version: 1.1
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
*/

// CHANGE THIS !!
var slides = 2;		// NUMBER OF SLIDES IN SLIDESHOW, CHANGE ACCORDINGLY

window.addEvent('domready', function() {
        var imageNum = 1;
		var pos = 0;
		var offset = 462;	// 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);
		});
		
		var totalImages = $$('.item').length + $$('.movie').length;
		
		/* WHEN AN ITEM IS CLICKED, IT INSERTS THE IMAGE INTO THE FULL VIEW DIV */
		$$('.item').each(function(item){
            item.itemNum = imageNum;
            imageNum++;
            
			item.addEvent('click', function(e) { 
				e = new Event(e).stop();
				fx2.start({ 
					'opacity' : 0													
				}).chain(function(){
					
					inspector.empty();		// Empty Stage

					var loadimg = 'images/ajax-loader.gif';	   // Reference to load gif
					var load = new Element('img', { 'src': loadimg, 'class': 'loading' }).inject(inspector); 
					fx2.start({ 'opacity' : 1 });
					
					var largeImage = new Element('img', { 'src': item.href });					
					
					
					/* When the large image is loaded, fade out, fade in with new image */
					//largeImage.onload = function(){  // While this line of code causes the images to load/transition in smoothly, it cause IE to stop working
						fx.start({ 
							'opacity' : 0													
						}).chain(function(){
							inspector.empty();	           				// empty stage
							var description = item.getElement('span');	// see if there is a description
							

							if(description)		
                                {
                                var theText = description.get('text');
                                if (theText == '')
                                    var des = new Element('p', {'style' : 'background: none'}).set('text', theText).inject(inspector);
                                else			   
								    var des = new Element('p').set('text', description.get('text')).inject(inspector);
								}
				            else
				                var des = new Element('p', {'style' : 'background: none'}).set('text', theText).inject(inspector);
								
							//largeImage.inject(inspector); // insert new image
				            if (item.getElement('img').alt != '')
				                {
				                var linkToLargeImage = new Element('a', {'href' : item.getElement('img').alt, 'target' : '_blank'});
				                largeImage.inject(linkToLargeImage);
                                linkToLargeImage.inject(inspector);
                                }
                            else
                                largeImage.inject(inspector);
  
  				            var itemNumP = new Element('p', {'class':'imageNum'}).set('text', item.itemNum + " of " + totalImages).inject(inspector);
									
                              
							fx.start({'opacity': 1});	 // then bring opacity of elements back to visible				
						});
					//};
					
				});
			});
		});

		/* WHEN AN ITEM IS CLICKED, IT INSERTS THE IMAGE INTO THE FULL VIEW DIV */
		$$('.movie').each(function(movie){ 
            movie.itemNum = imageNum;
            imageNum++;
            
			movie.addEvent('click', function(e) { 
				e = new Event(e).stop();
            
                inspector.empty();                  
                
              /*
                use flashembed to place flowplayer into HTML element 
                whose id is "example" (below this script tag)
                */
               flashembed("fullimg", 
                
                /* 
                first argument supplies standard Flash parameters. See full list:
                http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_12701
                */
                {
                    src:'FlowPlayerDark.swf',
                    width: 500, 
                    height: 335
                },
                
                /*
                second argument is Flowplayer specific configuration. See full list:
                http://flowplayer.org/player/configuration.html
                */
                {config: {   
                    autoPlay: true,
                    autoBuffering: true,
                    loop: false,
                    controlBarBackgroundColor:'0x2e8860',
                    initialScale: 'scale',
                    videoFile: movie.href
                }} 
                );
  
                var description = movie.getElement('span');	// see if there is a description
							
                if(description)					   
				    var des = new Element('p', {'style' : "margin-top: -357px"}).set('text', description.get('text')).inject(inspector);

				var itemNumP = new Element('p', {'class':'imageNum'}).set('text', movie.itemNum + " of " + totalImages).inject(inspector);
             });
        })

				

fx2.start({ 
    'opacity' : 0													
}).chain(function(){
    
    inspector.empty();		// Empty Stage

    var loadimg = 'images/ajax-loader.gif';	   // Reference to load gif
    var load = new Element('img', { 'src': loadimg, 'class': 'loading' }).inject(inspector); 
    fx2.start({ 'opacity' : 1 });

        var first = $('first');
		var largeImage = new Element('img', {'src': first.href});
		// INSERT THE INITAL IMAGE - LIKE ABOVE
        fx.start({ 
            'opacity' : 0													
        }).chain(function(){
            inspector.empty();
           // inspector.setProperty('style', 'visibility: visible; opacity: 1;');
            
            var description = first.getElement('span');
            
            if(description)		
                {
                var theText = description.get('text');
                if (theText == '')
                    var des = new Element('p', {'style' : 'background: none'}).set('text', "").inject(inspector);
                else			   
                    var des = new Element('p').set('text', description.get('text')).inject(inspector);
                }
            else
                var des = new Element('p', {'style' : 'background: none'}).set('text', "").inject(inspector);
           
            
            if (first.getElement('img').alt != '')
                {
                linkToLargeImage = new Element('a', {'href': first.getElement('img').alt, 
                'target' : '_blank'});
                largeImage.inject(linkToLargeImage);
                linkToLargeImage.inject(inspector);
                }
            else
                largeImage.inject(linkToLarge);
    
            var itemNumP = new Element('p', {'class':'imageNum'}).set('text', first.itemNum + " of " + totalImages).inject(inspector);
            
            fx.start({'opacity': 1});	 // then bring opacity of elements back to visible	
            });
        });			


});