document.observe("dom:loaded", init);

	function setThumbOpacity() {
	    var ElsA = $A($$('img.thumb.on'));
        ElsA.each( function(El){ Element.setOpacity(El,0.4) });
    }

    function pickImage(event)  {
        var loc = event.element();
        if ('IMG' == loc.tagName && !loc.hasClassName('on')) showImage(loc);
    }

    function showImage(loc){
    
        // get thumb ID number
        var i = (loc.id).slice(1);
    
        // reset current on
    
        var ElsA = $A($$('img.thumb.on'));
        ElsA.each( function(El){ Element.setOpacity(El,1); Element.removeClassName(El, 'on') });

        // switch

        loc.setOpacity(0.25);
        loc.addClassName('on');
        
        i--;

        var img = $('image').down();
        iSrc = '../images/images/'+works[i][1]+'.jpg';

        img.hide();		 

        img.src = iSrc;
        var w = works[i][2]/16;
        img.style.width=w+"em";
        var h = works[i][3]/16;
        img.style.height=h+"em";
        $('name').down().update(works[i][0]);
        $('details').update(works[i][4]);

        img.onload = function (){
            img.show();	
        }
    }

    function pickGroup(event)  {
        var loc = event.element();
        if ('LI' == loc.tagName && !loc.hasClassName('groupOn')) {
            
            // reset current on
            
		    var ElsA = $A($$('.thumbGroup'));
            ElsA.each(function(El){ El.hide(); });
            
		    var ElsA = $A($$('#imageNav li.groupOn'));
            ElsA.each(function(El){ El.removeClassName('groupOn') });
      
            // switch
      
            var i = (loc.id).slice(1);
            loc.addClassName('groupOn');
            var g = $('group'+i);
            g.show();
            
            // get default image
            
            var newImg = $('t'+defaultPic[i-1]);
            showImage(newImg);
            
        }
    }

    function noJS(){
        var Els = $$('.noJS');
        var ElsA = $A(Els);
        ElsA.each( function(El){ El.replace(El.innerHTML); });
    }

	function init() {

        noJS();

        $('imageNav').observe ('click', pickGroup)
        $('thumbs').observe ('click', pickImage)
		
        setThumbOpacity();

	}