var IE6 = false /*@cc_on || @_jscript_version < 5.7 @*/;
try {
  document.execCommand("BackgroundImageCache", false, true);
} catch(e) {}

var App = window.App||{};

function when(obj, fn) {
  if (Object.isString(obj)) obj = /^[\w-]+$/.test(obj) ? $(obj) : $(document.body).down(obj)
  if (Object.isArray(obj) && !obj.length) return
  if (obj) fn(obj)
}

Event.capture = function(event) {
    var rel = event.relatedTarget, cur = event.currentTarget;
    if (rel && rel.nodeType == Node.TEXT_NODE)
        rel = rel.parentNode;
    if (rel && rel != cur && !rel.descendantOf(cur))
        return true;
    return false;
};

App.Lightbox = function(){
	return {
		groups : {},
		initialize : function(){
			this._open=false;
			this.lightbox = new Element('div').update('<div class="lightbox"><div class="h"><div class="tl"></div><div class="tr"></div></div><div class="image"><div class="inner"><div class="loader"></div><div class="html"></div><img /></div></div><div class="controls"><a href="#" class="previous">Previous</a><a href="#" class="next">Next</a></div><div class="title"><div></div></div><div class="download"><a href="#">I would like a Hi Res version of this image</a></div><div class="close"><a href="#" class="close">Close</a></div><div class="b"><div class="bl"></div><div class="br"></div></div></div>');
			this.lightbox.id = 'lightbox';
			document.body.appendChild(this.lightbox);
			$(this.lightbox).hide();
			this.image = this.lightbox.getElementsByTagName('img')[0];
			$(this.image).hide();
			this.html = this.lightbox.getElementsByClassName('html')[0];
			this.html.hide();
			this.controls = this.lightbox.getElementsByClassName('controls')[0];
			this.controls.hide();
			this.download = this.lightbox.getElementsBySelector('div.download')[0];
			this.download.hide();
			this.downloadLink = this.download.getElementsByTagName('a')[0];
			this.title = this.lightbox.getElementsBySelector('div.title')[0].firstChild;
			//this.title.hide();
			this.close = this.lightbox.getElementsBySelector('a.close')[0];
			this.next = this.lightbox.getElementsByClassName('next')[0];
			this.prev = this.lightbox.getElementsByClassName('previous')[0];
			this.imageDiv = this.lightbox.getElementsByClassName('image')[0];
			this.innerDiv = this.lightbox.getElementsByClassName('inner')[0];
			this.loader = this.lightbox.getElementsByClassName('loader')[0];
			this.loader.hide();
			this.overlay = new Element('div', {id: 'overlay'});
			this.overlay.hide();
			document.body.appendChild(this.overlay);

			this.addListeners();
		},
		addListeners : function(){
			$$('a.lightbox').each(function(link){
				if(link.pathname.include('.jpg')){
					var rel = link.rel;
					if(rel){
						if(!this.groups[rel]){
							this.groups[rel]=$A();
						}
						this.groups[rel].push(link.href);
					}
					link.observe('click', this.show.bindAsEventListener(this));
				}else{
					link.observe('click', this.showHTML.bindAsEventListener(this));
				}
			}.bind(this));
			this.next.observe('click', this.update.bindAsEventListener(this));
			this.prev.observe('click', this.update.bindAsEventListener(this));
			this.close.observe('click', this.hide.bindAsEventListener(this));
		},
		show : function(e){
			Event.stop(e);
			if(this._open===false){
				this.hideSelects();
				this.overlay.show();
				this._open=true;
			}

			this.overlay.setStyle({
				height: document.body.offsetHeight+'px'

			});

			this.lightbox.setStyle({
				opacity : 1
			});

			lWWidth = false;
			lWHeight = false;

			this.innerDiv.setStyle({
				width: (lWWidth||200)+'px',
				height: (lWHeight||200)+'px'
			});

			this.html.hide();
			this.image.hide();
			this.loader.show();
			this.lightbox.show();

			var dims = document.viewport.getDimensions();
			var width = dims.width;
			var height = dims.height;
			var dimensions = this.lightbox.getDimensions();

			var l = (width/2)-(dimensions.width/2)+'px';
			var t = (height/2)-(dimensions.height/2)+document.viewport.getScrollOffsets().top+'px';

			this.lightbox.setStyle({
				top : t,
				left : l
			});

			this.lightbox.show();
			this.update(e);
		},
		showHTML : function(e){
			Event.stop(e);

			this.overlay.setStyle({
				height: document.body.offsetHeight+'px'

			});

			this.hideSelects();
			this.overlay.show();

			this.lightbox.setStyle({
				opacity : 1
			});

			this.innerDiv.setStyle({
				width: 500+'px',
				height: 400+'px'
			});

			this.html.hide();
			this.image.hide();
			this.loader.show();
			this.lightbox.show();

			var dims = document.viewport.getDimensions();
			var width = dims.width;
			var height = dims.height;
			var dimensions = this.lightbox.getDimensions();

			var l = (width/2)-(dimensions.width/2)+'px';
			var t = (height/2)-(dimensions.height/2)+document.viewport.getScrollOffsets().top+'px';

			this.lightbox.setStyle({
				top : t,
				left : l
			});

			this.lightbox.show();
			this.updateHTML(e);
		},
		updateHTML : function(e){
			Event.stop(e);
			var el = Event.element(e);
            while(el.tagName.toLowerCase()!='a'){
		    	el = el.parentNode;
		    }
			new Ajax.Updater(this.html, el.href, {
				method : 'get',
				onSuccess : function(transport){
					this.loader.hide();
					this.html.show();
				}.bind(this),
				evalScripts : true
			});
		},
		update : function(e){
			var i;
			var rel;
			Event.stop(e);
			this.loader.show();
			this.title.innerHTML='<p>&nbsp;</p>';
			new Effect.Opacity(this.image, {duration: 0.5, from: 1, to :0});
			var el = Event.element(e);
            while(el.tagName.toLowerCase()!='a'){
		    	el = el.parentNode;
		    }
			var rel = el.rel;
			var href = el.href;

			if(rel&&href){
				el = $$('a.lightbox').find(function(f){
					return f.href == href;
				});
			}

      // if(href.indexOf('/')){
      //  href = '/'+href;
      // }
						
			var title;

			if(el.down() && el.down().title){
				title = el.down().title;
			}

			if(rel){
		        	var i = this.groups[rel].indexOf(el.href);
		        	if(i!=0){
		        		var prev = {
		        			href:this.groups[rel][i-1],
		        			rel:rel
		        		};
		        	}
		        	if(i!=this.groups[rel].length-1){
		        		var next = {
		        			href:this.groups[rel][i+1],
		        			rel:rel
		        		};
		        	}
		        }else{
		        	next=null;
		        	prev=null;
		        }

        		img = new Image();
        		img.onload = function(){
        			this.onload(img, prev, next, title, i, rel);
        		}.bind(this);
		        img.src=href;
		},
		onload : function(img, prev, next, title, i, rel){
			var dimensions = this.lightbox.getDimensions();
			var _dimensions = this.imageDiv.getDimensions();

			var dims = document.viewport.getDimensions();
			var scroll = document.viewport.getScrollOffsets();

			var width = dims.width;
			var height = dims.height;

			var left = (width/2)-((dimensions.width-_dimensions.width+25+img.width)/2);
			var top = (height/2)-((dimensions.height-_dimensions.height+img.height)/2);



			top = top + scroll.top;

			if(top<10){
				top=10;
			}
			if(left<10){
				left=10;
			}

			var str = 'left : '+left+'px; top: '+top+'px;';
			var _str = 'width : '+img.width+'px; height : '+img.height+'px;';


			new Effect.Parallel([new Effect.Morph(this.lightbox, {style : str}), new Effect.Morph(this.innerDiv, {style: _str})],
				{
					afterFinish : function(){
						if(next||prev||title){
							if(rel&&typeof i != 'undefined'){
								i++;
								if(title){
									title = title+' - '+i+' of '+this.groups[rel].length;
								}else{
									title = i+' of '+this.groups[rel].length;
								}
							}
							if(title){
								//this.title.innerHTML='<p>'+title+'</p>';
							}else{
								//this.title.innerHTML = '&nbsp;';
							}
							if(next){
								this.next.rel = next.rel;
								this.next.href = next.href;
								this.next.show();
							}else{
								this.next.hide();
							}
							if(prev){
								this.prev.rel = prev.rel;
								this.prev.href = prev.href;
								this.prev.show();
							}else{
								this.prev.hide();
							}
							this.controls.show();
						}
						/*if(title){
							this.title.show();
						}else{
							this.title.hide();
						}*/
						if(window.media===true){
							var str = img.src.split('/');
							var s = str[str.length-1].split('_')[0];
							this.downloadLink.href = window.mediaUrl+s;
							this.download.show();
						}
						this.image.setStyle({opacity : 0});
						this.image.src= img.src;
						this.loader.hide();
						this.image.show();
						new Effect.Opacity(this.image, {duration: 0.5, from: 0, to: 1});
					}.bind(this)
				}
			);
		},
		hide : function(e){
			if(e){
				Event.stop(e);
			}

			new Effect.Opacity(this.lightbox, {
				duration: 0.5,
				from: 1,
				to: 0,
				afterFinish : function(){
					this._open=false;
					this.lightbox.hide();
					this.overlay.hide();
					this.showSelects();
				}.bind(this)
			});
		},
		hideSelects : function(){
			if(!document.all) return;
			$A(document.getElementsByTagName('select')).each(function(select){
				$(select).hide();
			});
		},
		showSelects : function(){
			if(!document.all) return;
			$A(document.getElementsByTagName('select')).each(function(select){
				$(select).show();
			});
		}
	}
}();


App.Navigation = function(){

  var events = {
    'mouseenter' : 'mouseover',
    'mouseleave' : 'mouseout'
  }

  function get_event(event){
    if(Prototype.Browser.IE) return event;
    return events[event];
  }

  return {
    initialize : function(){
      this.element = $('nav');
      this.element.select('li:not(.selected)').each(function(li){
        var link = li.down('a');
        link.observe(get_event('mouseenter'), this.on_mouseover.bindAsEventListener(this));
        link.observe(get_event('mouseleave'), this.on_mouseout.bindAsEventListener(this));
      }, this);
    },
    on_mouseover : function(e){
      if(!Prototype.Browser.IE && !Event.capture(e)) return;
      var element = e.findElement('a');
      if(element){
        var animation = new Effect.Morph(element.down('span'), {
          duration: 0.25,
          style: {
            paddingTop: '21px'
          },
          transition: Effect.Transitions.spring
        });
      }
    },
    on_mouseout : function(e){
      if(!Prototype.Browser.IE && !Event.capture(e)) return;
      var element = e.findElement('a');
      if(element){      
        var animation = new Effect.Morph(element.down('span'), {
          duration: 0.25,
          style: {
            paddingTop: '13px'
          },
          transition: Effect.Transitions.spring          
        });      
      }
    }    
  }
}();

App.GamesSearch = function(){
  var element, link, scrollbar, wrapper;
  
  function toggle(e){
    if(e) e.stop();
    if(wrapper.hasClassName('open')){
      Effect.BlindUp(element, {
        duration: 0.5,
        afterFinish : function(){
          wrapper.removeClassName('open');
        }
      });    
    }else{
      Effect.BlindDown(element, {
        duration: 0.5,
        afterFinish : function(){
          wrapper.addClassName('open');
          scrollbar.render();
        }
      });
    }
    
    
    /*Effect.toggle(element, 'blind', {
      duration: 0.5,
      afterFinish : function(){
        wrapper.toggleClassName('open');
        scrollbar.render();
        //link.show();
      }
    });*/
    
    
  }
  
  return {
    initialize : function(){   
      var q = document.location.search.toQueryParams();
      
      wrapper = $('game_search'); 
      element = $('games_search_wrapper');
      link = $('games_search_expand');
      
      
      if(!q.platformId){
          element.hide();
      }else{
        wrapper.addClassName('open');
      }
      
      if(q.keyword){
        $('keyword').value = q.keyword;
      }
      
      link.observe('click', toggle);      
      scrollbar = new View.ScrollBar('game_list');      
    }
  }
}();


App.ImageViewer = Class.create();
App.ImageViewer.prototype = {
	initialize : function(element, options){
		if(!element){
			return false;
		}
		this.index = 1;
		this.element = $(element);
		this.options = options;
		this.locked = false;
		this.parentNode = this.element.up();
		this.ul = this.element.getElementsBySelector('ul').first();
		this.images = $A(this.ul.getElementsByTagName('a'));
		this.ul.setStyle({
			marginTop: 0,
			marginLeft: 0
		});
		if(this.images.length>3){
			this.width = 0;
			this.height = 0;
			this.images.each(function(node, i){
				var image = node.getElementsByTagName('img')[0];
				this.width += image.offsetWidth+this.options.imagePadding;
				this.height += image.offsetHeight;
				node.index = i;
			}.bind(this));
			this.width = this.width-this.options.imagePadding;
			this.addListeners();
		}else{
			this.element.getElementsBySelector('div.ft').first().hide();
		}
		this.images.each(function(node, i){
			$(node).addClassName('lightbox');
		}, this);
		if(this.options.centre===true){
			this.ul.setStyle({
				marginLeft: -(this.width/2)+"px"
			});
		}
		if(this.options.callback){
			Event.observe(this.ul, 'click', this.onclick.bindAsEventListener(this));
		}
	},
	addListeners : function(){
		Event.observe(this.element.getElementsBySelector('a.next').first(), 'click', this.scroll.bindAsEventListener(this));
		Event.observe(this.element.getElementsBySelector('a.prev').first(), 'click', this.scroll.bindAsEventListener(this));
	},
	scroll : function(e){
		var anim, property;
		Event.stop(e);
		if(this.locked===false){
			this.locked = true;
			var direction = Event.element(e).className;
			property = 'margin-left';
			var offset = this.options.imageWidth+this.options.imagePadding;
			var maxOffset = offset*this.options.imageCount;
			if(direction=='next'){
				anim=parseInt(this.ul.style.marginLeft)-(offset*1);
				if(-anim>parseInt(this.width)-maxOffset){
					anim=-(parseInt(this.width)-maxOffset);
				}else{
					this.index = this.index+1;
				}
			}else if(direction=='prev'){
				anim=parseInt(this.ul.style.marginLeft)+(offset*1);
				if(anim>0){
					anim=0;
				}else{
					this.index = this.index-1;
				}
			}
			var str = property+':'+anim+'px;'
			new Effect.Morph(this.ul, {
				style : str,
				afterFinish : function(){
					this.locked = false;
				}.bind(this)
			});
		}
	}
};

document.observe("dom:loaded", function(){   
  App.Navigation.initialize();
  
	$A(App.Flash).each(function(flash){
		UFO.create(flash, flash.dom_id);
	});  
	
  App.Lightbox.initialize();	
  
	$('content').select('div.screenshots').each(function(element){
		new App.ImageViewer($(element), {
			imageCount : 4,
			imageWidth : 120,
			imagePadding: 16,
			centre : false
		});
	});  
  
  when('game_search', App.GamesSearch.initialize);
  
  when('game_jump', function(element){
    $(element).observe('change', function(e){
      if(element.value){
        element.disable();
        window.location = element.value;
      }
    });
  });
  
  
  $$('form').each(function(form){
    var submit = form.down('input[type="submit"]');
    if(submit){
      form.observe('submit', function(e){ 
        submit.setStyle({
          opacity: 0.5,
          display: 'none'
        });        
      });
    }
  });
  
  
});