var Node = '';

function slideshow(id){
	Ext.get('loadSlideshowHere').dom.innerHTML = '';
	/*
 * Ext JS Library 2.0
 * Copyright(c) 2006-2007, Ext JS, LLC.
 * licensing@extjs.com
 * 
 * http://extjs.com/license
 */


Ext.DataView.LabelEditor = function(cfg, field){
    Ext.DataView.LabelEditor.superclass.constructor.call(this,
        field || new Ext.form.TextField({
            allowBlank: false,
            growMin:90,
            growMax:240,
            grow:true,
            selectOnFocus:true
        }), cfg
    );
}

Ext.extend(Ext.DataView.LabelEditor, Ext.Editor, {
    alignment: "tl-tl",
    hideEl : false,
    cls: "x-small-editor",
    shim: false,
    completeOnEnter: true,
    cancelOnEsc: true,
    labelSelector: 'span.x-editable',

    init : function(view){
        this.view = view;
        view.on('render', this.initEditor, this);
        this.on('complete', this.onSave, this);
    },

    initEditor : function(){
        this.view.getEl().on('mousedown', this.onMouseDown, this, {delegate: this.labelSelector});
		//this.view.getEl().on('dblclick', this.onSupp, this);
		this.view.getEl().on('contextmenu', this.contextmenu, this);
 
 },



	contextmenu : function (e, value) { 
		e.stopEvent(); 
		Ext.Node = value.alt;
		Ext.NodeOrdre = Ext.Node.substr(Ext.Node.lastIndexOf('-')+1);
		Ext.Node = Ext.Node.substr(0,Ext.Node.lastIndexOf('-'));
		menuPhoto.showAt(e.getXY()); 
		},
    onMouseDown : function(e, target){
        if(!e.ctrlKey && !e.shiftKey){
            var item = this.view.findItemFromChild(target);
            e.stopEvent();
            var record = this.view.store.getAt(this.view.indexOf(item));
            this.startEdit(target, record.data[this.dataIndex]);
            this.activeRecord = record;
        }else{
            e.preventDefault();
        }
    },
	onSupp : function(ed, value){
			Ext.MessageBox.confirm("Confirmer la suppression", "Souhaitez-vous vraiment supprimer cette photo ?", 
			function(btn){
				if (btn == 'yes'){ // si on confirme la supression
					Ext.Ajax.request({
						method:'POST',
						params:{ supp:value.alt },
						//========================================================
						url:'extjs/get-slideshow.php?partenaire='+id,
						//========================================================
						disableCaching: true,
						callback: function(){ slideshow(id) }
						
					});
				}
			}
			
			);
		   },
    onSave : function(ed, value){
        this.activeRecord.set(this.dataIndex, value);
		Ext.Ajax.request({
			method:'POST',
			params:{ id:this.activeRecord.data[this.idEnre],ordre:value },
			//========================================================
			url:'extjs/get-slideshow.php?partenaire='+id,
			//========================================================
			disableCaching: true,
			callback: function(){ slideshow(id) }
			
		});
    }
});

    var xd = Ext.data;
		var store = new Ext.data.Store({
			autoLoad:true,
			proxy : new Ext.data.HttpProxy({
				//========================================================						   
				url:'extjs/get-slideshow.php?partenaire='+id
				//========================================================
			}),
			reader: new Ext.data.JsonReader({
				root: 'images',
				id: 'threadid',
				//========================================================
				fields: ['id', 'image', 'ordre']
				//========================================================
			})
		});


    var tpl = new Ext.XTemplate(
		'<tpl for=".">',
            '<span class="thumb-wrap" id="{id}-{ordre}">',
		    '<span class="thumb"><img src="reducImage.php?w=100&h=100&img=documents/slideshow/{image}" alt="{id}-{ordre}" ></span>',
		    ' </span>',
        '</tpl>'
	);

    var panel = new Ext.Panel({
        id:'images-view',
        frame:true,
        width:468,
        autoHeight:true,
        collapsible:true,
        layout:'fit',
        title:'Voici les photos présentes dans le diaporama :',

        items: new Ext.DataView({
            store: store,
            tpl: tpl,
            autoHeight:true,
            multiSelect: true,
            overClass:'x-view-over',
            itemSelector:'div.thumb-wrap',
            emptyText: 'Aucune image pour le moment',

            plugins: [
                new Ext.DataView.LabelEditor({dataIndex: 'ordre', idEnre:'id'})
            ]
        }),
		tbar:[
			{text:'Placer une image',tooltip:'Placer une image en ligne',handler:function(){ loadUpload(id) } }
			,{text:'Rafraichir',tooltip:'Recharger la liste des images',handler:function(){ slideshow(id) } }
			,{text:'Pour supprimer, légender ou changer l\'ordre des photos...',tooltip:'Pour supprimer ou changer l\'ordre des photos, cliquez sur la photo avec le bouton droit, et choisissez l\'option adéquate' }
	
			
		]
    });
    panel.render('loadSlideshowHere');
	
	function loadUpload(id){
		dialog = new Ext.ux.UploadDialog.Dialog({
        url: 'extjs/upload.php?id='+id,
        reset_on_hide: false,
        allow_close_on_upload: true,
        upload_autostart: false
      });
		dialog.show();	
	}
	
	
	
	var menuPhoto = new Ext.menu.Menu({
	items: [{
		text: 'Modifier ordre',
		handler: function(al, el){   
		Ext.MessageBox.prompt("Changer l'ordre", "D&eacute;finissez votre nouvel ordre (ancienne valeur : "+ Ext.NodeOrdre+")",  
			function(btn, value){
				if (btn == 'ok'){ // si on confirme la supression
					Ext.Ajax.request({
						method:'POST',
						params:{ id:Ext.Node, ordre:value },
						//========================================================
						url:'extjs/get-slideshow.php?partenaire='+id,
						//========================================================
						disableCaching: true,
						callback: function(){ slideshow(id) }
						
					});
				}
			}
			
			)
		}}, '-',{
		text: 'Définir la légende',
		handler: function(al, el){   
		Ext.MessageBox.prompt("Définir la légende", "D&eacute;finissez votre légende",  
			function(btn, value){
				if (btn == 'ok'){ // si on valide 
					Ext.Ajax.request({
						method:'POST',
						params:{ id:Ext.Node, legende:value },
						//========================================================
						url:'extjs/get-slideshow.php?partenaire='+id,
						//========================================================
						disableCaching: true,
						callback: function(){ slideshow(id) }
						
					});
				}
			}
			
			)
		}}, '-',{
		text: 'Supprimer',
		handler: function(al, el){  
			Ext.MessageBox.confirm("Confirmer la suppression", "Souhaitez-vous vraiment supprimer cette photo ?", 
			function(btn){
				if (btn == 'yes'){ // si on confirme la supression
					Ext.Ajax.request({
						method:'POST',
						params:{ supp:Ext.Node },
						//========================================================
						url:'extjs/get-slideshow.php?partenaire='+id,
						//========================================================
						disableCaching: true,
						callback: function(){ slideshow(id) }
						
					});
				}
			}
			
			); }
	}]
});	

}