/**
 * Gigapan user interface
 */ 
var Gigapan = {

    setup: function() {
          Gigapan.Lightbox.setup();
          
          if (Gigapan.Form.setup) {
                  Gigapan.Form.setup();
          }

          Gigapan.Carousels.setup();
              Gigapan.Snapshots.setup();
              Gigapan.Detail.setup();

              $$('#competitions-scroll, #agreement-scroll, #viewer-comments').each(Gigapan.Scrollable.setup);
          
          // Emulate hover
          Gigapan.Utils.emulateHover($$('#top-nav li.with-flyout, #navigation li.with-flyout, body.detail .right-side'));
          
          /**
           * FAQs 
           */ 
          if ($('faqs') != undefined) {
              $$('#faqs dd').invoke('hide');
              $$('#faqs dt a').each(function (e) {
                   e.observe('click', function(event) {
                       // Effect.toggle(this.up().next(), 'slide', { duration: 0.5 });
                       this.up().next().toggle();
                       if (this.innerHTML == 'show') {
                            this.update('hide');
                            this.removeClassName('open');
                            this.addClassName('close');
                       } else {
                            this.update('show');
                            this.removeClassName('close');
                            this.addClassName('open');
                       }
                       Event.stop(event);
                   });
              });
          }
          
          /**
           * Section toggle          
           */    
          $$('a.toggle').each(function(e){
              var section = e.up();
              var content = section.select('.content')[0];

              e.observe('click', function(event) {
                  if (section.hasClassName('toggled')) {
                      //Effect.SlideDown(content, 'blind', { duration: 0.5 });
                      content.show();
                  } else {
                      //Effect.SlideUp(content, 'blind', { duration: 0.5 });
                      content.hide();
                  }
                  section.toggleClassName('toggled');
                  Event.stop(event);
              });
          })
          
          /**
           * Fix submit buttons in Firefox
           */
          if (Gigapan.Utils.detectFirefox()) {
              $$('.button input').each(function (e) {
                  e.addClassName('firefox');
              });
          }
    },
    
    /**
     * Carousels
     */         
    Carousels: {
        
        /**
         * Timeout for the resize event
         */
        timeout: 0,
        
        /**
         * Carousel instances array
         */                 
        instances: [],
        
        /**
         * Setup carousels on the current page
         */                 
        setup: function() {
           
           Event.observe(window, "resize", Gigapan.Carousels.resize);
            
            // Setup carousels
            $$('.carousel').each(function (e, i) {
				Gigapan.Carousels.instances[i] = new CarouselImproved(e.down('.carousel-container'), e.select('li'), e.select('a.carousel-control, a.carousel-pager', 'a.carousel-jumper'), {
					wheel: false
				});
            });
        },
        
        fixPosition: function () {
            Gigapan.Carousels.instances.each(function (e) {
                var el = $(e.id);
                
                el.hide();
            });
        },
        
        scrollBlock: function (e) {
        
        	
        
        },
        
        /**
         * Resize carousels
         */                          
        resize: function() {
            // Update size of carousel instances
            Gigapan.Carousels.timeout = 0;

            Gigapan.Carousels.instances.each(function (instance) {

				instance.moveTo(instance.getCurrent());
				
				instance.recalculateVisible();
            });
        }
    },
    
    Utils: {
        /**
         * Emulate hover
         */
        emulateHover: function(items) {
            items.each(function (e) {
                e.observe('mouseenter', function() {
                    this.addClassName('hover');
                });
                e.observe('mouseleave', function() {
                    this.removeClassName('hover');
                });
            });
        },
        
        /**
         * Detect Firefox
         */                 
        detectFirefox: function() {
            var userAgent = navigator.userAgent.toLowerCase();
            if (userAgent.indexOf('firefox') != -1) {
                return true;
            } else {
                return false;
            }
        },
        
        keyCode: function (e) {
            var code = e.keyCode ? e.keyCode : e.which ? e.which : false;
            return code;
        }   
    },

    /**
     * Modal windows setup
     */
    Lightbox: {

        setup: function(){
        
            // Container for modals
            var container = $('windows');

            $$('a.button-edit,a[href="#popup-join"],a[href="#popup-login"]').each(function(e, id){
                var popupSelector = e.readAttribute('href').replace('#', '');
            
                // Get element with inline content
                var popup = $(popupSelector);

                if (!popup) {
                    return;
                }

                // Add extra markup - close link and rounded corners figures
                popup.insert(['<a class="close-window">Close window</a>',
                            '<span class="tl"></span>',
                            '<span class="tr"></span>',
                            '<span class="t"></span>',
                            '<span class="bl"></span>',
                            '<span class="br"></span>',
                            '<span class="b"></span>',
                            '<span class="r"></span>',
                            '<span class="l"></span>'].join(''));

                // Add inner wrapper
                popup.update('<div class="window-inner">' + popup.innerHTML + '</div>');

                // Move popup on container if necessary
                if (popup.up() != container ) {
                    container.appendChild(popup);
                }
                
                // Create modal window
                var wnd = new Control.Modal(e,{  
                    overlayOpacity: 0.4,  
                    className: 'window',
                    closeOnClick: 'overlay',
                    iframeshim: false,
                    afterOpen: function(){
						        Gigapan.Scrollable.recalculate();
                    }
                });

                // Add close handlers
                popup.select('.close-window, .button-grey').each(function(e){
                    e.observe('click', function(event) {
                        wnd.close();
                        Event.stop(event);
                    });
                });
            });
        }

    },

    /**
     * Snapshots info
     */
    Snapshots: {
        setup: function(){
            Gigapan.Snapshots.baseElm = $('group-snapshots');
            if( !Gigapan.Snapshots.baseElm ) { return; }

            Gigapan.Snapshots.baseElm.childElements().each(function(e){
                e.observe('mouseenter', Gigapan.Snapshots.handleSnapshotOver);
                e.observe('mouseleave', Gigapan.Snapshots.handleSnapshotOut);
            });
        
        },
        
        baseElm: null,
        
        handleSnapshotOver: function(event) {
            var elm = Event.element(event);
            if( elm.nodeName.toLowerCase() != 'li' ) {
                elm = elm.up('li');
            }
            var info = elm.select('.info').first();

            if( Gigapan.Snapshots.baseElm.getDimensions().width - elm.positionedOffset().left - elm.getDimensions().width < 450 ) {
                info.addClassName('info-a');
            }

            elm.addClassName('hover');
            info.show();

        },
        
        handleSnapshotOut: function(event) {
            var elm = Event.element(event);
            if( elm.nodeName.toLowerCase() != 'li' ) {
                elm = elm.up('li');
            }
            var info = elm.select('.info').first();

            info.hide();
            info.removeClassName('info-a');
            elm.removeClassName('hover');
        }
    },

    Scrollable: {
        
        elms: [],
    
        setup: function(e) {
            // Add required elements for structure
            e.update('<div class="scroll-content">' + e.innerHTML + '</div>');
            e.insert('<div class="scroll-track"><div class="scroll-handle"><span></span></div></div>');
            e.addClassName('scrollable');
              
            // Setup ControlScrollbar
            var content = e.select('.scroll-content').first();
            var track = e.select('.scroll-track').first();
            var elm = new Control.ScrollBar(content, track);

            // Save elements
            Gigapan.Scrollable.elms.push(elm);
        },

        recalculate: function() {
            Gigapan.Scrollable.elms.each(function(elm){
                elm.recalculateLayout();
                elm.recalculateLayout();
            });
        }
    
    },
    
    /**
     * Detail page
     */
    Detail: {
        
        /**
         * Set up detail page
         */                 
        setup: function() {
            Gigapan.Detail.addComment();
            Gigapan.Detail.action();
        },
        
        /**
         * Toggle add comment form
         */                 
        addComment: function() {
           
            var comment_form =  $$('body.detail .section-comments form')[0];
            var add = $$('body.detail div.section-comments a.add')[0];
            var cancel = $$('body.detail div.section-comments a.cancel')[0];
            if (!comment_form) {
                return;
            }
            comment_form.hide();
            
            add.observe('click', function(event) {
                 comment_form.show();
                 add.hide();
                 Event.stop(event);
            });
            
            cancel.observe('click', function(event) {
                 comment_form.hide();
                 add.show();
                 Event.stop(event);
            });
        
        },
        
        /**
         * Toggle actions
         */                 
        action: function() {
            var actions = $$('body.detail .detail-action');
            actions.invoke('hide');
            $$('body.detail #content .nav a').each(function (e) {
                e.observe('click', function(event) {
                    var id = e.readAttribute('href').replace('#', '');
                    if (id != '') {
                        actions.each(function (e) {
                            if (e.readAttribute('id') != id ) {
                                e.hide();
                            }
                        });
                        if ($(id) != undefined) {
                             $(id).toggle();
                             Event.stop(event);
                        }
                    }
                });
            });
        } 
    }      
};

Element.addMethods({

	getOuterWidth: function (element, includeBorder) {
		includeBorder = includeBorder || false;
		element = $(element);

		var w = element.offsetWidth;
		
		if (includeBorder) {
			w += (parseInt(element.getStyle('margin-left')) + parseInt(element.getStyle('margin-right')));
		}
		
		return w;
	}

});

document.observe("dom:loaded", function() {
    Gigapan.setup();
});
Event.observe(window, 'load', function () {
	Gigapan.Carousels.resize()
});