/*
   PROJECT:                 TRI-M HOMEPAGE
   
   VERSIE:                  3.5
   ONDERDEEL:               TriFolio Module
   PROGRAMMEUR/DESIGNER:    MJJ Smeets
   GRAPHICS:                M vd Einde
   TECHNOLOGY:              PHP / XHTML with a linked CSS stylesheet.
                            JavaScript and the Ext.JS JavaScript Framework,
							are used for animation,Ajax effects and other complex functionality.							

*/

var win  = null; 
var viewframe = null;
var sizableimage = null;
var foliotype = 'web';
var nUrl = '';
var tt = '';
var uu = '';
var chkstatus = false;

var schalen = ['5%','10%','20%','30%','40%','50%','60%','70%','80%','90%','100%','110%','120%','130%','140%','150%','200%'];

var selectedScale = '90%';

function TriFolio(folioID){

    if (folioID == "beeldhouwen" || folioID == "rgp" || folioID == "holthuizen" || folioID == "collection" || folioID == "theater") 
	{
		foliotype = 'web';
	} 
	else if (folioID == "trimanager" || folioID == "tricrypt_pc") 
	{
		foliotype = 'app';
	} 
	else if (folioID == "klanten" || folioID == "visdb" || folioID == "facturen" || folioID == "boekhouding" || folioID == "offertes") 
	{
		foliotype = 'tri';
	}

    var scalecombo = new Ext.form.ComboBox({
        id:'scalecombo',
		name:'scalecombo',
        store: schalen,
        typeAhead: true,
        triggerAction: 'all',
        emptyText:'90%',
		width:90,
        selectOnFocus:true,
        listeners: {
            select: function(){
                selectedScale = Ext.getCmp('scalecombo').getValue();
				Ext.get('details').update(getScaledImage(uu,tt));
 	            sizableimage = new Ext.Resizable('viewpanel', {
                    wrap:true,
                    pinned:true,
                    minWidth:50,
                    minHeight: 50,
                    preserveRatio: chkstatus,
                    dynamic:true,
                    handles: 'all',
                    draggable:true
                });
				sizableimage.resizeTo(selectedScale,selectedScale);
            }
        } 
    });
	var ratiobox = new Ext.form.Checkbox({
        id:'ratio_box',
		boxLabel:' KeepRatio ',
		handler: function(){
			chkstatus = this.checked;
			sizableimage.preserveRatio = chkstatus;
		}
    });
		
    //creating data store
    var store = new Ext.data.JsonStore({
        url: foliotype + 'data.php',
        root: 'images',
        fields: [
            'name', 'url', 'img', 'full'
        ]
    });
    store.load();

    //template for items in dataview
    var tpl = new Ext.XTemplate(
        '<tpl for=".">',
            '<div class="thumb-wrap" id="{name}">',
            '<div class="thumb"><img src="{img}" ext:qtip="{url}" title="{url}" name="{full}" style="width:115px;height:60px;cursor:pointer;"></div>',
            '<span class="x-editable">{name}</span></div>',
        '</tpl>',
        '<div class="x-clear"></div>'
    );
	
	var view = new Ext.DataView({
        store: store,
        tpl: tpl,
        autoHeight:true,
        multiSelect: true,
        overClass:'x-view-over',
        itemSelector:'div.thumb-wrap',
        emptyText: 'Geen afbeeldingen in Portfolio',
        listeners: {
            selectionchange: {
                fn: function(dv,nodes){
                    var selNode = this.getSelectedNodes()[0];
					nUrl = selNode.getElementsByTagName('img')[0].name;
					sUrl = selNode.getElementsByTagName('img')[0].title;
					Ext.get('details').update(getScaledImage(nUrl,"etc"));
 	                sizableimage = new Ext.Resizable('viewpanel', {
                        wrap:true,
                        pinned:true,
                        minWidth:50,
                        minHeight: 50,
                        preserveRatio: chkstatus,
                        dynamic:true,
                        handles: 'all',
                        draggable:true
                    });
					uu = nUrl; tt = "etc";
                    var sb = Ext.getCmp('tri-status');
                    sb.setStatus({
                        text: sUrl
                    });
					sb.items.itemAt(4).setText("Als afbeelding weergeven");
					sb.items.itemAt(6).el.innerHTML = "JPG";
            	}
            }
        }			
    });
	
	//create a window and add panels
    win = new Ext.Window({
		id: 'mainwindow',
        title: 'Tri - Folio versie 0.0.3.0 - Tri-M WebApplicatie',
        width: 500,
        height:300,
        minWidth: 300,
        minHeight: 200,
		minimizable: true,
		maximizable: true,
		expandOnShow: true,
        layout: 'border',
        plain:true,
        bodyStyle:'padding:5px;',
        buttonAlign:'center',
        items: [
            new Ext.Panel({
                id:'images-view',
                frame:true,
                width:150,
		        region:'west',
		        split:true,
                collapsible:true,
		        autoScroll:true,
                layout:'fit',
                title:'Navigatie',
                items: view
            }),
	        new Ext.Panel({
		        id          : 'details',
                title       : 'Details',
                region      : 'center',
                split       : true,
                width       : 300,
		        height      : 300,
                collapsible : false,
		        autoScroll  : true,
				layout      : 'fit',
                margins     : '3 0 3 3',
                cmargins    : '3 3 3 3'
            })
		],
        buttons: [{
            text: 'URL Openen',
            handler  : function(){
                var selNode = view.getSelectedNodes()[0];
                nUrl = selNode.getElementsByTagName('img')[0].title;
				sUrl = nUrl;
                Ext.get('details').update("<iframe id='viewpanel' name='viewpanel' src='" + nUrl + "' style='width:100%; height:100%' />");
				Ext.get('details').hide();
				Ext.get('details').fadeIn({
				    duration: '2'
                });
				var sb = Ext.getCmp('tri-status');
				sb.items.itemAt(4).setText("Als website weergeven");
				sb.items.itemAt(6).el.innerHTML = "HTML";
            }
        },{
            text: 'Over deze webapp...',
            handler  : function(){
				Ext.Msg.alert('Tri-Folio Melding', 'TriFolio versie 0.0.3.0 Ontwikkeld door MJJ Smeets<br />Interesse in een op maat gemaakte web applicatie als deze? Bezoek onze contact pagina.');
            }			
        },{
            text: 'Sluiten',
            handler  : function(){
				win.close();
            }			
        }],
        bbar: new Ext.Toolbar({
            id: 'tri-status',
            defaultText: 'Adres: ',
            text: 'http://wwww.beeldhouwenmethartenziel.nl/',
            items: [ratiobox,'-',scalecombo,'-',{
                text: 'Als afbeelding weergeven'
            }, '-', 'JPG']
        })
    });
	win.setPosition(350,185);
	win.setSize(630,365);
    
    win.show();
	win.maximize();
	
    Ext.get('details').update(getScaledImage(folioID,foliotype));
	
	sizableimage = new Ext.Resizable('viewpanel', {
        wrap:true,
        pinned:true,
        minWidth:50,
        minHeight: 50,
        preserveRatio: chkstatus,
        dynamic:true,
        handles: 'all',
        draggable:true
    });
	
}

function getScaledImage(folioNR,folioType){
	uu = folioNR; tt = folioType;
	var folioFile = 'images/' + folioNR + '.jpg';
	if (folioType == "app") {
		folioFile = 'images/scrshot_' + folioNR + '.jpg';
	} else if (folioType == "tri") {
		folioFile = 'images/screenshots/trimgr-' + folioNR + '.jpg';
	} else if (folioType == "etc") {
		folioFile = folioNR;
	}
	return "<img id='viewpanel' name='viewpanel' src='" + folioFile + "' style='width:100%; height:100%;' />";
}