/*  
 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
 */
window.addEvent('domready', function(){


    // CHANGE THIS !!
    var slides = 2; // NUMBER OF SLIDES IN SLIDESHOW, CHANGE ACCORDINGLY
    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
    });
	var actual_img = $("item_container").getFirst("a");
    
    
    
    /* 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
                });
				actual_img.removeClass("selected");
                switch (item.id) {
                    case "img_back":
                        if (actual_img.getPrevious("a")) {
                            actual_img = actual_img.getPrevious("a");
                        } else {
							actual_img = actual_img.getParent().getLast("a");
						}
                        break;
                    case "img_forward":
                        if (actual_img.getNext("a")) {
                            actual_img = actual_img.getNext("a");
                        } else {
							actual_img = actual_img.getParent().getFirst("a");
						}
                        break;
                    default:
						actual_img = item;
                        break;
                }
				actual_img.addClass("selected");
                var largeImage = new Element('img', {
                    'src': actual_img.href
                }); // create large image
                /* 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 des = new Element('p').set('text', description.get('text')).inject(inspector);
                    
                    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);
    $('first').addClass('selected');
	var largeImage = new Element('img', {
        'src': $('first').href
    }).inject(inspector);
    
});