/*
 * az_slideShow v0.2
 * @author: Matthieu GAUTHIER (matthieu@oblady.fr)
 */
(function($) {
    $.fn.az_slideShow = function(args) {
        // Options
        var defaults = {
            data:null, // JSON object of data
            speed:500, // Vitesse des animations
            // Fixe
            closed_width:324,
            closed_height:312,
            // Action
            opened_width_current:650, // A little smallest to avoid a blink effect with the overflow hidden, i accept any help to fix them :(
            opened_height_current:312,
            opened_width:162,
            opened_height:312,
            opened_topMargin:0,
            opened_opacity:0.66, // Simulate overlay
            videoOverlay_width:972,
            videoOverlay_height:312,
            video_width:972,
            video_height:312,
            video_bgColor:'black',
            flv_player:'az_slideShow_demo/player_flv_maxi.swf',
            flv_options:'&showstop=1&showvolume=1&showtime=1&margin=1&bgcolor=&bgcolor1=2e7dc2&bgcolor2=2e7dc2&playercolor=2e7dc2&loadingcolor=ff6600&buttonovercolor=ff6600&sliderovercolor=ff6600', // Need the first amp ( ex: "&showstop=1&showvolume=1&showtime=1")
            // HTML
            HTMLbigTitle:'<h2>###TITLE###</h2>', // We need az_slideShow_bigTitle class on the container tag to manage them
            HTMLvideo:'<a href="" id="az_slideShow_videoClose">Fermer</a><div id="az_slideShow_video"></div>', // We need "az_slideShow_video" and "az_slideShow_videoClose" Ids!
            HTMLtopContent:'<div class="az_slideShow_titre">###TITLE###</div><div class="az_slideShow_description">###DESCRIPTION###</div><div class="az_slideShow_link">###LINK###</div>' // Encapsulate in a div with class az_slideShow_contenu
        };
        // Get user options and merge
        var opts = $.extend(defaults, args);
        // Store current Object
        var el = this;
        // Flag to detect if we are in video mode
        var video = false;
        
        
        var cI;
        var cII;
        var animating=false;
        var cLeft;
        var onTheContent=false;
// Allow us to store current Obj.
//var currObj = null;
        
/* Preload a implementer lors d'utilisation reele */
// Preload
/*
az_slideShow_preLoad = new Array();
//az_slideShow_preLoadCount = 0;
az_slideShow_preloadListe = new Array();
for( i=0;i<opts.data.length;i++ ) {
for( j=0;j<opts.data[i]['images'].length;j++ ) {
if( !opts.data[i]['images'][j].match('.flv$') ) {
az_slideShow_preloadListe.push(opts.data[i]['images'][j]);
}
}
if( opts.data[i]['miniatures'] )
for( j=0;j<opts.data[i]['miniatures'].length;j++ ) {
if( !opts.data[i]['images'][j].match('.flv$') ) {
az_slideShow_preloadListe.push(opts.data[i]['images'][j]);
}
}
}


$('<div>',{
id:'az_slideShow_preload',
css:{
border:'1 px dotted white',
width:'150px',
height:'20px',

}
}).appendTo(el);
$('<div>',{
id:'az_slideShow_preloadBarre',
css:{
backgroundColor:'white',
width:'0px',
height:'20px',

}
}).appendTo('#az_slideShow_preload');


for( i=0;i<az_slideShow_preloadListe.length;i++ ) {//console.log(az_slideShow_preloadListe[i]);
az_slideShow_preLoad[i] = new Image();
az_slideShow_preLoad[i].src = az_slideShow_preloadListe[i];

$('#az_slideShow_preloadBarre').width(Math.abs(i*100/az_slideShow_preloadListe.length)+"%")
}
$('#az_slideShow_preload').remove();
*/
//return '';
//
        // Go!
        build();
        
        
        /** Below, our functions to run the slide! **/
        
        // Function to build our slider
        function build() {
            // We browse data
            for( i=0;i<opts.data.length;i++ ) {
                $('<img>',{
                    className:'az_slideShow_main',
                    src:'fileadmin/templates/az_slideShow_demo/az_slideShow_masque.png',
                    css:{
                        position:'absolute',
                        height:opts.closed_height,
                        left:i*opts.closed_width,
                        zIndex:i*10
                    }
                }).appendTo(el);
                $('<img>',{
                    className:'az_slideShow_main az_slideShow_image',
                    src:opts.data[i]['images'][0],
                    css:{
                        position:'absolute',
                        height:opts.closed_height,
                        left:i*opts.closed_width,
                        zIndex:i*10+2
                    }
                }).appendTo(el);
                
                $('<div>',{
                    className:'az_slideShow_bigTitle',
                    css:{
                        position:'absolute',
                        zIndex:i*10+3,
                        opacity:0
                    },
                    'html': opts.HTMLbigTitle.replace('###TITLE###',opts.data[i]['titre'])
                }).appendTo(el);
                
                $(el).find('.az_slideShow_bigTitle:last')
                    .css('left',(i*opts.closed_width)+parseInt((opts.closed_width-$(el).find('h2').width())/2))
                    .animate({
                        opacity:1
                    },opts.speed);


                if( opts.data[i]['type'] == 'videos' ) { // Specific treatment on video slide
                    $(el).find('img:last').css('cursor','pointer');
                    /*$('<div>',{
                        className:'az_slideShow_playButton'
                    }).prependTo($(el).find('.az_slideShow_main:last'));
                    */
                    $(el).find('.az_slideShow_main:last').click( function() { // Apply click event
                        
                        video=true; // Flag video

                        /*srcs='';
                        if( opts.data[$(el).attr('ci')]['video'] )
                            srcs += '<source src="'+opts.data[$(el).attr('ci')]['video']+'" />';;
                        if( opts.data[$(el).attr('ci')]['videoOgv'] )
                            srcs += '<source src="'+opts.data[$(el).attr('ci')]['videoOgv']+'" />';

*/

                        // Build video overlay
                        $('<div>',{
                            id:'az_slideShow_videoContainer', // With specific id
                            html: opts.HTMLvideo, // Small HTML
                            css:{
                                zIndex:999,
                                width: opts.videoOverlay_width+'px',
                                height: opts.videoOverlay_height+'px',
                                backgroundColor:opts.video_bgColor,
                                position: 'absolute' //Absolute position to be on the top
                            }
                        }).appendTo(el); // And hang it on our slide


                        $('<video>',{
                            className:'video',
                            controls:'controls',
                            preload:'preload'
                        }).appendTo('#az_slideShow_video');

                        if( opts.data[$(el).attr('ci')]['video'] )
                            $('<source>',{
                                src:opts.data[$(el).attr('ci')]['video']
                            }).appendTo('video');
                        if( opts.data[$(el).attr('ci')]['videoOgv'] )
                            $('<source>',{
                                src:opts.data[$(el).attr('ci')]['videoOgv']
                            }).appendTo('video');
                        //az_slideShow_video"><video class="video" controls preload>###SRC###</video>







                        $(el).find('video').css('width',opts.video_width);
                        $(el).find('video').css('height',opts.video_height);

                        // Allow us to close the overlay :)
                        $('#az_slideShow_videoClose').click( function (e) {
                            e.preventDefault(); // Escape the link
                            $('#az_slideShow_videoContainer').remove(); // Remove all the overlay
                            video=false; // UnFlag
                        });

                        html5media();
                        // Initialize video
                        /*var flashvars = false;
                        var params = {
                            menu: "false",
                            flashvars: "flv="+ opts.data[$(el).attr('ci')]['video']+opts.flv_options // Get the video of the current slide (with index method) and specific options for the flv player
                        };
                        var attributes = {
                            id: "az_slideShow_videoVideo",
                            name: "az_slideShow_videoVideo"
                        };
                        // Go!
                        swfobject.embedSWF(opts.flv_player, "az_slideShow_video", opts.video_width, opts.video_height, "9.0.0",null, flashvars, params, attributes);*/



                    });
                }
            }
            
            
            $(el).find('.az_slideShow_image').mouseenter( function() {
                    
                    cI = $(this).index('.az_slideShow_main');//alert(cI);
                    
                    if( cI<=1 ){
                        if( parseInt($(el).attr('ci')) == 0 )
                            return;
                        
                        
                        $(el).find('.az_slideShow_main').stop();
                        animateContentOut();
                        
                        $(el).attr('ci',0);
                        $(el).attr('cii',0);
                        
                        $(el).find('.az_slideShow_main').eq(1).animate({
                            height:opts.opened_height_current,
                            marginTop:0
                        },opts.speed,function(){endOpening()});
                        $(el).find('.az_slideShow_main').eq(0).animate({
                        },opts.speed);
                        
                        $(el).find('.az_slideShow_main').eq(3).animate({
                            left:opts.opened_width_current,
                            height:opts.opened_height,
                            marginTop:opts.opened_topMargin
                        },opts.speed);
                        $(el).find('.az_slideShow_main').eq(2).animate({
                            left:opts.opened_width_current
                        },opts.speed);
                        
                        $(el).find('.az_slideShow_main').eq(5).animate({
                            left:opts.opened_width_current+opts.opened_width,
                            height:opts.opened_height,
                            marginTop:opts.opened_topMargin
                        },opts.speed);
                        $(el).find('.az_slideShow_main').eq(4).animate({
                            left:opts.opened_width_current+opts.opened_width
                        },opts.speed);
                        
                        /*$(el).find('.az_slideShow_bigTitle').eq(0).animate({
                            left:0*324+40,
                            bottom:-30
                        },opts.speed);
                        $(el).find('.az_slideShow_bigTitle').eq(1).animate({
                            left:1*324+20,
                            bottom:30
                        },opts.speed);
                        $(el).find('.az_slideShow_bigTitle').eq(2).animate({
                            left:2*324+20,
                            bottom:30
                        },opts.speed);*/
                        //console.log(opts.opened_width_current+opened_width+parseInt((opts.opened_width-$(el).find('.az_slideShow_bigTitle').eq(2).width())/2));
                        
                        //console.log(parseInt((opts.opened_width-$(el).find('.az_slideShow_bigTitle').eq(2).width())/2));
                        
                        $(el).find('.az_slideShow_bigTitle').stop();
                        $(el).find('.az_slideShow_bigTitle').eq(0).animate({
                            left:0,//parseInt((opts.opened_width_current-$(el).find('.az_slideShow_bigTitle').eq(0).width())/2),
                            width:opts.opened_width_current,
                            opacity:0
                        },opts.speed);
                        $(el).find('.az_slideShow_bigTitle').eq(1).animate({
                            left:opts.opened_width_current,//opts.opened_width_current+parseInt((opts.opened_width-$(el).find('.az_slideShow_bigTitle').eq(1).width())/2),
                            width:opts.opened_width,
                            opacity:1
                        },opts.speed);
                        $(el).find('.az_slideShow_bigTitle').eq(2).animate({
                            left:opts.opened_width_current+opts.opened_width,//opts.opened_width_current+opts.opened_width+parseInt((opts.opened_width-$(el).find('.az_slideShow_bigTitle').eq(2).width())/2),
                            width:opts.opened_width,
                            opacity:1
                        },opts.speed);
                        //opened_width
                    } else if( cI>=2 && cI<=3 ){
                        if( parseInt($(el).attr('ci')) == 1 )
                            return;
                        $(el).find('.az_slideShow_main').stop();
                        animateContentOut();
                        
                        $(el).attr('ci',1);
                        $(el).attr('cii',0);
                        
                        $(el).find('.az_slideShow_main').eq(1).animate({
                            height:opts.opened_height,
                            marginTop:opts.opened_topMargin
                        },opts.speed);
                        $(el).find('.az_slideShow_main').eq(0).animate({
                        },opts.speed);
                        
                        $(el).find('.az_slideShow_main').eq(3).animate({
                            left:opts.opened_width,
                            height:opts.opened_height_current,
                            marginTop:0
                        },opts.speed,function(){endOpening()});
                        $(el).find('.az_slideShow_main').eq(2).animate({
                            left:opts.opened_width
                        },opts.speed);
                        
                        
                        $(el).find('.az_slideShow_main').eq(5).animate({
                            left:opts.opened_width_current+opts.opened_width,
                            height:opts.opened_height,
                            marginTop:opts.opened_topMargin
                        },opts.speed);
                        $(el).find('.az_slideShow_main').eq(4).animate({
                            left:opts.opened_width_current+opts.opened_width
                        },opts.speed);
                        
                        $(el).find('.az_slideShow_bigTitle').stop();
                        $(el).find('.az_slideShow_bigTitle').eq(0).animate({
                            left:0,//parseInt((opts.opened_width-$(el).find('.az_slideShow_bigTitle').eq(0).width())/2),
                            width:opts.opened_width,
                            opacity:1
                        },opts.speed);
                        $(el).find('.az_slideShow_bigTitle').eq(1).animate({
                            left:opts.opened_width,//opts.opened_width+parseInt((opts.opened_width_current-$(el).find('.az_slideShow_bigTitle').eq(1).width())/2),
                            width:opts.opened_width_current,
                            opacity:0
                        },opts.speed);
                        $(el).find('.az_slideShow_bigTitle').eq(2).animate({
                            left:opts.opened_width+opts.opened_width_current,//opts.opened_width+opts.opened_width_current+parseInt((opts.opened_width-$(el).find('.az_slideShow_bigTitle').eq(2).width())/2),
                            width:opts.opened_width,
                            opacity:1
                        },opts.speed);
                        
                    }else if( cI>=4 ){
                        if( parseInt($(el).attr('ci')) == 2 )
                            return;
                        $(el).find('.az_slideShow_main').stop();
                        animateContentOut();
                        
                        $(el).attr('ci',2);
                        $(el).attr('cii',0);
                        
                        $(el).find('.az_slideShow_main').eq(1).animate({
                            height:opts.opened_height,
                            marginTop:opts.opened_topMargin
                        },opts.speed);
                        $(el).find('.az_slideShow_main').eq(0).animate({
                        },opts.speed);
                        
                        $(el).find('.az_slideShow_main').eq(3).animate({
                            left:opts.opened_width,
                            height:opts.opened_height,
                            marginTop:opts.opened_topMargin
                        },opts.speed);
                        $(el).find('.az_slideShow_main').eq(2).animate({
                            left:opts.opened_width
                        },opts.speed);
                        
                        $(el).find('.az_slideShow_main').eq(5).animate({
                            left:opts.opened_width+opts.opened_width,
                            height:opts.opened_height_current,
                            marginTop:0
                        },opts.speed,function(){endOpening()});
                        $(el).find('.az_slideShow_main').eq(4).animate({
                            left:opts.opened_width+opts.opened_width
                        },opts.speed);
                        
                        $(el).find('.az_slideShow_bigTitle').stop();
                        $(el).find('.az_slideShow_bigTitle').eq(0).animate({
                            left:0,//parseInt((opts.opened_width-$(el).find('.az_slideShow_bigTitle').eq(0).width())/2),
                            width:opts.opened_width,
                            opacity:1
                        },opts.speed);
                        $(el).find('.az_slideShow_bigTitle').eq(1).animate({
                            left:opts.opened_width,//opts.opened_width+parseInt((opts.opened_width-$(el).find('.az_slideShow_bigTitle').eq(1).width())/2),
                            width:opts.opened_width,
                            opacity:1
                        },opts.speed);
                        $(el).find('.az_slideShow_bigTitle').eq(2).animate({
                            left:opts.opened_width+opts.opened_width,//opts.opened_width+opts.opened_width+parseInt((opts.opened_width_current-$(el).find('.az_slideShow_bigTitle').eq(2).width())/2),
                            width:opts.opened_width_current,
                            opacity:0
                        },opts.speed);
                        
                    }
            });
            // Finaly we manage the boodBye event!
            $(el).mouseleave( function() { // If we leave our el
                if( video ) // But we are in video mode, we do anything
                    return;
                $(el).find('*').stop();
                $(el).attr('ci',-1);
                animateContentOut();
                
                
                
                $(el).find('.az_slideShow_main').eq(1).animate({
                    height:opts.closed_height,
                    marginTop:0
                },opts.speed);
                $(el).find('.az_slideShow_main').eq(0).animate({
                },opts.speed);
                
                $(el).find('.az_slideShow_main').eq(3).animate({
                    left:opts.closed_width,
                    height:opts.closed_height,
                    marginTop:0
                },opts.speed);
                $(el).find('.az_slideShow_main').eq(2).animate({
                    left:opts.closed_width
                },opts.speed);
                
                $(el).find('.az_slideShow_main').eq(5).animate({
                    left:opts.closed_width+opts.closed_width,
                    height:opts.closed_height,
                    marginTop:0
                },opts.speed);
                $(el).find('.az_slideShow_main').eq(4).animate({
                    left:opts.closed_width+opts.closed_width
                },opts.speed);
                
                
                 $(el).find('.az_slideShow_bigTitle').eq(0).animate({
                            left:0,//parseInt((opts.opened_width-$(el).find('.az_slideShow_bigTitle').eq(0).width())/2),
                            width:opts.closed_width,
                            opacity:1
                        },opts.speed);
                        $(el).find('.az_slideShow_bigTitle').eq(1).animate({
                            left:opts.closed_width,//opts.opened_width+parseInt((opts.opened_width-$(el).find('.az_slideShow_bigTitle').eq(1).width())/2),
                            width:opts.closed_width,
                            opacity:1
                        },opts.speed);
                        $(el).find('.az_slideShow_bigTitle').eq(2).animate({
                            left:opts.closed_width+opts.closed_width,//opts.opened_width+opts.opened_width+parseInt((opts.opened_width_current-$(el).find('.az_slideShow_bigTitle').eq(2).width())/2),
                            width:opts.closed_width,
                            opacity:1
                        },opts.speed);
               
            });
        }
        
        
        function buildContent() {//console.log($(el).attr('cii')+' // '+$(el).attr('cii'));
            // We get the current data
            tab = opts.data[$(el).attr('ci')];
            // We write the current informations
            $('<div>',{
                html:opts.HTMLtopContent.replace('###TITLE###',tab['titres'][$(el).attr('cii')]).replace('###DESCRIPTION###',tab['descriptions'][$(el).attr('cii')]).replace('###LINK###',tab['liens'][$(el).attr('cii')])
            }).appendTo($('.az_slideShow_contenu'));
                /*
                    .fadeIn(opts.speed) // A smallest effect
                    .parent().css('color',tab['colors'][0]);*/
                
                // Build miniatures
                o = '';
                for( k=0;k<tab['miniatures'].length;k++ ) {
                    classChris = ( $(el).attr('cii') == k )?' class="az_slideShow_active" ':'';
                    o += '<img '+classChris+'src="'+tab['miniatures'][k]+'"/>';
                }
                
                $('<div>',{
                    html:o
                }).appendTo($('.az_slideShow_contenu'));
            
            $('.az_slideShow_contenu').css('color',tab['colors'][$(el).attr('cii')]);
            $('.az_slideShow_contenu a').css('color',tab['colors'][$(el).attr('cii')]);
            
            // Now we cant to attach a click event to our miniatures
            $('.az_slideShow_contenu').find('img').click( function() {
                cI = $(this).index();
                //console.log($(el).attr('cii')+' // '+$(el).attr('cii'));
                if( cI == $(el).attr('cii') )
                    return;
                $(el).attr('cii',cI);
                //console.log($(el).attr('cii')+' // '+$(el).attr('cii'));
                $('.az_slideShow_contenu')
                    .stop()
                    .animate({
                        left:parseInt($(el).attr('ci')*opts.opened_width)+opts.opened_width_current,
                        opacity:0
                    },opts.speed,function () {
                        $('.az_slideShow_contenu').html('');
                        buildContent();
                        animateContentIn();
                        
                        $('<img>',{
                            className:'az_slideShow_main az_slideShow_image az_slideShow_miniature',
                            src:opts.data[$(el).attr('ci')]['images'][$(el).attr('cii')],
                            css:{
                                position:'absolute',
                                height:'312px',
                                left:$(el).attr('ci')*opts.opened_width,
                                zIndex:$(el).attr('ci')*10+1
                            }
                        }).appendTo(el);
                        
                        $('.az_slideShow_image').eq($(el).attr('ci')).animate({
                            opacity:0
                            },opts.speed,function() {
                                $(this)
                                    .attr('src',opts.data[$(el).attr('ci')]['images'][$(el).attr('cii')])
                                    .css('opacity',1);
                                $('.az_slideShow_image:last').remove();
                                animating=false;
                            });
                        
                    });
            });
        }
        function animateContentIn() {
            
            $('.az_slideShow_contenu')
                .css('opacity',0)
                .animate({
                    left:parseInt($(el).attr('ci'))*opts.opened_width,
                    opacity:1
                },opts.speed);
        }
        function animateContentOut() {
            $('.az_slideShow_contenu')
                .stop()
                .animate({
                    left:parseInt($(el).attr('ci'))*opts.opened_width+opts.opened_width_current,
                    opacity:0
                },opts.speed,function () {
                    $(this).remove();
                });
        }
        function getCurrentIndexes() {
            cI=new Array();
            cI[0]=$(el).find('.az_slideShow_image[current=1]').index('.az_slideShow_image');
            
            o=$(el).find('.az_slideShow_miniature[current=1]').index();
            if( o == -1 )
                o = 0;
               
            cI[1]=o;
            //console.log(cI);
            return cI;
        }
        /*
         
         
        */
        
        function endOpening() {
            // We hide Big title
            /*$('.az_slideShow_bigTitle').eq($(el).attr('ci')).animate({
                bottom:'-30px'
            },opts.speed);*/
            if( parseInt($(el).attr('ci')) == -1 ) {
                $(el).trigger('mouseleave');
                return '';
            }
            // If it's an image slide
            if( opts.data[$(el).attr('ci')]['type'] == 'images' ) {
                // We create the content container
                $('<div>',{
                    className:'az_slideShow_contenu',
                    css:{
                        left:parseInt($(el).attr('ci'))*opts.opened_width+opts.opened_width_current,
                        zIndex:$(el).attr('ci')*10+4,
                        position:'absolute'
                    }
                }).appendTo(el);
                //Now we create content
                buildContent();
                // And to finish, we animate the content
                animateContentIn();
            }
        }
        
        
        // We don't break the line !! We are good boys ^^'
        return $(this);
    };
})(jQuery);