var Engine = {
    detect: function(){
        var UA = navigator.userAgent;
        this.isKHTML = /Konqueror|Safari|KHTML/.test(UA);
        this.isGecko = (/Gecko/.test(UA) && !this.isKHTML);
        this.isOpera = /Opera/.test(UA);
        this.isMSIE = (/MSIE/.test(UA) && !this.isOpera);
        this.isMSIE7 = this.isMSIE && !(/MSIE 6\./.test(UA) && !this.isOpera);
    }
}

Engine.detect();


var restPositions = {
    orange: {
        x: 95,
        y: 80
    },
    green: {
        x: 268,
        y: 0
    },
    purple: {
        x: 403,
        y: 113
    }
}	

var currentContent = '';

function initialBubble(id, x, y){
    $(id + '-bubble').setStyle({
        left: x + 'px',
        top: y + 'px'
    });
    new Effect.Scale(id + '-bubble', 100, Object.extend({
        beforeStart: function(effect){
            $(effect.element).setOpacity(0);
            $(effect.element).style.display = 'block';
            $$('#' + id + '-bubble p').each(function(p){
                p.hide()
            });
        },
        afterUpdate: function(effect){
            $(effect.element).setOpacity(effect.position);
        },
        scaleFrom: 0,
        scaleFromCenter: true,
        afterFinish: function(effect){
            $$('#' + id + '-bubble p').each(function(p){
                new Effect.Appear(p, {
                    duration: 0.4
                });
            });
        }
    }, arguments[3] ||
    {}));
}

function menuise(id, left, top, scale){
    new Effect.Morph(id + '-bubble', {
        style: {
            'left': left + 'px',
            'top': top + 'px',
            'width': $(id + '-bubble').getWidth()*scale/100 + 'px',
            'height': $(id + '-bubble').getHeight()*scale/100 + 'px'
        },
        beforeStart: function(effect){
            $$('#' + id + '-bubble p').each(function(p){
                p.hide()
            });
            Draggables.drags.each(function(b){
                if (['orange-bubble', 'green-bubble', 'purple-bubble'].indexOf(b.element.id) >= 0) 
                    b.destroy();
            });
            $$('.handle').each(function(h){
                h.setStyle({
                    display: 'none'
                });
            });
        }
		});
}

function unmenuise(id, left, top, width, height){
    new Effect.Morph(id + '-bubble', {
        style: {
            'left': left + 'px',
            'top': top + 'px',
            'width': width + 'px',
            'height': height + 'px'
        },
        afterFinish: function(effect){
            $$('.handle').each(function(h){
                h.setStyle({
                    display: ''
                });
            });
			$$('#' + id + '-bubble p').each(function(p){
				new Effect.Appear(p, {
					duration: 1
				});
			});
            ['orange', 'green', 'purple'].each(function(b){
				createDraggable(b + '-bubble', b + '-handle');
            });			
		}
    });
}

function createDraggable(id, handle) {
    new Draggable(id, {
        //revert: true,
        handle: handle,
		onEnd: function(el){
			switch (el.element.id) {
				case 'orange-bubble':
					restPositions.orange.x = el.element.offsetLeft;
					restPositions.orange.y = el.element.offsetTop;
					break;
					
				case 'green-bubble':
					restPositions.green.x = el.element.offsetLeft;
					restPositions.green.y = el.element.offsetTop;
					break;
					
				case 'purple-bubble':
					restPositions.purple.x = el.element.offsetLeft;
					restPositions.purple.y = el.element.offsetTop;
					break;
			}
		}
    });	
}

function doVisualsContent(){
    new Effect.toggle('contact-box', 'appear');
    menuise('orange', 0, 0, 40);
    menuise('green', 80, 0, 20);
    menuise('purple', 120, 0, 20);
    $('content-box').setStyle({
        top: '85px',
        left: '50px',
        height: '500px',
        width: '600px',
        display: 'none'
    });
    new Ajax.Updater('content-ajax', 'visuals-content.html', {
        method: 'get'
    });
    new Effect.toggle('content-box', 'appear', {
        delay: 1
    });
    currentContent = 'visuals';
}

function doWebsites(){
    new Effect.toggle('contact-box', 'appear');
    menuise('orange', 0, 0, 20);
    menuise('green', 40, 0, 40);
    menuise('purple', 120, 0, 20);
    $('content-box').setStyle({
        top: '85px',
        left: '50px',
        height: '500px',
        width: '600px',
        display: 'none'
    });
    new Ajax.Updater('content-ajax', 'websites-content.html', {
        method: 'get'
    });
    new Effect.toggle('content-box', 'appear', {
        delay: 1
    });
    currentContent = 'websites';
}

function doDevelopment(){
    new Effect.toggle('contact-box', 'appear');
    menuise('orange', 0, 0, 20);
    menuise('green', 40, 0, 20);
    menuise('purple', 80, 0, 40);
    $('content-box').setStyle({
        top: '85px',
        left: '50px',
        height: '500px',
        width: '600px',
        display: 'none'
    });
    new Ajax.Updater('content-ajax', 'development-content.html', {
        method: 'get'
    });
    new Effect.toggle('content-box', 'appear', {
        delay: 1
    });
    currentContent = 'development';
}

function restoreRestPositions(){
    new Effect.toggle('content-box', 'appear', {
        duration: 0.3
    });
    new Effect.toggle('contact-box', 'appear', {
        duration: 1
    });
    
    unmenuise('orange', restPositions.orange.x, restPositions.orange.y, 180, 180); //currentContent=='visuals'?40:20);
    unmenuise('green', restPositions.green.x, restPositions.green.y, 180, 180); // currentContent=='websites'?40:20);
    unmenuise('purple', restPositions.purple.x, restPositions.purple.y, 180, 180); // currentContent=='development'?40:20);
}

function createWhiteBox(id, options) {
	var ext;
	if (Engine.isMSIE && !Engine.isMSIE7)
		ext = '.gif';
	else
		ext = '.png';
		
	var	boxHtml = '<div id="' + id + '-box" ';
	boxHtml += options.style?'style="' + options.style + '"':'';
	boxHtml += '"><table cellpadding="0" cellspacing="0" border="0" width="100%">';	
	boxHtml += '<tr height="27" ';
	boxHtml += options.handle?'id="' + id + '-handle" ' + (options.draggable?'style="cursor: move"':''):'';
	boxHtml += '><td width="28" background="images/slices/topleft'+ext+'"></td><td background="images/slices/top'+ext+'"></td><td width="33" background="images/slices/topright'+ext+'"></td></tr>';
	boxHtml += '<tr height="83"><td width="28" background="images/slices/left'+ext+'"></td><td background="images/slices/middle'+ext+'">';
	boxHtml += options.closeButton?'<div id="'+id+'-close-button" onclick="' + options.closeAction + '" style="background-image:url(images/close.gif);cursor:pointer;float:right;height:19px;width:19px;"></div>':'';
	boxHtml += '<div id="'+id+'-ajax">&nbsp;</div>';
	//<p>For enquiries, contact me at<br/><a href="mailto:contact@vwd.co.za">contact@vwd.co.za</a><br/><a href="http://www.vwd.co.za">www.vwd.co.za</a></p>
	boxHtml += '</td><td width="33" background="images/slices/right'+ext+'"></td></tr>';
	boxHtml += '<tr height="27"><td width="28" background="images/slices/bottomleft'+ext+'"></td><td background="images/slices/bottom'+ext+'"></td><td width="33" background="images/slices/bottomright'+ext+'"></td></tr>';
	boxHtml += '</table></div>';

	document.write(boxHtml);
	
	if (options.draggable) createDraggable(id + '-box', id + 'handle');
	if (options.onLoad) options.onLoad();
}