Ext.BLANK_IMAGE_URL = '/javascripts/ext/resources/images/default/s.gif';
// Icon Combo Box
Ext.form.IconCombo = function(config) {
 
    // call parent constructor
    Ext.form.IconCombo.superclass.constructor.call(this, config);
    
    this.tpl = config.tpl || '<tpl for="."><div class="x-combo-list-item x-icon-combo-item">' 
        + '<img src="{'+this.iconImageField+'}" width="40" height="40" />{' + this.displayField + '}</div></tpl>';
 
    this.on({
        render:{scope:this, fn:function() {
            var wrap = this.el.up('div.x-form-field-wrap');
            this.wrap.applyStyles({position:'relative'});
            this.el.addClass('x-icon-combo-input');
            this.flag = Ext.DomHelper.append(wrap, {
                tag: 'div', style:'position:absolute'
            });
        }}
    });
}
 
// extend Icon  Combo Box
Ext.extend(Ext.form.IconCombo, Ext.form.ComboBox, { 
    editable : false,
    setIconCls: function() {
        var rec = this.store.query(this.valueField, this.getValue()).itemAt(0);
        if(rec) {
            this.flag.className = 'x-icon-combo-icon ' + rec.get(this.iconClsField);
        }
    },
    setValue: function(value) {
        Ext.form.IconCombo.superclass.setValue.call(this, value);
        this.setIconCls();
    }
});


// lable editor for data view
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});
    },

    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();
        }
    },

    onSave : function(ed, value){
        this.activeRecord.set(this.dataIndex, value);
    }
});


Ext.DataView.DragSelector = function(cfg){
    cfg = cfg || {};
    var view, regions, proxy, tracker;
    var rs, bodyRegion, dragRegion = new Ext.lib.Region(0,0,0,0);
    var dragSafe = cfg.dragSafe === true;

    this.init = function(dataView){
        view = dataView;
        view.on('render', onRender);
    };

    function fillRegions(){
        rs = [];
        view.all.each(function(el){
            rs[rs.length] = el.getRegion();
        });
        bodyRegion = view.el.getRegion();
    }

    function cancelClick(){
        return false;
    }

    function onBeforeStart(e){
        return !dragSafe || e.target == view.el.dom;
    }

    function onStart(e){
        view.on('containerclick', cancelClick, view, {single:true});
        if(!proxy){
            proxy = view.el.createChild({cls:'x-view-selector'});
        }else{
            proxy.setDisplayed('block');
        }
        fillRegions();
        view.clearSelections();
    }

    function onDrag(e){
        var startXY = tracker.startXY;
        var xy = tracker.getXY();

        var x = Math.min(startXY[0], xy[0]);
        var y = Math.min(startXY[1], xy[1]);
        var w = Math.abs(startXY[0] - xy[0]);
        var h = Math.abs(startXY[1] - xy[1]);

        dragRegion.left = x;
        dragRegion.top = y;
        dragRegion.right = x+w;
        dragRegion.bottom = y+h;

        dragRegion.constrainTo(bodyRegion);
        proxy.setRegion(dragRegion);

        for(var i = 0, len = rs.length; i < len; i++){
            var r = rs[i], sel = dragRegion.intersect(r);
            if(sel && !r.selected){
                r.selected = true;
                view.select(i, true);
            }else if(!sel && r.selected){
                r.selected = false;
                view.deselect(i);
            }
        }
    }

    function onEnd(e){
        if(proxy){
            proxy.setDisplayed(false);
            proxy = null;
        }
    }

    function onRender(view){
        tracker = new Ext.dd.DragTracker({
            onBeforeStart: onBeforeStart,
            onStart: onStart,
            onDrag: onDrag,
            onEnd: onEnd
        });
        tracker.initEl(view.el);
    }
};

ImageDragZone = function(view, config){
    this.view = view;
    ImageDragZone.superclass.constructor.call(this, view.getEl(), config);
};
Ext.extend(ImageDragZone, Ext.dd.DragZone, {
    getDragData : function(e){
        var target = e.getTarget('.thumb-wrap');
        if(target){
            var view = this.view;
            if(!view.isSelected(target)){
                view.onClick(e);
            }
            var selNodes = view.getSelectedNodes();
            var selRecords = view.getSelectedRecords();
            var dragData = {
                nodes: selRecords
            };
            if(selNodes.length == 1){
                dragData.ddel = target.firstChild.firstChild; // the img element
                dragData.single = true;
            }else{
                var div = document.createElement('div'); // create the multi element drag "ghost"
                div.className = 'multi-proxy';
                for(var i = 0, len = selNodes.length; i < len; i++){
                    div.appendChild(selNodes[i].firstChild.firstChild.cloneNode(true));
                    if((i+1) % 3 == 0){
                        div.appendChild(document.createElement('br'));
                    }
                }
                dragData.ddel = div;
                dragData.multi = true;
            }
            return dragData;
        }
        return false;
    },
    /*endDrag: function() {
        //var dragEl = Ext.get(this.getDragEl());
        // el = Ext.get(this.getEl());
        var nodeData = this.view.getRecords(this.dragData.nodes);
        for(var i = 0, len = nodeData.length; i < len; i++) {
        }
        if(this.lastTarget) {
            Ext.get(this.lastTarget).appendChild(el);
            el.applyStyles({position:'', width:''});
        }
        else {
            el.applyStyles({position:'absolute'});
            el.setXY(dragEl.getXY());
            el.setWidth(dragEl.getWidth());
        }
        //Ext.get('dd1-ct').removeClass('dd-over');
        //Ext.get('dd2-ct').removeClass('dd-over');
    }*/
    // this method is called by the TreeDropZone after a node drop
    // to get the new tree node (there are also other way, but this is easiest)
    /*getTreeNode : function(){
        var treeNodes = [];
        var nodeData = this.view.getRecords(this.dragData.nodes);
        for(var i = 0, len = nodeData.length; i < len; i++){
            var data = nodeData[i].data;
            treeNodes.push(new Ext.tree.TreeNode({
                text: data.name,
                icon: '../view/'+data.url,
                data: data,
                leaf:true,
                cls: 'image-node'
            }));
        }
        return treeNodes;
    },*/
    
    // the default action is to "highlight" after a bad drop
    // but since an image can't be highlighted, let's frame it 
    /*afterRepair:function(){
        for(var i = 0, len = this.dragData.nodes.length; i < len; i++){
            Ext.fly(this.dragData.nodes[i]).frame('#8db2e3', 1);
        }
        this.dragging = false;    
    },*/
    
    // override the default repairXY with one offset for the margins and padding
    getRepairXY : function(e){
        if(!this.dragData.multi){
            var xy = Ext.Element.fly(this.dragData.ddel).getXY();
            xy[0]+=3;xy[1]+=3;
            return xy;
        }
        return false;
    }
});

Ext.UploadWindow = Ext.extend(Ext.Window, {
    title: 'Upload Files',
    width: 300,
    resizable: false,
    layout: 'fit',
    modal: true,
    hidden: true,
    constrainHeader: true,
    closeAction: 'cancelUpload',
    upload: function(parentNode, store) {
        this.parentNode = parentNode;
        this.store = store;
        //parentNode.expand();
        this.swfu.setPostParams({uID: parentNode.id});
        this.swfu.selectFiles();
    },
    bytesTotal: 0,
    bytesComplete: 0,
    queuedFiles: 0,
    cancelUpload: function() {
        this.swfu.cancelUpload();
        this.bytesTotal = 0;
        this.bytesComplete = 0;
        this.hide();
        this.store.reload();
    },
    initComponent: function() {
        Ext.apply(this, { 
            buttons: [{
                text: 'Cancel',
                handler: function(){ this.cancelUpload(); },
                scope: this
            }],
            keys: {
                key: 27, // Esc key
                handler: function(){ this.cancelUpload(); },
                scope: this
            }
        });
        
        this.progress = new Ext.ProgressBar({
            text:'0% completed...'
        });
        
        this.swfu = new Ext.ux.FileUpload({
                uploadUrl: '/file_manager/upload',
                flashUrl: '/flash/swfupload_f9.swf',
                debugEnabled: false
        });
        this.swfu.on('afterfiledialogcompleted', function(swfu, file) {
            if (this.queuedFiles <= 0)  {
                this.cancelUpload();    
            } else {
                this.show();
                this.progress.updateProgress(0, '0% completed...');
            }
        }, this);
        this.swfu.on('filequeued', function(swfu, file) {
            this.bytesTotal += file.size;
            this.queuedFiles++;
            file.on('uploadprogress', function(file) {
                var percent = (this.bytesComplete + file.bytesComplete) / this.bytesTotal;
                this.progress.updateProgress(percent, Math.round(100*percent)+'% completed...')
            }, this)
            file.on('uploadcomplete', function(file) {
                this.bytesComplete += file.size;
                if (--this.queuedFiles == 0) {
                    this.progress.updateProgress(1, '100% completed...');
                    this.cancelUpload();
                }
            }, this)
            file.on('uploadsuccess', function(data) {
                try {
                    var o = Ext.decode(data);
                    if (o.success === true) {
                        
                        /*this.parentNode.appendChild(new Ext.tree.AsyncTreeNode({
                            text:o.name, 
                            id:o.id,
                            
                            iconCls:'folder'}));*/
                    }
                } catch(ex) {
                    
                } 
            }, this)
        }, this);
        
        this.items = this.progress;
        
        Ext.UploadWindow.superclass.initComponent.apply(this, arguments);
    }
});


Ext.onReady(function(){
    
    
    var chooser;
    
    function choose(el){
        if(!chooser){
            chooser = new ImageChooser({
                url:'/file_manager/images',
                width:600,
                height:500
            });
        }
        if (chooser.win && !chooser.win.hidden) {
            chooser.win.hide();
        } else {
            chooser.show(el, function() {});
        }
        //chooser.win.getEl().setXY([100, 100]);
    }
    
    if ($('linkmanager')) {
      Ext.get('linkmanager').on('click', function(ev, target) {
          choose(ev.getTarget());
          ev.stopEvent();
      });
    }
    /*
    var p = new Ext.Panel({
        title: 'My Panel',
        collapsible:true,
        renderTo: 'man',
        height:400,
        animCollapse: false,
        collapsed: true,
        tbar:[{
        	text: 'Apply Template',
            handler: function(){}
    	}]
    });
    
    p.on("beforeexpand", function(panel, animate) {
    	Ext.get("background").dom.style.paddingTop = '400px';
    });
    
    p.on("beforecollapse", function(panel, animate) {
    	Ext.get("background").dom.style.paddingTop = '40px';
    });
   
    function onScroll(ev, target) {
        if (chooser) {
            //alert(chooser);
            var bodyScroll = Ext.getBody().getScroll();
            //var xy = chooser.win.getEl().getAlignToXY(Ext.getBody(), "tl"); 
            var box = chooser.win.getBox();
            //xy[0] += bodyScroll.left;
            //xy[1] += bodyScroll.top;
            //chooser.win.getEl().setXY([box.x + bodyScroll.left, box.y + bodyScroll.top]);
            var box1 = chooser.win.getBox();
            var box2 = chooser.win.getBox();
        }
    }
    
    Ext.EventManager.on(window, 'scroll', onScroll);
    
    var form = new Ext.form.FormPanel({
        baseCls: 'x-plain',
        labelWidth: 55,
        url:'save-form.php',
        defaultType: 'textfield',

        items: [{
            fieldLabel: 'Send To',
            name: 'to',
            anchor:'100%'  // anchor width by percentage
        },{
            fieldLabel: 'Subject',
            name: 'subject',
            anchor: '100%'  // anchor width by percentage
        }, {
            xtype: 'textarea',
            hideLabel: true,
            name: 'msg',
            anchor: '100% -53'  // anchor width by percentage and height by raw adjustment
        }]
    });*/
    

});