//MOOTOOLS EFFECTS
window.addEvent('domready', function() {

	// Fx.Scroll IE WORKAROUND
	// A workaround for IE issues in mootools 1.2.1
	// - Recreates FX.Scroll() but utilises 1.2.0's getPosition/getOffset routines.
	Fx.Scroll2 = new Class({
	 
	    'Extends': Fx.Scroll,
	 
	    'styleString': Element.getComputedStyle,
	    'styleNumber': function(element, style) {
	        return this.styleString(element, style).toInt() || 0;
	    },
	    'borderBox': function(element) {
	        return this.styleString(element, '-moz-box-sizing') == 'border-box';
	    },
	    'topBorder': function(element) {
	        return this.styleNumber(element, 'border-top-width');
	    },
	    'leftBorder': function(element) {
	        return this.styleNumber(element, 'border-left-width');
	    },
	    'isBody': function(element) {
	        return (/^(?:body|html)$/i).test(element.tagName);
	    }, 
	    'toElement': function(el) {
	        var offset   = {x: 0, y: 0};
	        var element  = $(el);
	       
	        if (this.isBody(element)) {
	            return offset;
	        }
	        var scroll = element.getScrolls();
	               
	        while (element && !this.isBody(element)){
	            offset.x += element.offsetLeft;
	            offset.y += element.offsetTop;
	           
	            if (Browser.Engine.gecko){
	                if (!this.borderBox(element)){
	                    offset.x += this.leftBorder(element);
	                    offset.y += this.topBorder(element);
	                }
	                var parent = element.parentNode;
	                if (parent && this.styleString(parent, 'overflow') != 'visible'){
	                    offset.x += this.leftBorder(parent);
	                    offset.y += this.topBorder(parent);
	                }
	            } else if (Browser.Engine.trident || Browser.Engine.webkit){
	                offset.x += this.leftBorder(element);
	                offset.y += this.topBorder(element);
	            }
	 
	            element = element.offsetParent;
	            if (Browser.Engine.trident) {
	                while (element && !element.currentStyle.hasLayout) {
	                    element = element.offsetParent;
	                }
	            }
	        }
	        if (Browser.Engine.gecko && !this.borderBox(element)){
	            offset.x -= this.leftBorder(element);
	            offset.y -= this.topBorder(element);
	        }
	       
	        var relative = this.element;
	        var relativePosition = (relative && (relative = $(relative))) ? relative.getPosition() : {x: 0, y: 0};
	        var position = {x: offset.x - scroll.x, y: offset.y - scroll.y};
	       
	        return this.start(position.x - relativePosition.x, position.y - relativePosition.y);
	    }
	});
 
 
	//INTRO FADE
	var el = $('intro_table');
	$('intro_table').addEvent('click', el.fade.bind(el, [0]));
	
	//SMOOTH SCROLL SETUP
    var scrollFx = new Fx.Scroll2('catbodies');
     
    $('menu').getElements('a').addEvent('click',function(e){
        e.stop();
        var name = this.get('href').split('#')[1];
        var target = $(name);
        if($defined(target)){
            scrollFx.toElement.delay(600, scrollFx, target);
        }
    });

	//COLOR & SIZE CHANGES
	var colorBg = $('body');
	var btmBg = $('bottomdivbg')
	
	var colorChange = new Fx.Tween(colorBg, {duration: 500});
	var bottomcolorChange = new Fx.Tween(btmBg, {duration: 500});

	var morph = new Fx.Morph('catbodies', {duration: 500});

		//3D TAB
		$('threed').addEvent('click', function() {
			colorChange.start('background-color', '#9a8bb1');
				morph.start({
					height: '500px'
				});
			bottomcolorChange.start('background-color', '#9a8bb1')
		});
	
	
		//2D TAB
		$('twod').addEvent('click', function() {
			colorChange.start('background-color', '#8b91b9');
				morph.start({
					height: '525px'
				});
			bottomcolorChange.start('background-color', '#8b91b9')
		});
	
		//ANIMATION TAB
		$('anime').addEvent('click', function() {
			colorChange.start('background-color', '#a3bbd9');
				morph.start({
					height: '500px'
				});
			bottomcolorChange.start('background-color', '#a3bbd9')
		});
	
		//PROJECT TAB
		$('proj').addEvent('click', function() {
			colorChange.start('background-color', '#a6c5c7');
			if (Browser.Engine.trident){
				morph.start({
					height: '925px'
				});
			}
			else {
				morph.start({
					height: '925px'
					});
			 }
			bottomcolorChange.start('background-color', '#a6c5c7')
		});
	
		//INFO TAB
		$('info').addEvent('click', function() {
			colorChange.start('background-color', '#eab676');
				morph.start({
					height: '500px'
				});
			bottomcolorChange.start('background-color', '#eab676')
		});

});


//SHADOWBOX
Shadowbox.loadSkin('classic', '/js/sbskin');