<?php
class Diaporama {

    private $html_id = "";
    private $img = array();

    public function __construct($html_id){
        
        $this->html_id = $html_id;
    }

    public function add_img(Img $img){
        
        $this->img[$img->get_filename()] = $img;
    }

    public function display(){
        
        $o = '';

        $o .= '<div class="diaporama" id="'.$this->html_id.'">';

        foreach($this->img as $img){
            $o .= $img->display();
        }
        

        $o .= '</div>';
        
        return $o;
    }


}


class Img {


    private $filename = "";
    private $id = 0, $title, $description;


    private $is_info_vertical = false;
    private $vertical_width=300;
    private $float = "left";


    public function __construct($filename, $id=0, $title="", $description=""){
        $this->filename = $filename;
        
        $this->set_id($id);
        $this->set_title($title);
        $this->set_description($description);
        
        
    }

    /*
     * PUBLIC SETTINGS
     */

    public function set_id($id){
        $this->id = $id;
    }
    public function set_title($title){
        $this->title = $title;
    }
    public function set_description($description){
        $this->description = $description;
    }

    public function set_vertical_info($b){
        $this->is_info_vertical = $b; 
    }
    public function set_vertical_width($i){
        $this->vertical_width = $i;
    }
    public function set_float($align){
        if($align != "right")
            $this->float = "left";
        else {
            $this->float = "right";
        }
    }

    /*
     * PUBLIC GETTINGS
     */

    public function get_filename(){
        return $this->filename;
    }
    public function get_id(){
        return $this->id;
    }
    public function get_title(){
        return $this->title;
    }
    public function get_description(){
        return $this->description;
    }





    /*
     * DISPLAYING
     */
    public function display(){
        $o = '<div class="img_block" id="'.$this->filename.'">';
        $o .= '<div class="img" style="
            background-image:url(\'img/test/'.$this->filename.'\');
            background-repeat:no-repeat;
            background-position:0 0;
            ">';

            if($this->title != "" || $this->description != ""){

                if($this->is_info_vertical){
                    $o .= '<div class="img_info_v"
                    style="
                        width:'.$this->vertical_width.'px;
                        float:'.$this->float.';
                    "
                    >';
                }else{

                    $o .= '<div class="img_info">';
                }
                    if($this->title != ""){
                    $o .= '<div class="info_title">';
                    $o .= $this->title;
                    $o .= '</div>';
                    }
                    if($this->description != ""){
                    $o .= '<div class="info_description">';
                    $o .= $this->description;
                    $o .= '</div>';
                    }

                $o .= '</div>';
                $o .= '<div class="s"></div>';



            }


        $o .= '</div>';


        //REFLECTION
        $fn_reflect = $this->get_filename_reflect();
        $o .= '<div class="img_reflection_box">';
            $o .= '<div class="img_reflection" style="
                background-image:url(\'img/test/'.$this->get_filename_reflect().'\');
                background-repeat:no-repeat;

                background-position:center;
                ">';
                    $o .= '<div class="reflection_shadow"></div>';
            $o .= '</div>';
        $o .= '</div>';


        $o .= '</div>' ;//img_block



        /*INVERT*/


        return $o;
    }


    private function get_filename_reflect(){
        $name = substr($this->filename, 0, strripos($this->filename, "."));
        $ext = substr($this->filename, strripos($this->filename,'.')+1);
        return $name.'_reflection.'.$ext;

    }





    /*
     * UTIL
     */


    public static function upload_img($F){

        $dossier = 'img/test/results/';

        $fichier = date('dmyHis');
        $taille_maxi = 2000000;
        $taille = filesize($F['image']['tmp_name']);
        $extensions = array('.png', '.gif', '.jpg', '.jpeg');
        $extension = strrchr($F['image']['name'], '.');
        $extension = strtolower($extension);
        
        if(!in_array($extension, $extensions)){
             throw new Exception("L'image n'est pas dans un format correct! Seuls autorisés: png, jpg, jpeg, gif");
        }
        if($taille>$taille_maxi){
             throw new Exception("Le fichier est trop gros!");
        }
        if(!isset($erreur)) //S'il n'y a pas d'erreur, on upload
        {
             //On formate le nom du fichier ici...
             
             if(move_uploaded_file($F['image']['tmp_name'], $dossier . $fichier.$extension)) //Si la fonction renvoie TRUE, c'est que ça a fonctionné...
             {

                  $reflection = self::transform_reflection($dossier.$fichier.$extension);
             }
             else //Sinon (la fonction renvoie FALSE).
             {
                  throw new Exception("Erreur pendant la copie du fichier sur le serveur!");
             }
        }
        else
        {
             throw new Exception("Erreur pendant l'upload!");
        }
    }


    private static function transform_reflection($i_url,$gradient=0.85,$rightdown=true,$background=0xFFFFFF){
        $extension = strrchr($i_url, '.');
        $new_url = substr($i_url, 0, strripos($i_url, '.')).'_reflection'.$extension;

        echo $new_url;

        
        $i = null;

        if($extension == ".jpg" || $extension == ".jpeg"){
            $src = imagecreatefromjpeg($i_url);
        }elseif($extension==".gif"){
            $src = imagecreatefromgif($i_url);
        }else{ //png
            $src = imagecreatefrompng($i_url);
        }



        $factor = 2;
        $w_src = imagesx($src);
        $h_src = imagesy($src);

        $w_dst = ceil($w_src * $factor);
        $h_dst = $h_src;

        
        //images
        $dst = imagecreatetruecolor($w_dst, $h_dst);
        imageantialias($dst, true);
        //bg

        imagesavealpha($dst , true);
        $trans_colour = imagecolorallocatealpha($dst, 17, 17, 17, 0);
        imagefill($dst, 0, 0, $trans_colour);


        
        $total_ajout = $w_dst - $w_src;
        

        $x_dst = ($w_dst-$w_src)/2;
        $retrait_x = 0;
        
        
        $perc_v = 0;

        $a1 = array($x_dst, 0);
        $a2 = array(0, $h_dst);
        $b1 = array($w_dst - $x_dst, 0);
        $b2 = array($w_dst, $h_dst);


        for($i=0;$i<$h_src;$i++){
            $perc_v = $i / $h_src;

            $retrait_x = round(($x_dst - ($x_dst *$perc_v)));
            $largeur = round($w_src + (($total_ajout * $perc_v)));

            imagecopyresampled($dst, $src, $retrait_x, $i, 0, $h_src-$i, $largeur, 1, $w_src, 1);
        }
        

        $red = imagecolorallocate($dst, 17, 17, 17);
        
        imageline($dst, $a1[0], $a1[1], $a2[0], $a2[1], $red);
        imageline($dst, $b1[0], $b1[1], $b2[0], $b2[1], $red);
        imageline($dst, $b1[0]-1, $b1[1], $b2[0]-1, $b2[1], $red);
        

        

        $resize = imagecreatetruecolor($w_dst-100, $h_dst-100);
        
        imagecopyresampled($resize, $dst, 0, 0, 0, 0, $w_dst-100, $h_dst -100, $w_dst, $h_dst);
        $resize2 = imagecreatetruecolor($w_dst, $h_dst);
        
        imagecopyresampled($resize2, $resize, 0, 0, 0, 0, $w_dst, $h_dst, $w_dst-100, $h_dst-100);

        













        
        
        if($extension == ".jpg" || $extension == ".jpeg"){
            imagejpeg($resize2, $new_url);
        }elseif($extension==".gif"){
            imagegif($resize2, $new_url);
        }else{ //png
            imagepng($resize2, $new_url);
        }

       
    }
}

?>

/*

    PAGE


*/
body{
    background-color:#111111;

    font-family: Arial;

    margin:0px;
    padding:0px;
    color:white;



}
.s{
    display:block;
    clear: both;
    height:0px;
}

/*

    HEADER


*/
.header{
    display:block;
    width:900px;

    margin:auto;
    
}

.site_logo{
    display:block;
    width:300px;
    height:130px;
    margin-top:30px;
    margin-left:10px;

    background-image:url("../img/build/logo_site.png");
    background-position:0px 0px;
    background-repeat:no-repeat;

}

.header .header_michaela em{
    display:block;
    font-style: normal;
    font-size:12px;
    color:#ffffff;
    border-top:1px solid #0000ff;
}

.header .menu{
    display:block;
    font-size:14px;
    margin-top:20px;
    letter-spacing: 1px;
    word-spacing: 5px;
    
    float:right;

}

.header .menu a{
    display:block;
    float:right;
    margin-left:8px;
    
    color:#666666;
    padding-bottom:3px;
    text-decoration: none;

}

.header .menu a:hover{

    border-bottom:2px solid #666666;
}

.header .menu .menu_on{
    display:block;
    float:right;
    margin-left:8px;
    color:#ffffff;
    padding-bottom:3px;
    text-decoration: none;

    border-bottom:2px solid #ffffff;
}


/*

    CONTENT


*/



.page_content{
    display:block;
    margin:0px;
    padding:0px;

    overflow:visible;


    text-align: center;

    /*background-color:#eeeecc;*/
}


.page_content .section_a{
    display:block;
    width:1000px;
    height:500px;

    background-color:transparent;
    margin:auto;

}

.page_content .section_i{
    display:none;
    width:1000px;
    height:500px;
    background-color:transparent;
    margin:auto;
    color:white;
}

.page_content .section_title{
    font-size:18px;

    padding:2px;
    padding-left:20px;

}



/*

    FOOTER


*/


.footer{
    display:none;
    color:#eeeecc;
    font-size:12px;

    width:1000px;
    margin:auto;
    text-align: center;
}

.diaporama{
    display:block;
    margin:auto;

    
    overflow:hidden;
    margin-top:10px;
}


.diaporama .img_block{
    display:block;
    width:1030px;

    margin:auto;
    position:relative;

}

.diaporama .img{


    display:block;
    height:430px;
    width:900px;
    margin:auto;

}

.diaporama .img_reflection_box{
    display:block;
    padding:0px;

    margin:0px;
    
    height:100px;



    overflow:hidden;

    margin:auto;
}
.diaporama .img_reflection_box .img_reflection{
    display:block;
    height:430px;

    
    margin:auto;
    margin-top:10px;
    margin-bottom:0px;

    

    
}


.diaporama .img_reflection_box .img_reflection .reflection_shadow{
    display:block;
    height:100px;

    background-image:url("../img/build/shadow.png");

    margin:auto;


}


.diaporama .arrow_left{
    display:block;
    position:absolute;
    height:430px;
    width:60px;

    background-image:url("../img/build/arrow_left.png");
    background-repeat:no-repeat;
    background-position: left center;
}

.diaporama .arrow_right{
    display:block;
    position:absolute;
    height:430px;
    width:60px;

    background-image:url("../img/build/arrow_right.png");
    background-repeat:no-repeat;
    background-position: left center;
}






/*

    INFO
*/


.diaporama .img .img_info{


    display:block;
    
    font-size:12px;
    font-weight:normal;
    color:#000000;
    text-align: left;

    background-image:url("../img/build/info_band.png");


    padding:5px;
    padding-bottom:10px;

}

.diaporama .img .img_info_v{


    display:block;
    height:430px;

    font-size:12px;
    font-weight:normal;
    color:#000000;
    text-align: left;

    background-image:url("../img/build/info_band.png");




}

.diaporama .img .info_title{
    font-weight: bold;

}

(function(){


    var Diaporama = Class.create({




        initialize:function(elmt){

            

            //can float only if centered image has been rolled over first
            this.float_activ = true;

            //saving elements: diapo & images

            this.e_diapo = elmt;
            this.e_diapo.absolutize();
                    //console.log(document.viewport.getDimensions().width);
                    this.e_diapo.setStyle({
                        "display":"block",
                        "overflow":"hidden",
                        "margin":"0px",
                        
                        "width":document.viewport.getDimensions().width+"px",
                        "height":"550px"
                    });


            this.images = Selector.findChildElements(elmt, [".img_block"]);

            //setting base style for diapo & images
            
            
            this.images.each(function(i){
                
                i.setStyle({
                    "margin":"0px"
                });
                i.absolutize();
                i.hide();
                
            });
            this.e_diapo.setStyle({"height":"600px"})

            //set playlist
            this.pos_ultra_left = 0;
            this.pos_ultra_right = 0;
            this.pos_left = 0;this.pos_right = 0;this.pos_center = 0;
            this.set_positions();
            this.cursor = 0;
            
            //set the images
            this.fake_ultra_left = null;
            this.fake_ultra_right = null;
            this.init_images();
            //this.set_arrows();
            this.margin_left = null;
            this.margin_right = null;
            this.build_margins();

            //binding navigation
            this.bind_navigation();
            

            




            
            
        }


        ,build_margins:function(){
            var margin_w = this.e_diapo.getWidth()/5;

            var right = document.createElement("div");
            right.absolutize();
            
            right.setStyle({
                "display":"block",
                "height":"430px",
                "width":margin_w+"px",
                "zIndex":"1000",
                "left":(this.e_diapo.getWidth() - margin_w + 30)+"px"

                
                

                
                
            });
            right.setOpacity(0.2);

            this.e_diapo.insert(right);


            var left = document.createElement("div");
            left.absolutize();

            left.setStyle({
                "display":"block",
                "height":"430px",
                "width":margin_w+"px",
                "zIndex":"1001",
                "left":"0px"
                
            });
            left.setOpacity(0.2);
            this.e_diapo.insert(left);



            this.margin_left = left;
            this.margin_right = right;


        }



        ,get_left_img_index:function(){
            if(this.cursor == 0)
                return this.images.length - 1;
            else
                return this.cursor -1;
        }
        ,get_center_img_index:function(){
            return this.cursor;
        }
        ,get_right_img_index:function(){
            if(this.cursor == this.images.length -1)
                return 0;
            else
                return this.cursor + 1;
        }

        ,get_left_img:function(){
            if(this.cursor == 0)
                return this.images[this.images.length - 1];
            else
                return this.images[(this.cursor -1)];
        }
        ,get_center_img:function(){
            return this.images[this.cursor];
        }
        ,get_right_img:function(){
            if(this.cursor == this.images.length -1)
                return this.images[0];
            else
                return this.images[(this.cursor + 1)];
        }



        /*
         *
         * SETTINGS
         */

        ,set_arrows:function(){
            var a_l = document.createElement("div");
            a_l.className="arrow_left";
            a_l.setStyle({
                "left":(this.pos_center)+"px"
            });
            this.e_diapo.insert(a_l);


            var a_r = document.createElement("div");
            a_r.className="arrow_right";
            a_r.setStyle({
                "left":(this.pos_center + this.get_center_img().getWidth()-60)+"px"
            });
            a_r.setOpacity(0.4)
            this.e_diapo.insert(a_r);
        }
        ,set_positions:function(){
            var im = this.images[0];
            
            this.pos_center =  (this.e_diapo.getWidth() - im.getWidth()) /2;
            this.pos_left = this.pos_center - im.getWidth();
            this.pos_right = this.pos_center + im.getWidth();

            this.pos_ultra_left = this.pos_left - im.getWidth();
            this.pos_ultra_right = this.pos_right + im.getWidth();

            //console.log("left:"+this.pos_left+" ; center:"+this.pos_center+" ; right:"+this.pos_right);
        }

        ,init_images:function(){


            var fake_ultra_left = document.createElement("div");
            fake_ultra_left.absolutize().setStyle({
                "height":"100px",
                "width":"100px",
                "backgroundColor":"blue",
                "left":"0x",
                "top":"0px"
            }).setOpacity(0.2);

            var fake_ultra_right = document.createElement("div");
            fake_ultra_right.absolutize().setStyle({
                "height":"100px",
                "width":"100px",
                "backgroundColor":"blue",
                "left":"120px",
                "top":"0px"
            }).setOpacity(0.2);

            this.e_diapo.insert(fake_ultra_left);
            this.e_diapo.insert(fake_ultra_right);

            this.fake_ultra_left=fake_ultra_left;
            this.fake_ultra_right=fake_ultra_right;

            
            this.get_left_img().show();
            this.get_left_img().setStyle({
                
                "left":this.pos_left+"px"
            });
            this.get_left_img().setOpacity(0.4);

            this.get_center_img().show();
            this.get_center_img().setStyle({

                "left":this.pos_center+"px"
            });

            this.get_right_img().show();
            this.get_right_img().setStyle({

                "left":this.pos_right+"px"
            });
            this.get_right_img().setOpacity(0.5);
            


            /*
            console.log(this.get_left_img());
            console.log(this.pos_left);
            console.log(this.pos_right);
            */


            
        }



        ,bind_navigation:function(){

            var next = this.next.bindAsEventListener(this);
            var previous = this.previous.bindAsEventListener(this);

            this.margin_right.observe("click", next);
            this.margin_left.observe("click", previous);



            var float_next = this.float_next.bindAsEventListener(this);
            var unfloat_next = this.unfloat_next.bindAsEventListener(this);
            this.margin_right.observe("mouseenter", float_next);
            this.margin_right.observe("mouseleave", unfloat_next);

                        //var float_previous = this.float_previous.bindAsEventListener(this);

        }


        ,float_next:function(){

            new Effect.Move(this.get_right_img(), {mode:"absolute", x:(this.pos_right - 150), duration:0.3,
                    queue:{position:"end", scope:"float_right", limit:2}
                });
            new Effect.Move(this.get_center_img(), {mode:"absolute", x:(this.pos_center - 150), duration:0.3,
                    queue:{position:"end", scope:"float_center", limit:2}
                });
            new Effect.Move(this.get_left_img(), {mode:"absolute", x:(this.pos_left - 150), duration:0.3,
                    queue:{position:"end", scope:"float_left",limit:2}
                });


            new Effect.Move(this.fake_ultra_right, {mode:"absolute", x:120, duration:0.3,
                    queue:{position:"end", scope:"float_ultra_right",limit:2}
                });


            

            


        }
        
        ,unfloat_next:function(){
            
            new Effect.Move(this.get_right_img(), {mode:"absolute",x:(this.pos_right), duration:0.3,
                    queue:{position:"end", scope:"float_right", limit:3}
                });
            new Effect.Move(this.get_center_img(), {mode:"absolute",x:(this.pos_center), duration:0.3,
                    queue:{position:"end", scope:"float_center", limit:3}
                });
            new Effect.Move(this.get_left_img(), {mode:"absolute",x:(this.pos_left), duration:0.3,
                    queue:{position:"end", scope:"float_left", limit:3}
                });

            new Effect.Move(this.fake_ultra_right, {mode:"absolute", x:120, duration:0.3,
                    queue:{position:"end", scope:"float_ultra_right",limit:2}
                });
        }


        ,next:function(){


            
            //hiding undisplayed img
            for(var i=0;i<this.images.length;i++){
                if(i != this.get_left_img_index() && i!=this.get_center_img_index() && i!=this.get_right_img_index())
                    this.images[i].hide();
            }
            

            //saving current img
            var img_l = this.get_left_img();
            var img_c = this.get_center_img();
            var img_r = this.get_right_img();

            //set the cursor
            if(this.cursor == this.images.length -1)
                this.cursor = 0;
            else
                this.cursor = this.cursor + 1;

            

            //show & init next right img
            
            var next_right = this.get_right_img();
            next_right.show();
            next_right.setStyle({
                "left":this.pos_ultra_right+"px"
            });



            //move pack
            new Effect.Move(img_l, {x:this.pos_ultra_left, mode:'absolute', duration:1,
                    queue:{position:"end", scope:"float_left"}
                });
            new Effect.Move(img_c, {x:this.pos_left, mode:'absolute', duration:1,
                    queue:{position:"end", scope:"float_center"}
                });
            new Effect.Move(img_r, {x:this.pos_center, mode:'absolute', duration:1,
                    queue:{position:"end", scope:"float_right"}
                });

            new Effect.Move(next_right, {x:this.pos_right, mode:'absolute', duration:1,
                    queue:{position:"end", scope:"float_ultra_right"}
                });

            //opac
            new Effect.Opacity(this.get_left_img(), {to:0.4, duration:0.5,
                    queue:{position:"end", scope:"float_left"}
                });
            new Effect.Opacity(this.get_center_img(), {to:1, duration:0.5,
                    queue:{position:"end", scope:"float_center"}
                });
            new Effect.Opacity(this.get_right_img(), {to:0.4, duration:0.5,
                    queue:{position:"end", scope:"float_right"}
                });

            
            this.margin_right.stopObserving();

            var bn = this.bind_navigation.bind(this);

            bn.delay(1.5);
            

            



            
            
            

            
            
        }

        ,previous:function(){


            //hiding undisplayed img
            for(var i=0;i<this.images.length;i++){
                if(i != this.get_left_img_index() && i!=this.get_center_img_index() && i!=this.get_right_img_index())
                    this.images[i].hide();
            }
            

            //saving current img
            var img_l = this.get_left_img();
            var img_c = this.get_center_img();
            var img_r = this.get_right_img();

            //set the cursor
            if(this.cursor == 0)
                this.cursor = this.images.length - 1;
            else
                this.cursor = this.cursor - 1;

            




            //show & init next right img
            var next_left = this.get_left_img();
            
            next_left.show();
            next_left.setStyle({
                "left":this.pos_ultra_left+"px"
            });
            



            //move pack
            new Effect.Move(next_left, {x:this.pos_left, mode:'absolute', duration:0.5});
            new Effect.Move(img_l, {x:this.pos_center, mode:'absolute', duration:0.5});
            new Effect.Move(img_c, {x:this.pos_right, mode:'absolute', duration:0.5});
            new Effect.Move(img_r, {x:this.pos_ultra_right, mode:'absolute', duration:0.5});

            new Effect.Opacity(this.get_left_img(), {to:0.4, duration:1, delay:0.5});
            new Effect.Opacity(this.get_center_img(), {to:1, duration:1, delay:0.5});
            new Effect.Opacity(this.get_right_img(), {to:0.4, duration:1, delay:0.5});
            


            //unbind former obervers
            /*
            img_r.stopObserving();
            img_l.stopObserving();

            var bn = this.bind_navigation.bind(this);

            bn.delay(0.8);
            */



        }


    });






    function init(){
        var diapo_elmt = $$(".diaporama");
        if(diapo_elmt.length>0){
            new Diaporama(diapo_elmt[0])
        }
    }

    document.observe("dom:loaded", init);


    function init_2(){
        var s = document.createElement("div");
        s.insert("loaded");
        s.absolutize();
        s.setStyle({"color":"white", "left":"0px", "top":"0px"});
        $$(".diaporama")[0].insert(s);
    }

    Event.observe(window, "load", init_2);






})();