/*
 * by Andr� Inocenti
 * 
 
 Usage:
 
 * HTML *
 
 <div id='gl'>
     <img src='bla1.jpg' alt='Bla' />
     <img src='bla2.jpg' alt='Bla' />
     <img src='bla3.jpg' alt='Bla' />
 </div>
  
 * JQUERY *
 $('#gl').gInocentiCSS3();

 OR YOU CAN SET THESE ITENS BELOW

 $('#gl').gInocentiCSS3({
     width:'940px',
     height:'270px',     
     timeEffect:1.0,
     effect:'ease-in-out',
     delay:3000
 });
 */

jQuery.fn.gInocentiCSS3 = function() {
    var width = '940';
    var height = '270';
    var height = '270';
    var timeEffect = '1.0';
    var effect = 'ease-in-out';
    var delay = 3000;
    var div = $(this[0]); // element
    var args = arguments[0] || {}; // arguments
    var posImg = 0;
    var imgs = $('img',div);
    
    width = (args.width != undefined) ? args.width : width ;
    height = (args.height != undefined) ? args.height : height;
    timeEffect = (args.timeEffect != undefined) ? args.timeEffect : timeEffect;
    effect = (args.effect != undefined) ? args.effect : effect;
    delay = (args.delay != undefined) ? args.delay : delay;
    
    
    
    //Cria a div abaixo entorno da div contendo as imagems;
    div.wrap('<div class="slide_container" />');
        
    /*Propriedades CSS*/
    var slide_container = {
        'width':width,
	'height':height,
	'overflow':'hidden',
	'position':'relative',
        'z-index':'1'
    };
    
    var div_css = {
	'position':'relative',	
	'width':'100%',
        'z-index':'1'
	
    };
    var imgs_css = { 
        'position':'absolute',
	'left':'0px',
        'top':'0px',
	'padding':'0',
	'margin':'0',
        'z-index':'1',
        
        '-webkit-transition':'opacity '+timeEffect+'s '+effect,
	'-moz-transition':'opacity '+timeEffect+'s '+effect,
	'-o-transition':'opacity '+timeEffect+'s '+effect,
	'-ms-transition':'opacity '+timeEffect+'s '+effect,	
	'-transition':'opacity '+timeEffect+'s '+effect
    };
    
    /*Seta propriedades CSS ao elemento*/
    $('.slide_container').css(slide_container);
    div.css(div_css);
    imgs.css(imgs_css);
    
    //Arruma posições das imagens
    var zIndex = parseInt(imgs.size()) + 10;
    for(x = 0; x <= (imgs.size() - 1); ++x){
        img = imgs.get(x);
        $(img).css({'z-index':zIndex});
        --zIndex;
    }
    
    //Funcao de transicao por opacidade
    
    var code = "transitionOpacity"+div.attr('id')+"=function(){ var count = (imgs.size() - 1);  if(count == posImg){imgs.css({'opacity':'100'}); posImg = 0;}else{var img = imgs.get(posImg);$(img).css({'opacity':'0'});++posImg;}};";
    eval(code);

    
    
    if (imgs.size() > 1){
        //Chama a funcao de transicao
        setInterval('transitionOpacity'+div.attr('id')+'()', delay);
    }
};