var switchLenses = function(){
    lens_switch = Ext.get('cnx_switch_inner').dom;
    selval = lens_switch.value;
    all = lens_switch.getElementsByTagName('option');  //childNodes;
    len = all.length;
    for (var x = 0; x <= len; x++) {
        elt = all[x];
        if (elt) {
            eltval = elt.value;
            frm = Ext.get(eltval).dom;
            if (eltval == selval) {
                frm.style.display = 'block';
            } else {
                frm.style.display = 'none';
            }
        }
    }
}

var afterLoad = function(){
    // unhide lens select button
    document.getElementById('cnx_lens_switch').style.display = 'block';

    switchLenses();

    lens_switch = Ext.get('cnx_switch_inner');
    lens_switch.on('change', switchLenses);

    LensAdd.resize();
}


// create the lens addition popup application (single instance)
var LensAdd = function(){
    // everything in this space is private and only accessible in the HelloWorld block

    // define some private variables
    var dialog, showBtn, dialogUpdater;
    var contentId, version;

    var dialogheight = 300;
    var dialogwidth = 500;

    // return a public interface
    return {
        init : function(){
             showBtn = Ext.get('cnx_lens_popup_link');
             // attach to click event
             if (showBtn) {
                showBtn.on('click', this.showDialog, this, {stopEvent : true});
             }

/*             submitBtn = Ext.get('cnx_lens_simple_submit');
             submitBtn.on('click', this.submitForm, this, {stopEvent : true});*/
        },

        showDialog : function(){
            if(!contentId){
                contentId = document.getElementById('cnx_lens_contentId').value;
            }
            if(!version){
                version = document.getElementById('cnx_lens_version').value;
            }

            if(!dialog){ // lazy initialize the dialog and only create it once
                dialog = new Ext.BasicDialog("cnx_lens_popup", {
                        autoTabs:false,
                        closable:true,
                        collapsible:false,
                        width:dialogwidth,
                        height:dialogheight,
                        shadow:true,
                        minWidth:300,
                        minHeight:250,
                        proxyDrag: true
                });
                dialog.addKeyListener(27, dialog.hide, dialog);
                //dialog.addButton('Add this Content', dialog.hide, dialog).disable();
                //dialog.addButton('Close', dialog.hide, dialog);
            }

            if(!dialogUpdater){
                dialogUpdater = Ext.get('cnx_lens_inner').getUpdateManager();
                dialogUpdater.update({url:"lens_add_inner",
                                      callback:afterLoad,
                                      params: {contentId: contentId, version: version}
                                     });
            }

            dialog.show(showBtn.dom);
        },

//         submitForm : function(){
//             dialogUpdater = Ext.get('cnx_lens_results').getUpdateManager();
//             dialogUpdater.formUpdate('cnx_lensform');
//         },

         resize : function(){
             seenBottom = Ext.get('cnx_lens_popup').getBottom();
             buttonBottom = Ext.get('cnx_lens_add_button').getBottom();
             difference = buttonBottom - seenBottom;
             if (difference) {
                dialog.resizeTo(dialogwidth, dialogheight+difference+15);
             }
         },

        // not used yet...
        makeForm : function(){
            if(!lensform){ // lazy initialize the form and only create it once
                lensform = new Ext.form.Form({
                                  labelWidth: 75,
                                  url:'addLens'
                           });
                lensform.applyToFields('cnx_lensform');
            }
        }
    };
}();

// using onDocumentReady instead of window.onload initializes the application
// when the DOM is ready, without waiting for images and other resources to load
Ext.onReady(LensAdd.init, LensAdd, true);

Ext.onReady(function() {
    var morden = new Ext.Shadow({mode:'sides', offset:4});
    morden.hide();

    var animShow = false; //{duration: 0.35};
    var animHide = false; //true;

    //var layer;

    var hoverOn = function(e) {
        //a = Ext.get(e.target);
        li = Ext.get(e.target).up('.lensinfowrap');
        block = li.child('.lensinfo');
        block.alignTo(li, 'bl-tr?');
        block.show(animShow);
        morden.show(block);
        //layer = new Ext.Layer({cls:"x-tip", shadow:"drop", shim: true, constrain:true, shadowOffset:3}, block.dom);
        //layer.alignTo(li, 'bl-tr?');
        //layer.show(animShow);

    }
    var hoverOff = function(e) {
        li = Ext.get(e.target).up('.lensinfowrap');
        block = li.child('.lensinfo');
        block.hide(animHide);
        morden.hide();
        //layer.hide(animHide);
    }

    // ...CSS moves lensinfos to (0,0) like we might do with a 'position()' here
    Ext.select('.lensinfo').hide(false); // otherwise, it'll be in the wrong position the first time

    Ext.select('.lenslink').on('mouseover', hoverOn, this, {stopEvent : true});
    Ext.select('.lenslink').on('mouseout', hoverOff, this, {stopEvent : true});
});