var App = window.App||{};

App.GameWidget = function(){
  var element;
  return {
    initialize : function(){
      element = $('widget');
      
        var screenDiv = $('screens');
        if (screenDiv != null){
        	new FBF.Carousel('screens', {
        		visible: 1,
        		autoplay: 5,
        		wrap: true
        	});
        }
            
    }
  }
}();

App.Lightbox = function(){
  var current;
  var groups = $H({});
  var Lightbox = {};
  var selects; 
    
  var Group = Class.create(Enumerable, {
    initialize : function(nodes){
      this.length = 0;
      this.first = null;
      this.last = null;    
      $A(nodes).each(function(node){
        this.append({
          data : node,
          prev : null,
          next : null
        });
      }, this);
    },
    append : function(node){
      if(this.first === null){
        this.first = node;
        this.last = node;
      }else{
        node.prev = this.last;
        this.last.next = node;
        this.last = node;
      }
      this.length++;    
    },
    _each : function(iterator){
      var node = this.first, n = this.length;
      for (var i = 0; i < n; i++) {
        iterator(node, i);
        node = node.next;
      }   
    } 
  });   
  
  function get_group(group){
    return groups.get(group)||groups.set(group, new Group());
  }
  
  function add_image(image){
    var group = get_group(image.rel||'default');
    group.append({
      data : {
        url : image.href
      },
      prev : null,
      next : null
    });
    image.observe('click', show);
  }
  
  function show(e){
    var image = Event.findElement(e, 'a.lightbox');
    if(image){
      Event.stop(e);
      var object = get_group(image.rel||'default').find(function(_image){
        return _image.data.url == image.href;
      });
      
      Lightbox.controlsOuter.setStyle({
        width: "auto"
      });			      
      
      Lightbox.element.setStyle({
        opacity: 1
      });
      Lightbox.controls.hide();
      Lightbox.img.hide();
      
      var viewport = document.viewport.getDimensions();
      var scroll = document.viewport.getScrollOffsets();
      
      Lightbox.image.setStyle({
        height: '200px',
        width: '200px',
        overflow: 'hidden'
      });
      
      Lightbox.element.show();
      
      var size = $(Lightbox.element).getDimensions();
      var _size = $(Lightbox.image).getDimensions();

      var left = (viewport.width/2)-(size.width/2);
      
      var top = Math.max(10, (viewport.height/2)-(size.height/2)+scroll.top);
    
      Lightbox.element.setStyle({
        left : left+"px",
        top : top+"px"
      });      
      load(object);
    }
  }
  
  function next(e){
    Event.stop(e);
    if(current.next){
      load(current.next);
    }
  }
  
  function prev(e){
    Event.stop(e);
    if(current.prev){
      load(current.prev);
    }
  }
  
  function close(e){
    Event.stop(e);
		new Effect.Opacity(Lightbox.element, {
			duration: 0.5, 
			from: 1, 
			to: 0,
			afterFinish : function(){
				Lightbox.element.hide();
			}.bind(this)
		});    
  }
  
  function load(object){
    Lightbox.close.hide();
    Lightbox.title.hide();  
    
    new Effect.BlindUp(Lightbox.controls, {
      duration: 0.5,
      afterFinish : function(){
        new Effect.Opacity(Lightbox.img, {
          duration: 0.5, 
          from: 1, to :0,
          afterFinish : function(){
            Lightbox.img.hide();
            var img = new Image();
            img.onload = onload.curry(object); 
            img.src = object.data.url;
          }
        });
      }
    });
  }
  
  function onload(object){ 
    var viewport = document.viewport.getDimensions();
    var scroll = document.viewport.getScrollOffsets();
    
    var size = $(Lightbox.element).getDimensions();
    var _size = $(Lightbox.image).getDimensions();
    
    var left = (viewport.width/2)-((size.width-_size.width+this.width)/2);
    var top = Math.max(10, (viewport.height/2)-((size.height-_size.height+this.height)/2)+scroll.top);
    
    var str = "left:"+left+"px;top:"+top+"px;";
    var _str = "width:"+this.width+"px;height:"+this.height+"px;";
    
    new Effect.Parallel([new Effect.Morph(Lightbox.element, {style : str}), new Effect.Morph(Lightbox.image, {style: _str})],
				{
				  afterFinish : function(){
            Lightbox.controlsOuter.setStyle({
              width: this.width+"px"
            });				  
				  
				    Lightbox.close.show();
            (object.prev) ? Lightbox.prev.show() : Lightbox.prev.hide();
            (object.next) ? Lightbox.next.show() : Lightbox.next.hide();				    
  				  Lightbox.img.src = object.data.url;
				    Lightbox.img.show();
  				  new Effect.Opacity(Lightbox.img, {
  				    duration: 0.5,
  				    from: 0,
  				    to: 1,
  				    afterFinish : function(){
  				      new Effect.BlindDown(Lightbox.controls, {
  				        duration: 0.5
  				      });
  				    }
  				  });
  				  current = object;
				  }.bind(this)
				}
		);    
  }
  
  function hideSelects(){			
	  if(Prototype.Browser.IE){
 			selects.invoke('hide');
 		}
	}
	
	function showSelects(){
    if(Prototype.Browser.IE){
  	  selects.invoke('show');
  	}
	}
	
	function build(){
    var lightbox = new Element('div', {className: 'dialogue'}).update('<div class="dialogue_inner"><div class="image"><div class="image_inner"><div class="loader"></div><img /></div></div><div class="controls_outer"><div class="controls"><a href="#" class="prev">Previous</a><a href="#" class="next">Next</a></div></div><div class="title">Title</div><div class="close"><a href="#" class="close">Close</a></div></div>');

    Lightbox.element = lightbox;
    Lightbox.img = lightbox.down('img');
    Lightbox.image = lightbox.down('div.image_inner');
    Lightbox.loader = lightbox.down('div.loader');
    Lightbox.controls = lightbox.down('div.controls');
    Lightbox.controlsOuter = lightbox.down('div.controls_outer');
    Lightbox.title = lightbox.down('div.title');    
    Lightbox.next = lightbox.down('a.next');
    Lightbox.prev = lightbox.down('a.prev');
    Lightbox.close = lightbox.down('a.close');
    
    Lightbox.next.observe('click', next);
    Lightbox.prev.observe('click', prev);
    Lightbox.close.observe('click', close);
    
    lightbox.hide();
    document.body.appendChild(lightbox);	  
	}
  
	return {
		initialize : function(){
		  var selects = $A(document.getElementsByTagName('select'));
		  this.add_images($$('a.lightbox'));
		  build();
		},
		add_images : function(links){
		  $A(links).each(function(link){
		    add_image(link);
		  });  
		}	
	}
}();

Event.observe(window, 'load', function(){

	
  new FBF.Carousel('carousel', {
    visible: 4,
    autoplay: false,
    wrap: true
  });
  
  
  App.GameWidget.initialize();
  App.Lightbox.initialize();
  
 var link = $('toggle_reviews');
  var elements = $$('.review');
  elements.shift();
  if(elements){
    elements.invoke('hide');
    link.observe('click', function(e){
      e.stop();
      if(elements[0].visible()){
        elements.invoke('hide');
        link.update('Show all reviews');
      }else{
        elements.invoke('show');
        link.update('Hide all reviews');
      }
    }); 
  }
  
  
});