/*  
JAVASCRIPT IMAGE GALLERY W/ mootools
Description: A easy, non destructive javascript image gala.
Version: 1.0
Author: Devin Ross
Author URI: http://tutorialdog.com
*/
var dontAutoScroll = 0;
window.addEvent('domready', function() {


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


    var pos = 0;
    var offset = 300; 																	   // 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 PLACED
    var fx = inspector.effects({ duration: 300, transition: Fx.Transitions.linear });


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

    /* EVENTS - WHEN AN ARROW IS CLICKED THE THUMBNAILS SCROLL */
    $('moveleft').addEvent('mouseenter', 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);
        dontAutoScroll = 1;											  // SCROLL TO NEW POSITION
    });
    $('moveright').addEvent('mouseenter', function(event) {
        event = new Event(event).stop();
        if (currentslide >= slides) return;
        currentslide++;
        pos += offset;
        imgscroll.start(pos);
        dontAutoScroll = 1;
    });
    $('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);
        dontAutoScroll = 1; 												  // SCROLL TO NEW POSITION
    });
    $('moveright').addEvent('click', function(event) {
        event = new Event(event).stop();
        if (currentslide >= slides) return;
        currentslide++;
        pos += offset;
        imgscroll.start(pos);
        dontAutoScroll = 1;
    });

    /* 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();
    //		/* Chain of Events to fade in and fade out images */
    //		fx.start({ 
    //			'opacity' : 0																		  		 // Fade out large view
    //		}).chain(function(){
    //			inspector.empty();																		   // Clear stuff in large view
    //			var description = item.getElement('span'); 											 	  // Get Description for new photo
    //			if(description)																		 	 // Make sure there is an actual description
    //				var desc = new Element('p').setHTML(description.get('html')).inject(inspector);  	// Insert element with description text
    //			var largeImage = new Element('img', { 'src': item.href }).inject(inspector); 		   // Fade in new image
    //			//fx.start.delay(1000,,{'opacity':1});
    //			this.start.delay(600, this, {
    //				'opacity': 1
    //			});
    //
    //				});
    //			});
    //		});

    // INSERT THE INITAL IMAGE - LIKE ABOVE
    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);

    imgscroll.toLeft();  // ON A RELOAD, RESET SlIDER

    startScrolling.periodical(5000);

});
pos = 300;
function startScrolling() {
    if (dontAutoScroll == 0) {
        var blah = new Fx.Scroll('pgwrapper', { offset: { 'x': 0, 'y': 0 }, transition: Fx.Transitions.Cubic.easeOut });
        if (pos > 2400) {
            blah.start(0)
            pos = 0
        };
        blah.start(pos);
        //alert(pos);
        pos = (pos + 300);
    }
};