/*****************************************

	Visionneuse Class
	-------------------

    Pour visualiser des images

	Require: Prototype Framework v1.6
	         La librairie RoundedFrames
	         
     mediaArray doit etre un tableau de tableaux. Les sous-tableaux sont des tableaux de 5 elements et sont de la forme suivante :
     [0 - chemin de l'image, 
      1 - le titre de la legende,
      2 - le chemin jusqu'a l'image version petite, 
      3 - la description de l'image, 
      4 - le copyright ou l'auteur de l'image]
	         
             
****************************************/
var Visionneuse = Class.create({

    initialize: function(mediaArray, divContainer, smallPicturePath, bigPicturePath){
		
		
		/*this.options = Object.extend({
			postFolderCreation : Prototype.emptyFunction
		}, arguments[3] || {});*/
		
		
		//mediaArray contient les codes des images
        this.mediaArray = mediaArray;
        this.arraySize = mediaArray.size();
        
        this.divContainer = divContainer;
        
        this.smallPath = smallPicturePath;
        this.bigPath = bigPicturePath

        this.index = 0;
        this.indicLabel = new Element('span');
        this.indicLabel.innerHTML = (this.index + 1) + "/" + this.arraySize;
        this.indicLabel.className = 'label';
        
        
        this.miniPic = new Element('img').setStyle({cursor: 'pointer'});
        this.miniPic.src = this.smallPath + "/" + this.mediaArray[0][2];
        this.miniPic.title = "Agrandir";
        this.miniPic.className = 'visImage';
		this.miniPic.onclick = this.bigUp.bindAsEventListener(this);
		this.miniPic.onload = this.resizeSmall.bindAsEventListener(this);
		
		
        this.description = new Element('div');
        this.description.className = 'description';
        this.description.innerHTML = mediaArray[0][1];

        this.next = new Element('a', {href: '#'});
        this.next.title = "photo suivante";
        this.next.onclick = this.nextPic.bindAsEventListener(this);
        this.next.className = 'right';
        
        this.prev = new Element('a', {href: '#'});
        this.prev.title = "photo précedente";
        this.prev.onclick = this.prevPic.bindAsEventListener(this);
        this.prev.className = 'left';
                
        
        this.seeBig = new Element('a', {href: '#'});
        this.seeBig.title = "Agrandir";
        this.seeBig.onclick = this.bigUp.bindAsEventListener(this);
        this.seeBig.className = 'enlarge';        
      
        
        // Big Visionneuse
        this.largePicWindow = new Element('div');
        this.largePicWindow.addClassName('divLargePic');
        
        this.bigNext = new Element('a', {href: '#'});
        this.bigNext.title = "photo suivante";
        this.bigNext.onclick = this.nextPic.bindAsEventListener(this);
        this.bigNext.className = 'right';
        
        this.bigPrev = new Element('a', {href: '#'});
        this.bigPrev.title = "photo précedente";
        this.bigPrev.onclick = this.prevPic.bindAsEventListener(this);
        this.bigPrev.className = 'left';
        
        this.indicBigLabel = new Element('span');
        this.indicBigLabel.innerHTML = (this.index + 1) + "/" + this.arraySize;
        this.indicBigLabel.className = 'label';
               
        this.bigDescription = new Element('div');
        this.bigDescription.innerHTML = mediaArray[0][1];
        this.bigDescription.className = 'description';

        this.bigText = new Element('div');
        this.bigText.innerHTML = mediaArray[0][3];
        this.bigText.className = 'text';
        
        this.bigAuthor = new Element('div');
        this.bigAuthor.innerHTML = mediaArray[0][4];
        this.bigAuthor.className = 'picCopyright';
        
        this.largePic = new Element('img');
        
        this.close = new Element('a',{href: '#'});
        this.close.title = "fermer";
        this.close.onclick = this.hideLargePic.bindAsEventListener(this);
        this.close.className = 'delete';
        
        this.menuBig = new Element('div');
        this.menuBig.addClassName('menuVis');
        this.menuBig.insert(
				this.bigPrev
            ).insert(
				this.indicBigLabel
			).insert(
				this.bigNext
            );
        
        this.largePicWindow.insert(
                this.close
            ).insert(
                this.largePic
            ).insert(
                this.menuBig
            ).insert(
                this.bigDescription
            ).insert(
				this.bigAuthor
			).insert(
                this.bigText
            );
        
        this.htmlRoundedlargePic = new RoundedFrame({
            content: this.largePicWindow,
            style: {
				position: 'absolute',
				top: '120px',
				left: '20%',
				right: '20%'
            }
        }).hide();
       
		$(document.body).insert(this.htmlRoundedlargePic.html());
        
                                                         
        this.htmlElement = new Element('div').setStyle({
            padding: '15px',
            width : '150px',
			height : '150px',
			textAlign:'center'
        });
        
        
        this.image = new Element('div');
        this.image.insert(
				this.miniPic
			);
        
        
        this.menu = new Element('div');
        this.menu.addClassName('menuVis');
        this.menu.insert(
				this.prev
            ).insert(
				this.indicLabel
			).insert(
				this.next
			);/*.insert(
                this.seeBig
            );*/
        this.htmlElement.insert(
                new Element('div').setStyle({position: 'relative'}).insert(this.image).insert(this.seeBig)
            ).insert(
                this.menu
            ).insert(    
                this.description
            );
            
        
        this.htmlRoundedElement = new RoundedFrame({
            content: this.htmlElement,
            style: {
				width : '200px',
				height : '200px',
				textAlign:'center'
            }
        });
        
        
        
        $(this.divContainer).update();
        $(this.divContainer).insert(this.htmlElement);
    },
    
    keyPressed: function(e){
		var key = e.keyCode
		
		if(key==37)
			this.prevPic();
		else if(key==39)
			this.nextPic();
		else if(key == 27)
			this.hideLargePic();	
    },
    
    html: function(){
		return this.htmlElement;
    },
    
    htmlRounded: function(){
		return this.htmlRoundedElement.html();
    },
    
    refreshInfos: function()
    {
		//Obligé de recreer l'image pour un bug de IE (meme IE7) ....
		this.miniPic = new Element('img').setStyle({cursor: 'pointer'});
        this.miniPic.src = this.smallPath + "/" + this.mediaArray[this.index][2];
        this.miniPic.title = "Agrandir";
        this.miniPic.className = 'visImage';
		this.miniPic.onclick = this.bigUp.bindAsEventListener(this);

		
		this.miniPic.src = this.smallPath + "/" + this.mediaArray[this.index][2];
		this.miniPic.onload = this.resizeSmall.bindAsEventListener(this);
        this.image.update(this.miniPic);
        		

        this.largePic.src = this.bigPath + "/" + this.mediaArray[this.index][0];

        this.description.innerHTML = this.mediaArray[this.index][1];
        this.bigDescription.innerHTML = this.mediaArray[this.index][1];
        

        this.bigText.innerHTML = this.mediaArray[this.index][3];
        this.bigAuthor.innerHTML = this.mediaArray[this.index][4];
        
        this.indicLabel.innerHTML = (this.index + 1) + "/" + this.arraySize;
        this.indicBigLabel.innerHTML = (this.index + 1) + "/" + this.arraySize;
    },
    
    nextPic: function()
    {
        if(this.index + 1 < this.arraySize)
        {
            this.index = this.index + 1;
        }else
        {
			this.index = 0;
        }
        this.refreshInfos();
        return false;
    },
    
    
    prevPic: function()
    {
        if(this.index - 1 >= 0)
        {
            this.index = this.index - 1;
        }else
        {
			this.index = this.arraySize - 1;
        }
        this.refreshInfos();
        return false;
    },
    
    bigUp: function()
    {
        this.largePic.src = this.bigPath + "/" + this.mediaArray[this.index][0];
        this.displayLargePic();
        document.onkeydown = this.keyPressed.bindAsEventListener(this)
        return false;
    },
    
    resizeSmall: function()
    {
		var theWidth = this.miniPic.width;
		var theHeight = this.miniPic.height;
        this.miniPic.width = 50;
        this.miniPic.height = theHeight/( theWidth / 50);
        return false;
    },
    
    
    displayLargePic: function()
    {
        this.htmlRoundedlargePic.show();
    },
    
    hideLargePic: function()
    {
         this.htmlRoundedlargePic.hide();
         document.onkeydown = Prototype.emptyFunction;
         return false;
    },
    
    toString: function(){
        return "[Visionneuse object]";
    }
})