/*Copyright Daniel Davis, 2008. Do not copy any code, files or content without written permission. Contact daniel@nzarchitecture.com for information*/
var Page = new Class({

	initialize: function(){
    	this.createBoxes();
    	this.createLightBox();
    	this.stopLinks();
    	this.contact();
		this.createSort();
    },
    
    createBoxes: function(){
    	var menuWrapper = $$('.box');
		this.boxes = [];
		for (i=0; i < menuWrapper.length; i++)
		{
			var box = menuWrapper[i];
			var parent = box.getParent('div');
			var parentId = parent.getProperty('id');
			
			this.boxes[parentId] = new Box(parentId);
		}
    },
    
    createLightBox: function(){
    	this.lightbox = new Lightbox();
    },
	
	createSort: function(){
    	this.sorter = new Sort();
    },
    
    stopLinks: function(){
		$$("a.lightbox").each(function(el){
			el.addEvent('click', function(event){
    			event.preventDefault();
			});
    	});
		$$("a.turnoff").each(function(el){
			el.addEvent('click', function(event){
    			event.preventDefault();
			});
    	});
	},
	
	/*handles roll over for contact, changes colour and text*/
	contact: function(){
		var blog = $('contact').getFirst('h1').getFirst('a');
		blog.addEvent('mouseenter', function(){
			blog.set('text', 'Blog');
			blog.setStyle('color', '#d60000');
		});
		blog.addEvent('mouseleave', function(){
			blog.set('text', 'Blog');
			blog.setStyle('color', 'black');
		});
		
		var email = $('contact').getFirst('h2').getFirst('a');
		email.addEvent('mouseenter', function(){
			email.set('text', 'daniel@nzarchitecture.com');
			email.setStyle('color', '#d60000');
		});
		email.addEvent('mouseleave', function(){
			email.set('text', 'Email');
			email.setStyle('color', 'black');
		});
		
		/*var cv = $('contact').getFirst('h2').getFirst('a');
		cv.addEvent('mouseenter', function(){
			cv.set('text', 'Download');
			cv.setStyle('color', '#d60000');
		});
		cv.addEvent('mouseleave', function(){
			cv.set('text', 'Curriculum Vitae');
			cv.setStyle('color', 'black');
		});*/
	},
	
	
	/*execut on box click, brings up lightbox and enlarges box*/
	boxClick: function(id){
		if(p.boxes[id].state != 3){
    		p.boxes[id].stateClick();
    		p.lightbox.create(p.boxes[id].url);
    		this.on = id;
    	}else if(p.boxes[id].state == 3){
    		this.lightBoxClick();
    	}
	}, 
	
	lightBoxClick: function(){/*closes lightbox*/
		p.boxes[this.on].stateNormal();
    	p.lightbox.remove();
    	this.on = null;
	}
});


var Box = new Class({
    initialize: function(id){
    	this.id = id;
    	this.state = '1';
    	
    	this.p = $(this.id);//parent
    	this.b = this.p.getFirst('.box');//box
    	this.t = this.b.getFirst('.text');
		this.m = this.b.getFirst('.more');
		this.i = this.b.getFirst('.image');
		this.ii = this.i.getFirst('a').getFirst('img');
    	
    	this.effectBox = new Fx.Morph(this.b, {'duration': 300, 'wait': false, 'transition': Fx.Transitions.Quad.easeOut});
    	this.effectPBox = new Fx.Morph(this.p, {'duration': 300, 'wait': false, 'transition': Fx.Transitions.Quad.easeOut});
    	this.effectText = new Fx.Morph(this.t, {'duration': 200, 'wait': false, 'transition': Fx.Transitions.Quad.easeOut});
		this.effectMore = new Fx.Morph(this.m, {'duration': 200, 'wait': false, 'transition': Fx.Transitions.Quad.easeOut});
		this.effectImage = new Fx.Morph(this.ii, {'duration': 200, 'wait': false, 'transition': Fx.Transitions.Quad.easeOut});
		this.t.setStyle('opacity', '0');
		this.m.setStyle('opacity', '0');
		this.ii.setStyle('opacity', '1');
    	
    	this.place = '.' + this.p.getProperty('class');
    	
    	this.url = this.i.getFirst('a').getProperty('href');
    	
    	$(id).addEvent('mouseenter', function(){p.boxes[id].setState(2);});
    	$(id).addEvent('mouseleave', function(){p.boxes[id].setState(1);});
    	$(id).addEvent('click', function(){p.boxClick(id);});
    },
    
    
    move: function(x, y){
    	var cl = '.b_p' + x + '_' + y;
    	this.effectPBox.start(cl);
    	this.place = cl;
    },
    
    setState: function(state){
    	if(this.state == 1 && state == 2){
    		this.stateOver();
    	}else if(this.state == 2 && state == 1){
    		this.stateNormal();
    	}
    },
    
    stateNormal: function(){
    	this.effectBox.start('.box');
    	this.effectPBox.start(this.place);
    	this.effectText.start({'opacity': 0});
		this.effectMore.start({'opacity': 0});
		this.effectImage.start({'opacity': 1});
		this.b.setStyle('z-index', '1');
		this.p.setStyle('z-index', '1');
    	this.state = 1;
    },
    
    stateOver: function(){
    	this.effectBox.start('.boxOver');
    	this.effectText.start({'opacity': 1});
		this.effectMore.start({'opacity': 1});
		this.b.setStyle('z-index', '2');
		this.p.setStyle('z-index', '2');
    	this.state = 2;
    },
    
    stateClick: function(){
    	this.effectBox.start('.boxClick');
    	this.effectPBox.start('.b_p_clicked');
    	this.effectImage.start({'opacity': 0});
		this.t.setStyle('opacity', '0');
		this.m.setStyle('opacity', '0');
    	this.state = 3;
    }
});

var Lightbox = new Class({
    initialize: function(){
        this.speedIn = 400;
        this.speedOut = 250;
        this.opacity = 0.6;
		
		new Element('div').setProperty('id', 'ajaxcont').injectInside(document.body);
		new Element('div').setProperty('id', 'ajaxpre').injectInside($('ajaxcont'));
		new Element('div').setProperty('id', 'ajax').injectInside($('ajaxpre'));
		$("ajax").innerHTML += "<div id='close'>Close</div>";
		$('ajaxcont').setStyle('visibility', 'hidden');
		new IFrame({
 			src: '',
	
			id: 'myIframe',
 
    		styles: {
				width: 960,
				height: 480
			}
 		}).setProperty('frameborder', '0').injectInside($('ajax'));
		
    },
    
    create: function(url){
    	if (!$("TB_overlay")) {
			url = url + '&frame=true';
			new Element('div').setProperty('id', 'TB_overlay').injectInside(document.body);
			new IFrame('myIframe', {src: url});
			$('TB_overlay').setOpacity(0);
			$('TB_overlay').set('tween', {
            	duration: this.speedIn,
				onComplete: function(){
					$('ajaxcont').setStyle('visibility', 'visible');
					//$('ajax').setOpacity(1);
				}
        	});
        	$('TB_overlay').tween('opacity', 0, this.opacity);
        	
        	$("TB_overlay").addEvent('click', function(){p.lightBoxClick();});
			$("ajaxcont").addEvent('click', function(){p.lightBoxClick();});
        	
        	document.onkeyup = function(event){//on escape, close
       		var event = new Event(event);
        		if (event.code == 27) { // close
           			p.lightBoxClick();
        		}
    		}

		}
    },
    
    remove: function(){
    	document.onkeyup = null;
		//$('iframe').dispose();
    	$('ajaxcont').setStyle('visibility', 'hidden');
		new IFrame('myIframe', {src: ''});
    	if ($("TB_overlay")) {
			$('TB_overlay').set('tween', {
				duration: 250,
				onComplete: function(){
					$('TB_overlay').dispose();
				}
			});
			$('TB_overlay').tween('opacity', 0.6, 0);
		}
    }
});

var Sort = new Class({
					 
	initialize: function(){
		$('sColour').addEvent('click', function(){p.sorter.moveBoxes('colour');});
		$('sDate').addEvent('click', function(){p.sorter.moveBoxes('date');});
		$('sTitle').addEvent('click', function(){p.sorter.moveBoxes('title');});
		$('sPopularity').addEvent('click', function(){p.sorter.moveBoxes('popularity');});
		$('sSubject').addEvent('click', function(){p.sorter.moveBoxes('subject');});
		$('sDate').setStyle('color', '#d60000');//assumes date highlighted
	},
	
	moveBoxes: function(id) {
		$('sColour').setStyle('color', 'black');//resets the color
		$('sDate').setStyle('color', 'black');
		$('sTitle').setStyle('color', 'black');
		$('sPopularity').setStyle('color', 'black');
		$('sSubject').setStyle('color', 'black');
		if(id == "colour") {array = colour;$('sColour').setStyle('color', '#d60000');}//sets array and button color
		if(id == "date") {array = date;$('sDate').setStyle('color', '#d60000');}
		if(id == "title") {array = title;$('sTitle').setStyle('color', '#d60000');}
		if(id == "popularity") {array = popularity;$('sPopularity').setStyle('color', '#d60000');}
		if(id == "subject") {array = subject;$('sSubject').setStyle('color', '#d60000');}
		x=0;
		y=0;
		width = 6;
		t=0;
		tmax=6;
		for (i=0; i < array.length; i++)
		{
			if(array[i][0] == 0) {//it is a box
				if(x==0) {x=1;}//keep off first row
				box = "b" + array[i][1];
				p.boxes[box].move(x, y);
			}else if(array[i][0] == 1) {
				if(x != 0 ) {//make sure its on the first line
					x = 0;
					y++;
				}
				box = "t" + t;
				var cl = '.b_p' + x + '_' + y;
				$(box).getFirst('.ttext').set('text', array[i][1]);
				$(box).setStyle('visibility', 'visible');
				effectBox = new Fx.Morph($(box), {'duration': 300, 'wait': false, 'transition': Fx.Transitions.Quad.easeOut});
				effectBox.start(cl);
				t++;
			}
			x++;
			if (x == 6) {
				y++;
				x=0;
			}
		}
		
		while(t<tmax) {
			box = "t" + t;
			$(box).setStyle('visibility', 'hidden');
			t++;
		}
	}
});

siteStart = function(){
    p = new Page();
};
window.addEvent('domready', siteStart);