Ext.namespace('MSDImages');

MSDImages.TagPanel = Ext.extend(Ext.Panel, {

	cls: 'tagPanel',

	onCollapse : function(doAnim, animArg){
		if(doAnim){
			this.getTheRest().slideOut(this.slideAnchor,
				Ext.apply(this.createEffect(animArg||true, this.afterCollapse, this), this.collapseDefaults));
		}else{
			this.getTheRest().hide();
			this.afterCollapse();
		}
	},
		
	onExpand : function(doAnim, animArg){
		if(doAnim){
			this.getTheRest().slideIn(this.slideAnchor,
				Ext.apply(this.createEffect(animArg||true, this.afterExpand, this), this.expandDefaults));
		}else{
			this.getTheRest().show();
      this.afterExpand();
    }
  },
		
	getTheRest : function() {
		if (!this.theRest) { 
			this.theRest = Ext.select('ul.therest', true, this.contentEl).setVisibilityMode(Ext.Element.DISPLAY); 
		}
		return this.theRest;
	}

});

MSDImages.SearchPageApp = function() {

    //private space
    var resultsView, resultStore, header, footer, navigation, viewport, images, userPanel;
    var keywordPanel, specialityPanel, modalityPanel, clinicalPanel;

    function HaveToggle(el) {
        return Ext.query('#' + el + ' li').length > 5;
    }

    function Hasitems(el) {
        return Ext.query('#' + el + ' li').length > 0;
    }

    function MakeLayoutItems() {
        var tagsArray = new Array();

        //Reset button
        resetSearch = new Ext.Button({
            text: 'Reset search',
            cls: 'resetButton',
            handler: function() {
                window.location = "/search/index";
            }

        });
        tagsArray.push(resetSearch);


        if (Hasitems('keywordPanel')) {
            keywordPanel = new Ext.Panel({
                contentEl: 'keywordPanel',
                title: 'Diseases',
                border: false,
                //collapsible: HaveToggle('keywordPanel'),
                collapsible: true,
                collapsed: false
            });
            tagsArray.push(keywordPanel);
        }

        if (Hasitems('organsPanel')) {
            clinicalPanel = new Ext.Panel({
                contentEl: 'organsPanel',
                title: 'Organ Systems',
                border: false,
                //collapsible: HaveToggle('organsPanel'),
                collapsible: true,
                collapsed: false
            });
            tagsArray.push(clinicalPanel);
        }

        if (Hasitems('imageTypePanel')) {
            modalityPanel = new Ext.Panel({
                contentEl: 'imageTypePanel',
                title: 'Image Type',
                border: false,
                //collapsible: HaveToggle('imageTypePanel'),
                //collapsed: HaveToggle('imageTypePanel')
                collapsible: true,
                collapsed: false
            });
            tagsArray.push(modalityPanel);
        }


        //Make header
        header = new Ext.BoxComponent({
            region: 'north',
            header: false,
            margins: '0 0 0 0',
            border: false,
            el: 'header'
        });

        //Make footer
        footer = new Ext.BoxComponent({
            region: 'south',
            header: false,
            margins: '0 0 0 0',
            border: false,
            el: 'footer'

        });

        //Tags
        navigation = new Ext.Panel({
            id: 'navigation',
            region: 'west',
            title: 'Refine my search',
            split: true,
            collapsible: true,
            collapsed: false,
            width: 245,
            maxSize: 245,
            items: tagsArray,
            //tbar: buttonArray,
            autoScroll: true
        });

        images = new Ext.Panel({
            id: 'images',
            title: 'Results',
            region: 'center',
            margins: '0 0 0 0',
            autoScroll: true,
            items: resultsView
        });

        userPanel = new MSDImages.UserPanel({ collapsible: true, minSize: 200, maxSize: 350 });

    }

    function MakeResultsStore() {
        resultStore = new Ext.data.Store({
            data: Results,
            reader: new Ext.data.JsonReader(
					{ id: 'id' },
					Ext.data.Record.create([{ name: 'id' }, { name: 'text' }, { name: 'image' }, { name: 'isNew' }, { name: 'rating' }, { name: 'numberOfVotes'}])
				)
        });
    }

    function MakeResultsView() {
        resultsView = new Ext.DataView({
            id: 'results-container',
            margins: '0 0 0 0',
            autoScroll: true,
            tpl: Ext.XTemplate.from('thumbTpl'),
            itemSelector: 'div.thumb',
            store: resultStore,
            listeners: {
                'afterrender': function() {
                    if (Results.length > 0) {

                        if (MSDImages.Config.loggedIn) {
                            initImagesDragZone(this);
                        }
                    }
                    this.el.parent().insertFirst(Ext.get('result-info'));
                }
            }
        });
    }

    function initImagesDragZone(v) {
        new Ext.dd.DragZone(v.getEl().parent(), {
            ddGroup: 'ImageSetsDD',
            getDragData: function(e) {
                var sourceEl = e.getTarget(v.itemSelector, 5);
                var imgEl = e.getTarget('img.thumb-img', 10)
                if (imgEl) {
                    var record = v.getRecord(sourceEl);
                    if (record && record.data) {
                        var d = imgEl.cloneNode(true);
                        d.id = Ext.id();
                        return {
                            sourceEl: sourceEl,
                            repairXY: Ext.fly(sourceEl).getXY(),
                            ddel: d,
                            resultData: record.data
                        };
                    }
                    else {
                        return false;
                    }
                }
            },
            getTreeNode: function(data, targetNode) {
                var result = data.resultData;
                var tn = new Ext.tree.TreeNode({
                    id: result.id,
                    text: result.text,
                    icon: result.image,
                    data: result,
                    cls: 'image-node',
                    leaf: true,
                    allowDelete: true,
                    allowDrag: true
                });
                return tn;
            },
            getRepairXY: function() {
                return this.dragData.repairXY;
            }
        });
    }

    function MakeViewPort() {
        viewport = new Ext.Viewport({
            id: 'viewport',
            layout: 'border',
            frame: false,
            items: [navigation, images, userPanel, header, footer],
            listeners: {
                render: function() {
                    (function() {
                        new MSDImages.Slider();
                        if (MSDImages.Config.loggedIn) {
                            Ext.select('div.thumb', true, 'results-container').addClassOnOver('show-add-btn');
                        }
                    }).defer(1000);
                }
            }
        });
    }

    function AddSearchButton() {
        new Ext.Button({
            applyTo: 'btnFreeText',
            id: 'extFreeTextSearch',
            text: 'New Search',
            handler: function() {
                document.forms['freeTextForm'].submit();
            }
        });
    }

    //public space
    return {
        init: function() {

            Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
			Ext.QuickTips.init();

            //Make main results window
            MakeResultsStore();
            MakeResultsView();
            MakeLayoutItems();
            MakeViewPort();
            AddSearchButton();
        },

        getResultStore: function() {
            return resultStore;
        },

        toggleCaptions: function(a) {
            if (a.innerHTML == "Show captions") {
                a.innerHTML = "Hide captions";
                Ext.select('.thumbbot', false, 'results-container').removeClass('x-hide-display');
            }
            else {
                a.innerHTML = "Show captions";
                Ext.select('.thumbbot', false, 'results-container').addClass('x-hide-display');
            }
            a.blur();
            return false;
        }
    }

} ();