var kShojiSlideDur = 250;
var kShojiPauseDur = 500;
var kAutoPilotDur = 1000 * 10;
var doAnim = true;

if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
    doAnim = false;
}


//// Shoji Manager ////

var ShojiManager = new Class({
    Implements: [Options, Events],
    options: {
        leftDoor:null,
        rightDoor:null
    }, 
    initialize: function (options) {
        this.setOptions(options);
        var animProp = {duration: kShojiSlideDur, transition: 'cubic:out'}
	    this.options.leftDoor.set('tween', animProp);
	    this.options.rightDoor.set('tween', animProp);
    },
    _slide: function (isOpen) {
        this.options.leftDoor.tween('left', (isOpen ? -390 : 0));
        this.options.rightDoor.tween('left', (isOpen ? 780 : 390));
    },
    open: function () {
        this._slide(true);
    },
    close: function () {
        this._slide(false);
    }
});

//// Page Manager ////

var PageManager = new Class({
    Implements: [Options, Events],
    options: {
        shojiMgr: null,
        buttons: null,
        slides: null
    },
    lastmode: -1,
    mode: -1,
    timeout: null,
    timeout2: null,
    
    initialize: function (options) {
        this.setOptions(options);
        var self = this;
        this.options.buttons.each(function(btn, idx) {
            btn.addEvent('click', function (event) {self.setMode(idx);});
        });
        var animProp = {duration: kShojiPauseDur, transition: 'linear'}
        this.options.slides.each( function(sld, idx) {
        	sld.set('tween', animProp);
        	//if (idx!=0)
	        	sld.fade('hide');
        });
        var animProp2 = {duration: 500, transition: 'expo:out'}
        $('face-kenichi').set('tween', animProp2);
        $('face-tom').set('tween', animProp2);
    },
    
    setMode: function (newMode) {
	    // cancel old timer
        if (this.timeout != null) {
            $clear(this.timeout);
            this.timeout = null;
        }
        
        if (this.timeout2 != null) {
            $clear(this.timeout2);
        }
        
        this.options.shojiMgr.close();
        this.timeout = this._setMode2.delay(kShojiSlideDur, this, [newMode]);
        
        if (doAnim && this.mode == 0)
            $('badge-bg').removeClass('animate2');
    },
    
    // after closing
    _setMode2: function (newMode) {
        // if already in some mode
        if (this.mode>-1) {
            this.options.buttons[this.mode].removeClass('active');
	        this.options.slides[this.mode].fade(0);
        }

        this.lastmode = this.mode;
        this.mode = newMode;
        // hide add ons
        this.options.slides[this.mode].getElements('.addon').fade('hide');
        this.options.slides[this.mode].fade(1);
        this.options.buttons[this.mode].addClass('active');
        this.timeout = this._setMode3.delay(kShojiPauseDur, this);
        
        if (doAnim && this.lastmode == 0)
            $('badge-bg').removeClass('animate');
        if (doAnim && this.mode == 0)
        	$('badge-bg').addClass('animate2');
    },
    
    // after pausing
    _setMode3: function () {
        if (this.lastmode > -1)
            this.options.slides[this.lastmode].getElements('.addon').fade('hide');
            
        if (doAnim && this.mode == 0)
            $('badge-bg').addClass('animate');

        this.options.shojiMgr.open();
        this.timeout = this._setMode4.delay(kShojiSlideDur, this);
    },
    
    numrotations:0,
    
    // after opening
    _setMode4: function () {
    	switch (this.mode) {
    		case 1: // overview
				var myFx = new Fx.Tween($('slide-overview-text1'), {property:'opacity', duration: 250});
				myFx.start(0, 1).chain(
					function () { $('slide-overview-text2').fade(1); this.start(1); },
					function () { $('slide-overview-text3').fade(1); this.start(1); },
					function () { $('slide-overview-text4').fade(1); }
				);
    			break;
    		
    		case 2: // screen shot
    		case 3:
    		//case 4:
//    		case 5:
    			var el = $('screenshot' + (this.mode-1))
				el.set('styles', {'width':0, 'height':0});
//				el.set('width', 1);
//				el.set('height', 1);
				el.fade('show');
				var myFx = new Fx.Morph(el, {transition: 'quad:out',duration: 250, fps:30});
				myFx.start({'width': 0, 'height': 0, 'opacity':0}).chain(
					function () {this.start({'width': 624 * 1.03, 'height': 487 * 1.03, 'opacity':1});},
//					function () {this.start({'width': 560, 'height': 429});},quad:out
					function () {
						var myFx = new Fx.Morph(el, {transition: 'quad:out',duration: 150, fps:30});
						myFx.start({'width': 624, 'height': 487});
					}
					//0.764
				);
	    		break;
	    	case 5: // about
	    	{
	    		var faceTom = $('face-tom');
	    		var faceKenichi = $('face-kenichi');
	    		faceTom.set('styles', {'left':-286});
	    		faceKenichi.set('styles', {'left':780});
	    		faceTom.fade('show');
	    		faceKenichi.fade('show');
				faceTom.tween('left', 0);
				faceKenichi.tween('left', 494);
	    		break;
	    	}
    	}
//    	if (this.mode != 5)
//	        this.timeout2 = this._autoPilot.delay(kAutoPilotDur * (this.mode == 1 ? 3 : 1), this);
    }, 
    
    _autoPilot: function () {
    	this.setMode((this.mode+1)%5);
    }
    
});


//// Main ////
var pageMgr = null;
window.addEvent('domready', function() {
    //$('content-body').style.visibility='hidden';
    
    var shojiMgr = new ShojiManager({
        leftDoor: $('shoji-left'),
        rightDoor: $('shoji-right')
    });
    
    pageMgr = new PageManager({
        shojiMgr: shojiMgr,
        buttons: [
            $('content-bottom-pool'),
            $('content-bottom-overview'),
            $('content-bottom-ss1'),
            $('content-bottom-ss2'),
            $('content-bottom-ss3'),
            $('header-about')
        ], 
            //$('content-bottom-ss4'),
        slides: [
        	$('slide-top'),
        	$('slide-overview'),
        	$('slide-ss1'),
        	$('slide-ss2'),
        	$('slide-ss3'),
        	$('slide-about')
        ]
        	//$('slide-ss4'),
    });
    /*
    $('message-input').addEvent('focus', function (event) {
        if ($('message-input').get('value') == 'Enter Your Message') {
            $('message-input').set('value', '');
        }
    });
    
    $('message-input').addEvent('blur', function (event) {
        if ($('message-input').get('value') == '') {
            $('message-input').set('value', 'Enter Your Message');
        }
    });
    
    $('message-form').addEvent('submit', function (event) {
        
		event.stop();
		
        if ($('message-input').get('value').length<1 ||
            $('message-input').get('value') == 'Enter Your Message') {
            alert('Please type something.');
            return;
        }
        
        if ($('message-input').get('value').length>99) {
            alert('Message is 100 letters max.');
            return;
        }
        
        $('message-submit').set('styles', {'cursor':'default'});
        $('message-submit').set('disabled', 'true');

        this.set('send', {onComplete: function(response) { 
            var data = JSON.decode(response);
			if (data.status == 1) {
			    alert("We've received your massage. Thank you.");
                $('message-input').set('value', '');
			    // window.location.href = "http://twitter.com/droppinginc";
			}
			if (data.status == 2) {
			    alert("We've encountered an error. Sorry for the inconvinience.");
			    // alert(data.msg);
			}
		    $('message-submit').set('disabled', 'false');
            $('message-submit').set('styles', {'cursor':'pointer'});
		}});
		this.send();
    });
    */
    
    window.addEvent('load', function () {
        //$('content-body').style.visibility='visible';
        pageMgr.setMode(0);
        try {
        pageTracker = _gat._getTracker("UA-3094953-3");
        pageTracker._trackPageview();
        } catch(err) {}
    });
});

var pageTracker = null;