/******************************************************
    * Prototype plug-in
    * Mediameg rotator v.0.9 beta
    * Developed by mediameg (http://www.mediameg.com)
******************************************************/
/**
 * 
 *  Appel
 *    document.observe("dom:loaded", function(){
                    oMySlides = new rot_slid({                        
                        slides 	: [{src:'img/slider_0.jpg', target:'_blank', url:'www.google.ca'},{src:'img/slider_0.jpg', target:'_blank', url:'wrc.com'},{src:'img/slider_0.jpg', target:'_blank', url:'mediameg.com'}],
                        img_id : 'slider_1_img',
                        effect : 'appear',
                        div_to_insert : "test",
                        //align_center : true,
                        //infinit : false,
                        //autoplay : true,
                        //navigation : true,
                        //opacity_info : {show:false, size:50, opacity:0.6,color:'black'},
                        images_icon : {normal:"img/btn-nav.png", select:"img/btn-nav-selected.png"},
                        //show_arrows : true,
                        arrow_images : {left:'img/arrows_left.png', right:'img/arrows_right.png'},
                        width : 946,
                        height: 295,
                        return_auto : true
                    });
                })
 *
 *Les effets sont :
 *  slideleft : tasse l'image vers la gauche
    slideright : tasse l'image vers la droite
    slideup : tasse l'image vers l'haut
    slidedown : tasse l'image vers l'haut
    appear : Effet comme dans le flash
    blinddown : haut vers le bas
    grow : bas vers l'haut
    sans  effets: Le carrousel change l'image tout simplement
    marqueeleft: tasse les images en cotinue à gauche
    marqueeright: tasse les images en cotinue à droit
    marqueeup: tasse les images en cotinue vers l'haut
    marqueedown: tasse les images en cotinue vers le bas
 *
 * Autoplay : true/false joue de façon automatique le carrousel
 * infinit : true/false fait le carrousel joue de façon infinie
 * navigation : true/false montre les boutons où l'animation est rendu
 * slides : array with object that has src, target and url
 * 
 */
var rot_slid = new Class.create();
rot_slid.prototype = {
    initialize : function (parameter){
        //Default time to change is 5sec
        this.time_change    = parameter.time_change     != undefined ? parameter.time_change : 5000;
        this.current        = 0;
        this.img_id         = parameter.img_id;
        this.slides         = parameter.slides          != undefined ? parameter.slides : new Array();
        this.effect         = parameter.effect          != undefined ? parameter.effect : 0;
        this.align_center   = parameter.align_center    != undefined ? parameter.align_center : true;
        this.window_div     = "";
        this.div_img        = "";
        this.pixels_to_slid = 0;
        this.reverse        = false;
        this.infinit        = parameter.infinit         != undefined ? parameter.infinit : false;
        this.div_to_insert  = parameter.div_to_insert;
        this.opacity_info   = parameter.opacity_info    != undefined ? parameter.opacity_info : {show:false};
        this.autoplay       = parameter.autoplay        != undefined ? parameter.autoplay : true;
        this.div_left       = "";
        this.div_right      = "";
        this.navigation     = parameter.navigation      != undefined ? parameter.navigation : true;        
        this.width          = parameter.width;
        this.height         = parameter.height;        
        this.show_arrows    = parameter.show_arrows     != undefined ? parameter.show_arrows : false;        
        this.nb_clone_image = parameter.nb_clone_image  != undefined ? parameter.nb_clone_image : 2;
        this.return_auto    = parameter.return_auto     != undefined ? parameter.return_auto : false;
        this.do_back        = false;
        this.random         = parameter.random          != undefined ? parameter.random : false;
        this.new_div        = ''; // div that will contaim images
        this.minus_width    = parameter.minus_width     != undefined ? parameter.minus_width : 0;
        this.add_div_mask   = parameter.add_div_mask    != undefined ? parameter.add_div_mask : false;
        this.radiusx        = parameter.radiusx         != undefined ? parameter.radiusx : 0;
        this.radiusy        = parameter.radiusy         != undefined ? parameter.radiusy : 0;
        this.centerx        = parameter.centerx         != undefined ? parameter.centerx : 0;
        this.centery        = parameter.centery         != undefined ? parameter.centery : 0;
        //create a new li on navigation that will show name of image that is selected
        this.show_name_img  = parameter.show_name_img   != undefined ? parameter.show_name_img : false;
        
        //do count nb images an affect to variable
        this.numOfImages = this.slides.length;
        
        // no slides we stop execution
        if ( !this.numOfImages || this.numOfImages == 0) {            
            return;
        }        
        
        //if effect is in "reverse" mode we reverse array of images
        if(parameter.effect == "slideright" ||  parameter.effect == "slidedown" || parameter.effect == "marqueeright"|| parameter.effect == "marqueedown"){
            this.slides.reverse(); 
            this.reverse  = true;
        }
        
        //initialize rotator
        this.start_rot();
        
    },
    start_rot: function(){        
        //check we are random load different image        
        if(this.random){
            //get a random number to start sequence
            this.current = this._randomFromTo(0, this.numOfImages - 1);  
            //add new element on start of array
            this.slides.unshift(this.slides[this.current]);
            //remove element from its original position
            this.slides.splice(this.current+1,1);
        }
        
        // add structure to rotator
        this.add_new_div_rot_slid();
        
        // now let's correct height width
        this.get_width_window_div();
        
        // do start setup for effects
        this.set_up_div_effects();
        
        //initialize time id
        this.id_time_out = 0;
        
        // use with marquee effect
        if(this.effect == 'marqueeleft' || this.effect == 'marqueeright' || this.effect == 'marqueeup' || this.effect == 'marqueedown'){
            this._marquee_effect();
            //end script here
            return;
        }
        
        // use with rotator effect
        if(this.effect == 'rotatorleft' || this.effect == 'rotatorright' || this.effect == 'rotatorup' || this.effect == 'rotatordown'){
            this._rotator_effect();
            //end script here
            return;
        }
        
        if(this.navigation){
            // if is set we will show little guides
            this._createNavigation();
            this._createPauseStartbtn();
        }
        if( this.show_arrows){
            // we show div with arrows
             this._create_arrows();
        }
        // put class current on li
        this._change_icon();
        //show next image, if not autoplay do nothing
        this.play_next_image();
    },
    _create_arrows: function(){
        // create div that will be receive css
        var new_div_left =   new Element('div', {id:'arrow_left_'+this.img_id, 'class':'arrow_'+this.img_id});
        var new_div_right =  new Element('div', {id:'arrow_right_'+this.img_id, 'class':'arrow_'+this.img_id});       

        // observe on div, if div click do previous or next
        new_div_left.observe('click', this.previousimage.bind(this));
        new_div_right.observe('click', this.nextimage.bind(this));
        
        // insert new div into maiden div
        $(this.div_to_insert).insert(new_div_left);
        $(this.div_to_insert).insert(new_div_right);

    },
    _createNavigation: function(){
        
        //create navigation buttons, li from 1 to nb_images
        var new_div = new Element('ul', {id:'navigation_'+this.img_id, 'class':'nav_'+this.img_id});
         
        // if we need some div that we can css we have first li that has nothing,
        new_div.insert(new Element('li',{id:'nav_'+this.img_id+'_first', style:'cursor:pointer;list-style-type: none;', className: ''}));
        
        //for each image we create a li that will have class current
        for(var i = 0; i <  this.numOfImages; i++){
          var a = new Element('li',{id:'nav_'+this.img_id+'_'+i, style:'cursor:pointer;list-style-type: none;', className: 'nav_btn'}).update((i+1));
          a.observe('click', this._check_click.bind(this, i));
          new_div.insert(a);
        }
        
        // if we need some div that we can css we have last li that has nothing,
        new_div.insert(new Element('li',{id:'nav_'+this.img_id+'_last', style:'cursor:pointer;list-style-type: none;', className: ''}));
        
        //this li will contain name of image, this change was done since meubles & meubles require this
        if(this.show_name_img){
            new_div.insert(new Element('li',{id:'nav_name_'+this.img_id}));
        }
        
        //now we create this html and insert on div
        $(this.div_to_insert).insert(new_div);

    },
    _createPauseStartbtn: function (){
        // create ul that will contain pause start
        var new_ul = new Element('ul', {id:'startpausebtn_'+this.img_id, 'class':'startpausebtn_'+this.img_id});
        
        var start_btn = new Element('li',{id:'start_'+this.img_id, style:'cursor:pointer;list-style-type: none;display:none', className: 'start_pause_btn'}).update('Continuer');
        var pause_btn = new Element('li',{id:'pause_'+this.img_id, style:'cursor:pointer;list-style-type: none;', className: 'start_pause_btn'}).update('Arrêter');
        start_btn.observe('click', this.dostartbtn.bind(this));
        pause_btn.observe('click', this.dopausebtn.bind(this));
        
        new_ul.insert(start_btn)
        new_ul.insert(pause_btn)
        //now we create this html and insert on div
        $(this.div_to_insert).insert(new_ul);
    },
    dopausebtn:function(){
        //we stop 
        this._clear_counter();  
        //now we hide start btn and show pause btn
        $('pause_'+this.img_id).hide();
        $('start_'+this.img_id).show();
    },
    dostartbtn: function(){
       // play next if auto play
        this.play_next_image();  
        //now we hide start btn and show pause btn
        $('start_'+this.img_id).hide();
        $('pause_'+this.img_id).show();
    },
    add_new_div_rot_slid: function(){
        this.window_div  = "window_"+this.img_id;
        this.div_img = "div_"+this.img_id;
        this.div_left = "div_left_"+this.img_id;
        this.div_right = "div_right_"+this.img_id;
        
        this.div_mask = "";
        
        //if we have mask we will create a new div for it
        if(this.add_div_mask){
            this.div_mask = new Element('div', {className: 'mask_rotator_'+this.img_id,id:'mask_rotator_'+this.img_id});
        }
        
        // insert div that will have images
        this.new_div = new Element('div', {className: 'rot_ctn',id:this.div_img, style: "position: absolute;"});        
        
        // means we have to clone last image and insert first to be able to display correct
        // if we have opacity is to show an aspect of infiniti
        if(this.infinit && (this.reverse || this.opacity_info.show)){
            //we clone first image to create a new effect
            if(this.effect != "slideup" && this.effect != "slideright" && this.effect != "marqueeright" || ((this.effect == "slideup" || this.effect == "slideright" || this.effect == "marqueeright") && this.opacity_info.show)){
                for(i = this.nb_clone_image; i > 1; i-- ){
                    if(this.slides[this.numOfImages-i] && this.slides[this.numOfImages-i].src){
                        //insert div with link and img
                        this._insert_ctn_image_structure(this.numOfImages-i);
                    }
                }
                
            }
            //insert div with link and img
            this._insert_ctn_image_structure(this.numOfImages-1);
        }



        // we insert images into new div
        for(var i = 0; i <  this.numOfImages; i++){
            //insert div with link and img
            this._insert_ctn_image_structure(i);
        }
                
        if(this.infinit &&  !this.reverse && this.effect != "appear" && this.effect != "blinddown" && this.effect != "grow"){
            
            this._insert_ctn_image_structure(0); 

            if(this.opacity_info.show){
                // if we are in mode to show preview of next we clone second image also                
                 for(i = 1; i < this.nb_clone_image+1; i++ ){  
                    if(this.slides[i] && this.slides[i].src){
                        //insert div with link and img
                        this._insert_ctn_image_structure(i);                        
                    }                    
                 } 
            }
        }

        //we clone last to give impression of infinit
        if(this.infinit &&  this.reverse){
            //insert div with link and img
            this._insert_ctn_image_structure(0);              
               
            if(this.opacity_info.show){
                for(i = 1; i <= this.nb_clone_image; i++ ){  
                    if(this.slides[i].src){
                        //insert div with link and img
                        this._insert_ctn_image_structure(i);                        
                    }
                }                   
            }               
        }                        
        //create div that will mask all info on background (overflow hidden)
        var window_div = new Element('div', {className: 'rot_window', id:this.window_div, style: (this.effect.search('rotator') == -1? 'overflow: hidden; position: relative;':'')+( this.align_center ? " margin: 0 auto;" : "")});
        
        //if we have set opacity we will create div that will do this effect
        if(this.opacity_info.show && this.effect != 0){
            window_div.insert(new Element ('div',{id:this.div_left, style:"background-color:"+this.opacity_info.color+"; "+(this.opacity_info.opacity == 0 ?"display: none;" : "display: inline-block;" )+(Prototype.Browser.IE ? "filter: alpha(opacity = "+(this.opacity_info.opacity*100)+")" : "opacity:"+this.opacity_info.opacity)+";  overflow: hidden;  position: absolute;  width: "+this.opacity_info.size+"px;   z-index: 999999;"}));
        }
        //insert content(images) into div
        window_div.insert(this.new_div);
        
        //if we have set opacity we will create div that will do this effect
        if(this.opacity_info.show && this.effect != 0){
            window_div.insert(new Element ('div',{id:this.div_right, style:"background-color:"+this.opacity_info.color+"; "+(this.opacity_info.opacity == 0 ?"display: none;" : "display: inline-block;" )+(Prototype.Browser.IE ? "filter: alpha(opacity = "+(this.opacity_info.opacity*100)+");" : "opacity:"+this.opacity_info.opacity)+";   overflow: hidden;  position: absolute;  width: "+this.opacity_info.size+"px;   z-index: 999999;"}));
        }
        //insert all elements into parent div (div create by optimeasy)                
        $(this.div_to_insert).insert(window_div);
        //add mask div
        $(this.div_to_insert).insert(this.div_mask);

    },
    _insert_ctn_image_structure: function (id){
        //insert div with link and img
        this.new_div.insert(new Element('div', {className:'rot_img_content',id:this.img_id+'img_'+id, style: 'display:inline; width:'+this.width+'px; height:'+this.height+'px'}).insert(new Element('a',{className: 'rot_img', target:  this.slides[id].target, href: this.slides[id].url}).insert(new Element ('img',{src: this.slides[id].src, style:"display:inline-block;"}))));                                            
    },    
    set_up_div_effects: function(){
        
        //we calculate pixel to slid, since this is affect by certains config
        var calculate_initial_setup = -parseInt(this.pixels_to_slid*(this.infinit ? (this.opacity_info.show ? this.nb_clone_image : 0) : 0))+parseInt(this.opacity_info.show ? this.opacity_info.size : 0);
        
        //put image on righ position
        switch(this.effect){
                case "slideleft":
                    $( this.div_img).setStyle({top: 0, left:    calculate_initial_setup+"px"});
                    break;
                case "slideright":
                    $( this.div_img).setStyle({top: 0, right:   calculate_initial_setup+"px"});
                    break;
                 case "slideup":
                     $( this.div_img).setStyle({top:            calculate_initial_setup+"px"});
                    break;
                 case "slidedown":
                     $( this.div_img).setStyle({bottom:         calculate_initial_setup+"px"});
                    break;                 
                 case "marqueeleft":
                    this._set_up_div_effects_marquee();  
                    break;
                 case "marqueeright":
                    this._set_up_div_effects_marquee();                        
                    break;
                 case "marqueeup":
                    this._set_up_div_effects_marquee();                                             
                    break;
                 case "marqueedown":
                    this._set_up_div_effects_marquee();                    
                    break;
                 case "rotatorleft":
                    this._set_up_div_effects_rotator();  
                    break;
                 case "rotatorright":
                    this._set_up_div_effects_rotator();                        
                    break;
                 case "rotatorup":
                    this._set_up_div_effects_rotator();                                             
                    break;
                 case "rotatordown":
                    this._set_up_div_effects_rotator();                    
                    break;
                     
                     
        }
    },
    _set_up_div_effects_marquee: function(){
        
        var style_to_use = this.effect.replace('marquee','').replace('up','top').replace('down','bottom');   
        var object_style = {}; 
        object_style["top"] = '0px';
        object_style["left"] = '0px';
        
        if(style_to_use == "bottom"){
            delete object_style['top'];            
        }
        if(style_to_use == "right"){
            delete object_style['left'];            
        }
        object_style[style_to_use] = '0px';                
        
        $( this.div_img).setStyle(object_style);
        
        var marquee_array = $$('#'+this.div_img+" > div.rot_img_content");
        
        object_style['position'] = 'absolute';                
        if(!this.reverse){            
            for (i = 0; i < marquee_array.length; i++) {
                object_style[style_to_use] = (style_to_use == 'left' ? (this.width*i) : (this.height*i))+'px';                
                $(marquee_array[i]).setStyle(object_style);
            } 
        }
        else{
            for (i = marquee_array.length-1, j=0; i >-1  ; i--, j++) {
                object_style[style_to_use] = (style_to_use == 'right' ? this.width*(j+(this.infinit ? -1 : 0)) : this.height*(j+(this.infinit ? -1 : 0)))+'px';                
                $(marquee_array[i]).setStyle(object_style);                                
            }
        }
        
        //set effects in and out
        $(this.div_img).observe('mouseenter', this._clear_counter.bind(this));
        $(this.div_img).observe('mouseleave', this._marquee_effect.bind(this));
        
    },
    _set_up_div_effects_rotator: function(){
          
          var rotator_array = $$('#'+this.div_img+" > div.rot_img_content");
          rotator_array.each(function(element) {
                    new Effect.Appear(element, {duration:0.8});
                    $(element).style.position = 'absolute';
                    $(element).style.display = 'none';
          });
        if(this.effect == "rotatorleft"){
            this.effect = "rotatorright"
        }
        else{
            if(this.effect == "rotatorright"){
                this.effect = "rotatorleft"
            }    
        }
        //dfgdfg
         //set effects in and out
        $(this.div_img).observe('mouseenter', this._clear_counter.bind(this));
        $(this.div_img).observe('mouseleave', this._rotator_effect.bind(this));
    },
    get_width_window_div: function(){
        // we get dimmentions of image to set height and width of div
        var height_div = this.height;
        var width_div = this.width ;
        this.pixels_to_slid = width_div;        
        $(this.window_div).setStyle({width:(width_div-this.minus_width)+"px", height: height_div+"px"});

        // if we have this effects we will change width of div
        if(this.effect == "slideleft" || this.effect == "slideright" || this.effect == "marqueeleft" || this.effect == "marqueeright"){
            // if we have infinit we add one more img to end of div, since we will duplicate first image
            //if we have infinit and we display preview we add 3 mores img sizes to end
            $(this.div_img).setStyle({width: this.pixels_to_slid*this.return_nb_img_div()+"px"});
            if(this.opacity_info.show){
                $(this.div_left).setStyle({height: height_div+"px"});
                $(this.div_right).setStyle({height: height_div+"px", left: width_div+this.opacity_info.size+"px"});
                $(this.window_div).setStyle({width:(width_div-this.minus_width)+(this.opacity_info.size*2)+"px"});
            }
        }
        else if(this.effect == "slideup" || this.effect == "slidedown" || this.effect == "marqueeup" || this.effect == "marqueedown" ){
             this.pixels_to_slid = height_div;
            $(this.div_img).setStyle({height: this.pixels_to_slid*this.return_nb_img_div()+"px"});
            if(this.opacity_info.show){
                $(this.div_left).setStyle({width: width_div+"px", height: this.opacity_info.size+"px"});
                $(this.div_right).setStyle({width: width_div+"px", height: this.opacity_info.size+"px", top: height_div+this.opacity_info.size+"px"});
                $(this.window_div).setStyle({height:(height_div-this.minus_width)+(this.opacity_info.size*2)+"px"});
            }
        }
        else{
            this.pixels_to_slid = height_div;
        }
    },
    return_nb_img_div: function(){
        //return total of div.rot_img_content in maiden div
        return $$('#'+this.div_img+" > div.rot_img_content").length;        
    },    
    play_next_image: function(){
         //if we have autoplay set to true we call next image, otherwise we do nothing
         if(this.autoplay){
            this.id_time_out = setTimeout(this.nextimage.bind(this), this.time_change);
        }
    },
    play_previous_image: function(){
        //if we have autoplay set to true we call previous image, otherwise we do nothing
         if(this.autoplay){
            this.id_time_out = setTimeout(this.previousimage.bind(this), this.time_change);
        }
    },
    nextimage : function (){
  
        // first we stop counter
        this._clear_counter();
        
        if(this.do_back || this.return_auto && this._check_arrive_final()){            
            // if we are here means we have select return_auto
            // so slider we will up to last slid and will commeback to first slid
            this.do_back = true;
            
            if(this._check_arrive_start()){
                this.do_back = false;
            }
            
            if(this.do_back){
                this.previousimage();
                return;
            }
            
        }                
        
        //we pass counter to next image
        this.control_current('next');
        // change icon
        this._change_icon();        
        // change slid
        this._change_slide('next');      
        // play next if auto play
        this.play_next_image();                
        
    },
    previousimage : function(){

        // first we stop counter
        this._clear_counter();
        //we pass counter to previous image
        this.control_current('previous');
        // change icon
        this._change_icon();
        // change slid
        this._change_slide('previous');
        // play next if auto play
        this.play_next_image();

    },
    control_current: function(action){

        if(!this.random){
            if(action == 'next'){
                // if we have infinit option
                if(this.infinit && this.current >= this.numOfImages){
                    this.current = 0;
                }

                this.current++;

                // if not infinit normal trateament            
                if(!this.infinit && this.current >= this.numOfImages){
                    this.current = 0;
                }
            
            }
            else if(action == 'previous'){
                if(this.infinit && this.current < 0){
                    this.current = this.numOfImages - 1;
                }

                this.current--;

                if(!this.infinit && this.current < 0){
                    this.current = this.numOfImages - 1;
                }


            }
            else{
                return;
            }  
        }
        else{// means we are loading on random
                        
            var new_current = this.current;            
            while(this.current == new_current){                
                this.current = this._randomFromTo(0, this.numOfImages - 1);                
            }
        }
                       
    },    
    calculate_travel_slid: function (infinit_slid){
        return ((parseInt(this.opacity_info.show ? this.pixels_to_slid*(this.infinit ? parseInt(infinit_slid) : 0) : 0)+parseInt(this.pixels_to_slid*this.current)-parseInt(this.opacity_info.show ? this.opacity_info.size : 0)))*-1;
    },
    _randomFromTo: function (from, to){
       return Math.floor(Math.random() * (to - from + 1) + from);
    },
    _check_arrive_final: function(){
        return this.current >= this.numOfImages - 1;
    },
    _check_arrive_start: function(){        
        return this.current <= 0;
    },
    _change_slide: function(action){
                
          switch(this.effect){
                case "slideleft":
                    new Effect.Morph(this.div_img,{style:'left: '   +this.calculate_travel_slid(this.nb_clone_image)+"px", afterFinish: this._check_after_change.bind(this, action)});
                    break;
                case "slideright":
                    new Effect.Morph(this.div_img,{style:'right: '  +this.calculate_travel_slid(this.nb_clone_image)+"px", afterFinish: this._check_after_change.bind(this, action)});
                    break;
                case "slideup":
                    new Effect.Morph(this.div_img,{style:'top: '    +this.calculate_travel_slid(this.nb_clone_image)+"px", afterFinish: this._check_after_change.bind(this, action)});
                    break;
                case "slidedown":
                    new Effect.Morph(this.div_img,{style:'bottom: ' +this.calculate_travel_slid(this.nb_clone_image)+"px", afterFinish: this._check_after_change.bind(this, action)});
                    break;
                case "appear":
                    this._hide_all_images();                     
                    if($(this.img_id+'img_'+(this.current))){                        
                        new Effect.Appear(this.img_id+'img_'+(this.current));
                    }
                    break;
                case "blinddown":
                    this._hide_all_images();
                    new Effect.BlindDown(this.img_id+'img_'+(this.current));
                    break;
                 case "grow":
                    this._hide_all_images();
                    new Effect.Grow(this.img_id+'img_'+(this.current));
                    break;                
                default : // no animation
                    $(this.div_img).setStyle({top: -this.pixels_to_slid*this.current});

        }
  
    },
    _marquee_effect: function(){
        
        // first we stop counter
        this._clear_counter();
        
        // get all image to show        
        var marquee_array = $$('#'+this.div_img+" > div.rot_img_content");
        var style_to_use = this.effect.replace('marquee','').replace('up','top').replace('down','bottom');        
        var dim_to_use = style_to_use == 'down' || style_to_use == 'up' ? 'height' : 'width';
        var pixel_to_deplace = 0;
        //foreach on we will deplace 1px
        for (var j = marquee_array.length - 1, i = 0; j > -1;  j--, i++) {
            
                pixel_to_deplace = parseInt($(marquee_array[j]).getStyle(style_to_use).replace('px',''));

                var object_style = {}; 
                object_style[style_to_use] = (pixel_to_deplace-1)+'px';
                                                
                $(marquee_array[j]).setStyle(object_style);
                
                if (parseInt($(marquee_array[j]).getStyle(style_to_use).replace('px','')) + parseInt($(marquee_array[j]).getStyle(dim_to_use).replace('px','')) < 0) {
                    object_style[style_to_use] = parseInt($(marquee_array[j]).getStyle(style_to_use).replace('px','')) + parseInt($(marquee_array[j]).getStyle(dim_to_use).replace('px','')*marquee_array.length) + 'px';
                    $(marquee_array[j]).setStyle(object_style);
                    //we pass counter to next image
                    this.control_current('next');
                    this._change_icon();
                }         
        }
        
        if(this.autoplay){
            this.id_time_out = setTimeout(this._marquee_effect.bind(this), (this.time_change/100));
        }
          
    },
    _rotator_effect: function(){
        // first we stop counter
        this._clear_counter();
        var rotator_array = $$('#'+this.div_img+" > div.rot_img_content");
        var style_to_use = this.effect.replace('rotator','').replace('up','top').replace('down','bottom');

        for(var i = 0; i < rotator_array.length; i++){
                var base =  0.1;
                var angle = i*2*Math.PI/rotator_array.length;
                var posx = Math.ceil(this.centerx+Math.sin(this.current*(base)+angle)*this.radiusx);
                var posy = Math.ceil(this.centery+Math.cos(this.current*(base)+angle)*this.radiusy);
                //set style of image in question
                var object_style = {};
                object_style[style_to_use] = (posx)+'px';
                $(rotator_array[i]).setStyle(object_style);
                $(rotator_array[i]).style.top = posy+"px";
                $(rotator_array[i]).style.zIndex = Math.round(posy/3)+100;
        }

        this.current++;
        if(this.autoplay){
            this.id_time_out = setTimeout(this._rotator_effect.bind(this), (this.time_change));
        }
    },
    _change_slide_no_effects: function(){
            switch(this.effect){
                    case "slideleft":
                        $(this.div_img).setStyle({left: this.calculate_travel_slid(this.nb_clone_image)+"px"});
                        break;
                    case "slideright":
                        $(this.div_img).setStyle({right: this.calculate_travel_slid(this.nb_clone_image-1)+"px"});
                        break;
                    case "slideup":
                        $(this.div_img).setStyle({top: this.calculate_travel_slid(this.nb_clone_image)+"px"});
                        break;
                    case "slidedown":
                        $(this.div_img).setStyle({bottom: this.calculate_travel_slid(this.nb_clone_image-1)+"px"});
                        break;
                    default : // no animation
                        $(this.div_img).setStyle({top: -this.pixels_to_slid*this.current});

                }
    },
    _hide_all_images: function(){        
        $$("#"+this.div_img+" div.rot_img_content").each(
            function(elem){                 
                elem.hide();
            }
        );
    },
    _check_after_change: function(action){

            //if we are next and we arrived at end of image we change to start
            if(action == 'next' && this.infinit&& this.current == this.numOfImages){                
                this.set_up_div_effects();                
            }
            // if we are backing and we arrived on last image to show, we has to show as last image
            if(action == 'previous' && this.infinit && this.current < 0){                
                var tmp_current = this.current;
                this.current = this.numOfImages - (this.reverse ? 0 : 1);
                this._change_slide_no_effects();
                this.current = tmp_current;
            }
    },
    _check_click: function(img_change){
        this.current = img_change - 1;
        this.nextimage();
    },
    _change_icon: function (){
        var counter = 0;
        var CopyObj = this;
        var length_navigation = $$('#navigation_'+this.img_id+" > li.nav_btn");

        
        $$('#navigation_'+this.img_id+" > li.nav_btn").each(function(img_icon){
                        
            if(counter == CopyObj.current || (CopyObj.current == CopyObj.numOfImages && counter == 0) || (CopyObj.current < 0 && counter == length_navigation.length-1) ){
                img_icon.addClassName('nav_btn_selected');
                if(CopyObj.show_name_img){
                    $('nav_name_'+CopyObj.img_id).innerHTML = CopyObj.slides[counter].alt;
                }
            }
            else{
               img_icon.removeClassName('nav_btn_selected');
            }

            counter++;
        });
    },
    _clear_counter: function(){
       // first we stop counter
        if(this.id_time_out != 0){
            clearTimeout(this.id_time_out);
        }        
    }
}// end class rot_slid