// Register namespaces and their corresponding paths to Ext.Loader
Ext.Loader.setPath({
     'AppName': 'app'//,
     // ... Other namespaces
});

// Specify a list of classes your application your application needs
Ext.require([
    'Ext.fx.Anim',
    'Ext.Component',
    //'Ext.draw.Sprite',
    //'Ext.draw.Component',
    'Ext.ZIndexManager'
]);

var closeInfo = function() {}

// Application's initialization
Ext.onReady(function() {
    var exampleCloseLinks = Ext.select('#examples ul li a.closelink');
    exampleCloseLinks.on('click', function(e,target) {
         e.preventDefault();
         var link = Ext.get(this);
         var infopane = link.up('li').down('div.infopane');
         infopane.image = link.up('li').down('img.display');
         infopane.animate({
              to: {
                  x: infopane.image.getBox().x,
                  y: infopane.image.getBox().y
              },
              easing: 'ease',
              listeners : {
                  afteranimate : function() {
                       this.hide();
                       infopane.image.animate({
                            to: {
                                x: examples.expandedElX,
                                y: examples.expandedElY,
                                height: 86,
                                width: 117
                            },
                            easing: 'ease',
                            listeners: {

                                afteranimate : function() {
                                	var smallImage = this.up('li').down('img.displayBig');
                                	var bigImageSrc = this.dom.src;
                                    this.dom.src=smallImage.dom.src;
                                    smallImage.dom.src=bigImageSrc;
                                    this.applyStyles("z-index: 1");
                                },
                                scope: infopane.image

                            },
                            scope: infopane.image
                        });
                  },
                  scope : infopane
              }
          });
    });

    var exampleMasks = Ext.select('#examples ul li div.hilite', true);

     exampleMasks.on('mouseout', function(e,target) {
       this.animate({
           to: {
               opacity: 0
           },
           scope: this
       });
     });

     exampleMasks.on('mouseover', function(e,target) {
          
       this.animate({
           to: {
               opacity: 0.5
           },
           scope: this
       });
    });

    var examples = Ext.select('#examples ul li img.display', true);
    var box = Ext.get('examples').getBox();
    exampleMasks.on('click', function(e,target) {
        e.preventDefault();
      
        
        var clicked =  this.up('li').down('img.display');
        
        examples.expandedElX = clicked.getBox().x;
        examples.expandedElY = clicked.getBox().y;
        
        
        var animImage = this.up('li').down('img.displayBig');
        var smallImageSrc = clicked.dom.src;
        clicked.dom.src=animImage.dom.src;
        animImage.dom.src=smallImageSrc;
        clicked.animate({
            to: {
                x: box.x,
                y: box.y,
                height: 488,
                width: 650
            },
            easing: 'ease',
            listeners: {
                beforeanimate : function() {
                    this.applyStyles("z-index: 100");
                },
                afteranimate : function() {
                  var infopane = this.up('li').down('div.infopane');
                  //console.log(infopane);
                 // infopane.show();
                  infopane.applyStyles("z-index: 99");
                  infopane.animate({
                      from: {
                          x: this.getBox().x,
                          y: this.getBox().y
                      },
                      to: {
                          x: this.getBox().x + 650,
                          y: this.getBox().y
                      },
                      easing: 'ease',
                      listeners : {
                          beforeanimate: function() {
                              infopane.show();
                          }
                      }
                  });
                },
                scope: clicked

            },
            scope: this
        });
        
    });

     examples.on('click', function(e,target) {

         var infopane = this.up('li').down('div.infopane');
         infopane.image = this;
         infopane.animate({
              to: {
                  x: this.getBox().x,
                  y: this.getBox().y
              },
              easing: 'ease',
              listeners : {
                  afteranimate : function() {
                       this.hide();
                       infopane.image.animate({
                            to: {
                                x: examples.expandedElX,
                                y: examples.expandedElY,
                                height: 86,
                                width: 117
                            },
                            easing: 'ease',
                            listeners: {

                                afteranimate : function() {
                                    var smallImage = this.up('li').down('img.displayBig');
                                	var bigImageSrc = this.dom.src;
                                    this.dom.src=smallImage.dom.src;
                                    smallImage.dom.src=bigImageSrc;
                                    this.applyStyles("z-index: 1");
                                },
                                scope: infopane.image

                            },
                            scope: infopane.image
                        });
                  },
                  scope : infopane
              }
          });
         
                
     });
	
//	var boxes = Ext.select('.question_box', true);
//	boxes.on('click', function(e, target){
//		toggleSelectBox(target);
//		e.preventDefault();
//	});
//	boxes.each(function(el,c,idx) {
//		if(box_data[idx]) {
//			el.addCls('selected');
//		}
//	})
//
//	var companyName = Ext.select("#header div h1");
//	if (data.organization_name_length > 42) {
//		companyName.applyStyles("font-size: 24px");
//	} else if (data.organization_name_length > 32) {
//		companyName.applyStyles("font-size: 30px");
//	} else if (data.organization_name_length > 25) {
//		companyName.applyStyles("font-size: 40px");
//	}
//
//	if (edit) {
//		Ext.select('.closable h2', true).each(function(el, c, idx) {
//			if (idx < 2) {
//				toggleClosable(el);
//			}
//		});
//	}
	
    
});