/*  
JAVASCRIPT IMAGE GALLERY W/ mootools
Description: A easy, non destructive javascript image gala.
Version: 1.1
Author: Devin Ross
Author URI: http://tutorialdog.com
http://tutorialdog.com/javascript-image-gallery-using-mootools-part-2/

modification:
    Frank Robnik // Buscape.de
    Client andreaskunert.de

*/

window.addEvent('domready', function() {

    // Bildergallerie Scroller
    var scroll = new Scroller('carousel', {area: 70, velocity: 0.2});
    $('carouselWrapper').addEvent('mouseenter', scroll.start.bind(scroll));
    $('carouselWrapper').addEvent('mouseleave', scroll.stop.bind(scroll));

    // Bildergallerie Pfeile
    $$(".scrollButton").setStyle('opacity', '0.0');
    $('carouselWrapper').addEvent('mouseenter', function(){ $$(".scrollButton").fade(1.0); });
    $('carouselWrapper').addEvent('mouseleave', function(){ $$('.scrollButton').fade(0.0); });
    $('btnRow').setStyle('opacity', '0.0');
//  $('rightWrapper').addEvent('mouseenter', function(){ $("btnRow").fade(1.0); });
//  $('rightWrapper').addEvent('mouseleave', function(){ $('btnRow').fade(0.0); });
//    $('carouselWrapper').addEvent('mouseenter', function(){ $("btnRow").fade(1.0); });
//    $('carouselWrapper').addEvent('mouseleave', function(){ $('btnRow').fade(0.0); });
    $("btnRow").fade(1.0);


    // Bildwechsel
    var currentImage = 0;
    $('btnLeft').addEvent('click', left );
    $('btnRight').addEvent('click', right );
    function left(){
        if ( currentImage != 0 ) {
            showImage ( parseInt( currentImage - 1 ) );
        }
        else {
            var fx = new Fx.Morph( $('fullimg'), {duration:300, transition: Fx.Transitions.Sine.easeOut} );
            fx.start({ opacity: 0.7 }).chain(function(){fx.start({ opacity: 1 })});
        }
    }
    function right(){
        if ( currentImage != $$('.item').length - 1 ){
            showImage ( parseInt( currentImage + 1 ) );
        }
        else {
            var fx = new Fx.Morph( $('fullimg'), {duration:300, transition: Fx.Transitions.Sine.easeOut} );
            fx.start({ opacity: 0.7 }).chain(function(){fx.start({ opacity: 1 })});
        }
    }
    
    var inspector = $('fullimg');   // WHERE THE LARGE IMAGES WILL BE PLACE
    inspector.empty();
    var fxInInspector = new Fx.Morph(inspector, {duration: 300, transition: Fx.Transitions.Sine.easeIn});
    var fxOutInspector = new Fx.Morph(inspector, {duration: 400, transition: Fx.Transitions.Sine.easeOut}); 




    $$('.item').addEvent('click', function(e) {
            e = new Event(e).stop();
            showImage( parseInt( this.name ) );
        });
    
    
    function showImage ( selectedImage ) {
        imageAdr = $$('.item')[selectedImage].href;
        image = new Image();
        image.src = imageAdr;
    
        // Change Selected Image
        var fxOutThumbnail = new Fx.Morph($$('.thumbnail')[currentImage], {duration: 300, transition: Fx.Transitions.Sine.easeOut});
        var fxInThumbnail = new Fx.Morph($$('.thumbnail')[selectedImage], {duration: 400, transition: Fx.Transitions.Sine.easeIn});
        fxOutThumbnail.start({ 'opacity' : 1 });
        fxInThumbnail.start({ 'opacity' : 0 });
        
        currentImage = selectedImage;       
        
        // Load Image
        fxOutInspector.start({ 
            'opacity' : 0                                                   
        }).chain(function(){
            inspector.empty();
            var loading = '../gfx/icons/loading.png';
            var load = new Element('img', { 'src': loading, 'class': 'loading' }).inject(inspector); 
            fxInInspector.start({ 'opacity' : 1 });
            var downloadLink = new Element('a', { 'href': 'download.php?path=' + imageAdr, 'id': 'btnDownload', 'style': 'padding-top:1px;' }); /* ALT 'style': 'margin-left:' + (image.width - 55) + 'px;padding-top:1px;' */
            var downloadBtn = new Element('img', { 'src': '../gfx/icons/download.gif', 'alt': 'Download' });
            var largeImage = new Element('img', { 'src': imageAdr, 'id': 'largeImg' });
//          downloadLink.setStyle('opacity', '0.0');
//          largeImage.addEvent('mouseenter', function(){ downloadLink.fade(1.0); });
//          largeImage.addEvent('mouseleave', function(){ downloadLink.fade(0.0); });

            fxOutInspector.start({ 
                'opacity' : 0                                                   
            }).chain(function(){
                inspector.empty();
                $('download').empty();
                largeImage.inject(inspector);
                downloadLink.inject($('download'));
                downloadBtn.inject(downloadLink);
                fxInInspector.start({'opacity': 1});
            });
                
        });
    }
    
    
    // INSERT THE INITAL IMAGE - LIKE ABOVE
//  var largeImage = new Element('img', {'src': $$('.item')[0].href}).inject(inspector);
    showImage(0);
});