var op = {
		climbing : false,
		loaded : false,
		dom : {},
		load : function() {

				if($.browser.msie) {
						$('#content').removeClass('hide');
						return true;				
				}
				
				$('#content').remove();

				$(document).css('overflow', 'hidden');
				$(document.body).css('overflow', 'hidden');

				op.initdom();
																
				var ul = $('<ul></ul>');
				var home = $('<li class="home" rel="home" id="home" data="OCKERTUNDPARTNER"></li>');
				
				// set the home list element
				ul.append(home)
				
				$.getJSON('/projects', function(data) {

						$(data).each(function(i, element) {

								var li = $('<li rel="' + element.rel + '" id="' + element.id + '" data="' + element.title + '"></li>');
								
								op.preload(element.src, function() {
										var img = $(this).attr('width', 300).attr('height', 200).css('opacity', 0);
										li.append(img);
										img.animate({'opacity' : 1}, 100);
								});

								ul.append(li);
								
						});

						op.dom.work.append(ul);
						op.dom.work.find('li').first().addClass('active');

						op.dom.pageloader.remove();

						op.setup();
						return true;
												
				});	
				
					
		},		
		
		initdom : function() {
		
				this.dom.page = $('<div id="page"></div>');
				this.dom.pageloader = $('<div id="pageloader"></div>');
				this.dom.instructions = $('<div id="instructions"></div>');
				this.dom.work = $('<div id="work"></div>');				
				this.dom.details = $('<div id="details" class="hide"></div>');
				this.dom.slider = $('<div id="slider"></div>');				
				this.dom.menu = $('<div id="menu"></div>');

				var mul = '<ul>';
				mul += '<li class="home"><span>Home</span></li>';
				mul += '<li class="space"><span>Space</span></li>';
				mul += '<li class="photography"><span>Photography</span></li>';
				mul += '<li class="print"><span>Print</span></li>';
				mul += '<li class="office"><span>Office</span></li>';
				mul += '</ul>';

				this.dom.slider.html(mul);
				this.dom.menu.append(this.dom.slider);
				
				this.dom.page.append(this.dom.pageloader);
				this.dom.page.append(this.dom.instructions);
				this.dom.page.append(this.dom.work);
				this.dom.page.append(this.dom.details);
				this.dom.page.append(this.dom.menu);
				
				$(document.body).append(this.dom.page);
								
		},

		setup : function() {

				// add the fades
				this.dom.page.append($('<div class="fade" id="top"></div><div class="fade" id="right"></div><div class="fade" id="bottom"></div><div class="fade" id="left"></div>'));

				var li    = this.dom.work.find('li');
				var steps = (li.length-1);
				var step  = 880 / steps;

				var home   			= Math.round(li.filter('li[rel=home]').length * step);										
				var space 			= Math.round(li.filter('li[rel=space]').length * step);
				var photography = Math.round(li.filter('li[rel=photography]').length * step);
				var print 		  = Math.round(li.filter('li[rel=print]').length * step);
				var office 		  = Math.round(li.filter('li[rel=office]').length * step);
								
				this.dom.slider.find('.space').css('width', space).css('left', home);
				this.dom.slider.find('.photography').css('width', photography).css('left', home+space);
				this.dom.slider.find('.print').css('width', print).css('left', (home+space+photography));
				this.dom.slider.find('.office').css('width', office).css('left', (home+space+photography+print));
				
				this.dom.menu.animate({'opacity' : 1}, 150);

				this.dom.slider.slider({
						min : 0,
						max : steps,
						animate : true,
						slide: function(event, ui) {
								var element = li.filter(':eq(' + ui.value + ')');
								element.trigger('click');
						}
				});
				
				if(window.location.hash.length > 0 && window.location.hash != '#home/home') {
						var parts = window.location.hash.split('/');
						var id    = parts[1];
						var img   = parts[2];
						
						op.select($('#' + id));
												
				}
				
				$(document).keydown(function(event) {
						
						switch(event.keyCode) {
								case 37: // left arrow
										event.preventDefault();
										op.skip(true);
										break;
								case 39: // right arrow
										event.preventDefault();
										op.skip(false);
										break;
								case 40: // down arrow
										event.preventDefault();
										op.climb(false);
										break;
								case 38: // up arrow
										event.preventDefault();
										op.climb(true);
										break;        
								case 13: // enter 
								case 32: // space
										event.preventDefault();
										if(op.dom.details.hasClass('hide')) {
												op.open();
										} else {
												op.close();
										}
										break;
								case 27: // esc
										event.preventDefault();
										op.close();
										break;
						}
						
				});

				$(document).mousewheel(function(event, delta) {
						(delta > 0) ? op.climb(true, true) : op.climb(false, true);
				});
				
				op.dom.instructions.click(function() {
						op.instructions.hide();
				});
				
				op.dom.work.find('li').click(function() {
					if($(this).hasClass('active')) {
						op.open();
					} else {
						op.select($(this));
					}
				});
						
		},
    skip : function(back) {
				op.instructions.hide();
        var active = this.dom.work.find('.active');
        var next = (back) ? active.prev() : active.next();
        if(next.length == 0) return;
        next.trigger('click');
    },
    select : function(element) {
        this.close();
        this.dom.work.find('.active').removeClass('active');
        element.addClass('active');
        var index  = element.prevAll().length;    
        var add    = (element.attr('rel') == 'home') ? 0 : 580;
        var offset = -(add+150 + (index * 320));
        
        this.dom.slider.slider('value', index);
        this.dom.work.stop().animate({'margin-left' : offset}, 300);    
        
        document.title = element.attr('data');
        window.location.hash = element.attr('rel') + '/' + element.attr('id');
                
    },
    category : function(id) {
        var element = this.dom.work.find('li[rel=' + id + ']').first().trigger('click');
    },
    open : function(openImage) {

				if(this.dom.work.find('li.active').attr('rel') == 'home') {
					op.instructions.show();
					return true;
				}

				this.climbing = false;
      	this.dom.overlay = $('<div id="overlay"></div>')
      	this.dom.overlay
      			.css('opacity', 0)
      			.stop()
	          .animate({'opacity': .8}, 150)
      			.click(op.close);

      	$(document.body).append(this.dom.overlay);
				
				// clean up
        this.dom.details.empty()
        		   .css('opacity', 0)
        			 .removeClass('hide');

				this.dom.slider.animate({'opacity' : 0}, 150);  

				var active  = this.dom.details.find('li.active');
				var base    = this.dom.work.find('li.active');
				var img     = active.attr('rel');
				var fheight = false;
				
				if(!img) img = '01';
				
				window.location.hash = base.attr('rel') + '/' + base.attr('id') + '/' + img;												

				$.getJSON('/projects/' + base.attr('rel') + '/' + base.attr('id'), function(data) {
						
						var ul = $('<ul><ul>');
						$(data).each(function(i, element) {

								var mtop   = -(element.height / 2);									
								var mleft  = -(element.width / 2);
								var styles = {
									'width' : element.width,
									'height' : element.height,
									'margin-left' : mleft, 
									'margin-top' : mtop, 
								};

								var loader = $('<div class="loader"></div>').css(styles);

								var li = $('<li rel="' + element.rel + '"></li>')
										.css('height', element.height)
										.append(loader);

								if(!fheight) fheight = element.height; 

								if(element.type == 'info') {
										var caption = $('<div class="info">' + element.description + '</div>');
								} else {
										if(element.title.length > 0 && element.description.length > 0) {
												var caption = $('<div class="caption"><div class="title"><span>' + element.title + '</span></div><div class="description"><span>' + element.description + '</span></div></div>');
										} else {
												var caption = $('<div class="caption"></div>');
										}
								}

								ul.append(li);
								
								op.preload(element.src, function() {
										var img   = $(this).css(styles).css('opacity', 0);
										var width = element.width;

										caption.css({
												'width' : width,
												'left'  : '50%',
												'margin-left' : -(Math.round(width/2))												
										});

										li.append(img);
										li.append(caption);
										img.animate({'opacity' : 1}, 500);

										loader.animate({'opacity' : 0}, 300).remove();

								});
								
						});
																		
						op.dom.details.append(ul);
						
						op.dom.details.find('li').click(function() {
							op.detail($(this));
						});

						op.dom.details.find('li').first().addClass('active');
						op.dom.details.css('margin-top', -(fheight / 2));
						
						op.dom.details.attr('class', '')
								.addClass(base.attr('rel') + '-' + base.attr('id'))
								.animate({'opacity': 1}, 150);

						if(op.dom.details.hasClass('office-facts') == false) {
							// mouseover
							op.dom.details.find('li').hover(function() {
								$(this).find('.caption').stop().animate({'opacity' : 1}, 150);
							},
							function() {
								$(this).find('.caption').stop().animate({'opacity' : 0}, 150);								
							});
						}								

						op.dom.details.find('a:not([href*=ockert-partner])').attr('target', '_blank');

						// go to the given image		
						if(openImage) op.details.find('li[rel=' + openImage + ']').trigger('click');
								
				});	
                        
    },
    close : function() {
				
				if(this.dom == {}) return false;
				
				this.climbing = false;
				op.instructions.hide();

				$('#overlay').remove();
        $('#details').stop().animate({'opacity' : 0}, 100, function() {
            $(this).addClass('hide').css('margin-top', -200);    
        });
        $('#slider').stop().animate({'opacity' : 1}, 300); 

				var base = $('#work').find('li.active');
        window.location.hash = base.attr('rel') + '/' + base.attr('id');
                 
    },
    climb : function(up, mousewheel) {

				if(mousewheel && this.climbing) return true;				
				this.climbing = true;
				
				// get the active element
        var active = this.dom.details.find('.active');
				
				if(this.dom.details.hasClass('hide')) {
						if(!up) op.open();						
						return true;
				}
				
        var next = (up) ? active.prev() : active.next();
        if(next.length == 0) {
        		this.climbing = false;
        		return true;
        }
        next.trigger('click');
    },
    detail : function(element) {
    
        this.dom.details.find('.active').removeClass('active');
        element.addClass('active');
			
				var prev = 0;
				
				element.prevAll().each(function() {
					prev += ($(this).height() + 20);					
				});				
				
        var add = (element.height() / 2);
        var offset = -(prev + add);
        
        this.dom.details.stop().animate({'margin-top' : offset}, 300, function() {
        		op.climbing = false;
        });        

				var base = this.dom.work.find('li.active');
        window.location.hash = base.attr('rel') + '/' + base.attr('id') + '/' + element.attr('rel');
        
    },
		preload : function(src, onload) {
				var image = new Image();
				$(image).attr('src', src).load(onload);
		},
		instructions : {
				show : function() {
						op.dom.instructions.stop().fadeIn(200);
						op.dom.details.removeClass('hide');				
				},
				hide : function() {
						op.dom.instructions.stop().fadeOut(200);
						op.dom.details.addClass('hide');
				}		
		}
};

op.load();