var WorkGallery = Class.create({
	
    initialize : function(json)
	{
        this.json = json;
		this.preloader = 'preloader';
		this.work = 'work-nav';
		this.nav_container = 'work-nav';
		this.img_container = 'work-page';
		this.duration = '0.5';
        this.start();
		$('work-page').hide();
		this.image = new Element('img');
		$('work-page').insert(this.image);
	},
	
	start : function()
	{	
		this.generate_top_menu(0);
		this.populate_side_menu();
		this.get_project(0, 0);
	},
	
	populate_side_menu : function() {
		var ul = new Element('ul');
		var def = true;
		ul.id = 'work-nav';
		$$('#nav ul li')[0].insert(ul);
		for(var j = 0; j < this.json.length; j++) {
			var a = new Element('a').update(this.json[j]['Work']['title']);
			a.id = j;
			a.href= '#nav-'+j;
			if (def==true) { a.addClassName('act'); def=false; }
			
			var thisObj = this;
			
			a.onclick = function() {
				thisObj.generate_top_menu(this.id);
				thisObj.get_project(this.id,0);
				
				$$('#nav li').each(function(li){
					var a = li.getElementsBySelector('a')[0];
					if(a.hasClassName('act')) {
						a.removeClassName('act');
					}
				});
				this.addClassName('act');
			}
			
			var list = new Element('li').insert(a);
			$$('#nav ul li ul')[0].insert(list);
			
			
		}
	},
	
	generate_top_menu : function(id) {
		
		$$('#work-nav-top h3')[0].update();
		$$('#work-nav-top ul')[0].update();
		
		var def = true;
		var thisObj = this;
		
        for(var i = 0; i < this.json[id]['WorkItem'].length; i++) {
			
			var linky = new Element('a');
			linky.id = i;
			linky.href = '#';
			if (def==true) { linky.addClassName('act'); def=false; }
			
			linky.onclick = function() {
				thisObj.get_project(id, this.id);
			
				$$('ul.items li').each(function(li){
					var a = li.getElementsBySelector('a')[0];
					if(a.hasClassName('act')) {
						a.removeClassName('act');
					}
				});
				this.addClassName('act');
			
			}
			
			num = i + 1;
            var li = new Element('li').insert(linky.update(num));
            $$('#work-nav-top ul')[0].insert(li);
		}
		
		$$('#work-nav-top h3')[0].insert().update(this.json[id]['Work']['title']);

	},
	
	get_project : function(menu_id, p_id) {
		$$('#work-nav-top p')[0].update();
		query = this.json[menu_id]['WorkItem'][p_id]['title'];
		$$('#work-nav-top p')[0].insert().update(query);
		this.change_image(menu_id, p_id);
	},
	
	change_image : function(menu, id) {
		$('work-page').hide();
		$(this.preloader).show();
		this.preload_image(menu ,this.json[menu]['WorkItem'][id]['image']);
	},
	
	preload_image : function(menu, image) {
		var ref = this;
		var loader = new Image();
		loader.onload = function() {
			ref.image.src = this.src;
			ref.fade('work-page');
		};
		loader.src = '/img/works/'+this.json[menu]['Work']['id']+'/'+image;
	},
	
	fade : function(element) {
		var obj = this;
		setTimeout(function() {
			$(obj.preloader).hide();
			new Effect.Appear(element, { duration: obj.duration });
		} ,1000);
	}
	
});