﻿window.addEvent('domready', function()
{
    initialise();
});


function initialise()
{
    handleContextMenu();
    handleFunctionMenu();    
    handleIncoming();
}

function handleContextMenu() {
	handleMenuButton('li1', 'content01');
	handleMenuButton('li2', 'content02');
	handleMenuButton('li3', 'content03');
	handleMenuButton('li4', 'content04');
	handleMenuButton('li5', 'content05');
	handleMenuButton('li6', 'content06');
}

function handleFunctionMenu()
{
    handleClick('b1', 'content02', 'img1');
    handleClick('b2', 'content02', 'img2');
    handleClick('b3', 'content02', 'img3');
    handleClick('b4', 'content02', 'img4');
	
	handleClick('b1', 'txt02', 'text');
    handleClick('b2', 'txt02', 'text2');
	handleClick('b3', 'txt02', 'text3');
	handleClick('b4', 'txt02', 'text4');

    handleClick('c1', 'content03', 'img1');
    handleClick('c2', 'content03', 'img2');
    handleClick('c3', 'content03', 'img3');
    handleClick('c4', 'content03', 'img4');
	
	handleClick('c1', 'txt03', 'text');
    handleClick('c2', 'txt03', 'text2');
	handleClick('c3', 'txt03', 'text3');
	handleClick('c4', 'txt03', 'text4');	

    handleClick('d1', 'content04', 'img1');
    handleClick('d2', 'content04', 'img2');
    handleClick('d3', 'content04', 'img3');
    handleClick('d4', 'content04', 'img4');	

    handleClick('d1', 'txt04', 'text');
    handleClick('d2', 'txt04', 'text2');
    handleClick('d3', 'txt04', 'text3');
    handleClick('d4', 'txt04', 'text4');

    handleClick('e1', 'content05', 'img1');
    handleClick('e2', 'content05', 'img2');
    handleClick('e3', 'content05', 'img3');
    handleClick('e4', 'content05', 'img4');    
	
    handleClick('e1', 'txt05', 'text');
    handleClick('e2', 'txt05', 'text2');
    handleClick('e3', 'txt05', 'text3');
    handleClick('e4', 'txt05', 'text4');	
}

function resetAll()
{
    removeClasses('li1');
    removeClasses('li2');
    removeClasses('li3');
    removeClasses('li4');
    removeClasses('li5');
    removeClasses('li6');

    setInvis('content01');    
    setInvis('content02');    
    setInvis('content03');    
    setInvis('content04');    
    setInvis('content05');    
    
    removeClasses('content01');    
    removeClasses('content02');    
    removeClasses('content03');    
    removeClasses('content04');    
    removeClasses('content05');
   }

function handleIncoming() {
	var inc = queryString('id');

	switch (inc) {
		case '2':
			resetAll();
			$('li2').addClass('alt');
			$('content02').addClass('img1');
			setVis($('content02'));
			break;
		case '3':
			resetAll();
			$('li3').addClass('alt');
			$('content03').addClass('img1');
			setVis($('content03'));
			break;
		case '4':
			resetAll();
			$('li4').addClass('alt');
			$('content04').addClass('img1');
			setVis($('content04'));
			break;
		case '5':
			resetAll();
			$('li5').addClass('alt');
			$('content05').addClass('img1');
			setVis($('content05'));
			break;
		default:
	}
}
   
function handleClick(bt, el, cls) {
   	var btn = $(bt);
   	var myEl = $(el);

   	btn.addEvents({
   		click: function() {
   			var currCls = myEl.className;
   			myEl.removeClass(currCls);

   			myEl.addClass(cls);
   		}
   	});
}

function queryString(val) {
	var q = unescape(location.search.substr(1)).split('&');

	for (var i = 0; i < q.length; i++) {
		var t = q[i].split('=');
		if (t[0].toLowerCase() == val.toLowerCase()) return t[1];
	}
	return '';
}

function removeClasses(el)
{
    var myEl = $(el);
    
    if(myEl != null)
    {
        var clss = myEl.className;
        myEl.removeClass(clss)
    }
}

function setVis(el)
{
    var myEl = $(el);
    
    if(myEl != null)
    {
        myFx = new Fx.Morph(myEl);
        myFx.start({'opacity' : 1});
    }
}

function setInvis(el)
{
    var myEl = $(el);
    
    if(myEl != null)
    {
        myFx = new Fx.Morph(myEl);
        myFx.set({'opacity' : 0});
    }
}

function handleMenuButton(el, content)
{
    var myEl = $(el);
    var myEl2 = $(content);
    
    myFx = new Fx.Morph(myEl);
        myEl.addEvents({
	    mouseenter: function ()
	        {
	            myEl.addClass('selected');
            },
	    mouseleave: function ()
	        {
	            myEl.removeClass('selected');
            },
	    click: function ()
	        {
	            resetAll();
	            myEl.addClass('alt');
	            if(myEl2 != null)
	            {
	                myEl2.addClass('img1');
	                setVis(myEl2);
	            }	            
            }
   	});  
}