if ( window.location.href.indexOf('werken') > 0 )
{
    $.getJSON('works.php', dataLoaded );
}

var project_data = {};
function dataLoaded( pData )
{
    project_data = pData;
    var clients = $('ul.clients').html('');
    var total_clients = 0;
    for( var i in pData.projects )
    {
        var client = $('<li class="disabled" rel="'+i+'"><a href="#">'+pData.projects[i].title+'</a></li>');
        client.data( 'project', pData.projects[i] );
        client.data( 'type', 'client' );
        client.data( 'related_to', pData.project_relations[i] );
        client.hover(
            function( elm ){
                highlightRelated( $(elm.currentTarget) );
            },
            function( elm ){
                if ( activeElement.context )
                    activeRelated( $('ul.'+activeElement.context+' li[rel="'+activeElement.name+'"]') );
            }
        );
        client.click( function( elm ){
            activeElement = {context: 'clients', name: $(elm.currentTarget).attr('rel')};
            activeRelated( $( this ) );
            showProject( activeElement.name );
            return false;
        } );
        clients.append( client );
        total_clients++;
    }

    var products = $('ul.worktypes').html('');
    for( var i in pData.product_relations )
    {
        var product = $('<li class="disabled" rel="'+i+'"><a href="#">'+i+'</a></li>');
        product.data( 'project', pData.projects[i] );
        product.data( 'type', 'product' );
        product.data( 'related_to', pData.product_relations[i] );
        product.hover(
            function( elm ){
                highlightRelated( $(elm.currentTarget) );
            },
            function( elm ){
                if ( activeElement.context )
                    activeRelated( $('ul.'+activeElement.context+' li[rel="'+activeElement.name+'"]') );
            }
        );
        product.click( function( elm ){
            activeElement = {context: 'worktypes', name: $(elm.currentTarget).attr('rel')};
            activeRelated( $( elm ) );
            showWorktypeProjects( activeElement.name );
            return false;
        } );
        products.append( product );
    }
    clients.find('li:eq('+Math.floor( Math.random() * total_clients ) + ')' ).click();
}

function highlightRelated( elm )
{
    var relations = elm.data('related_to');
    var context = $('ul.clients');
    if( elm.data('type') == 'client')
        context = $('ul.worktypes');
    //console.log( context.attr('class') );
    elm.parent().find('li').removeClass('selected');
    elm.removeClass( 'disabled' ).addClass('selected');
    $('li', context ).addClass('disabled').removeClass('selected');
    for( var j in relations )
    {
        $('li[rel="'+relations[j]+'"]', context ).removeClass('disabled');
    }
}
var activeElement = {context: null, name: null};
function activeRelated( elm )
{
    //console.log( elm.attr('rel') );
    elm.parent().find('li').addClass('disabled');
    highlightRelated( elm );
}


function showProject( pName )
{
    var specs = $('#portfolio_specs tbody').html('');
    for(var i in project_data.projects[pName].attrs )
        specs.append( $( '<tr><td><div>'+i+'</div></td><td>'+project_data.projects[pName].attrs[i]+'</td></tr>' ) );
    $('#portfolio_details h2').text( project_data.projects[pName].title );
    var products = $('#portfolio_products').html('');
    //products.append( '<li>'+project_data.projects[pName].title+' : </li>' );
    for(var i in project_data.projects[pName].products )
    {
        var product_link = null;
        if ( project_data.projects[pName].products[i].length == 1 )
        {
            var product = $( '<li><a href="#'+i+'_0">'+i+'</a></li><li> &bull; </li>' );
            products.append( product );
            product_link = product.find('a');
            product_link.data( 'product', project_data.projects[pName].products[i][0] );
            product_link.click(function(){
                $('#portfolio_image img').attr('src', 'uploads/'+$(this).data('product').img );
                $('#portfolio_products a').removeClass('disabled');
                $(this).addClass('disabled');
                return false;
            });
        } else {
            var str = '<li>'+i+' [';
            for( var j in project_data.projects[pName].products[i] )
            {
                str += '<a href="#'+i+'_'+j+'">'+(parseInt(j)+1)+'</a> -';
            }
            str = str.substr( 0, str.length - 2 ) + ' ]</li><li> &bull; </li>';
            products.append( str );
            for( j in project_data.projects[pName].products[i] )
            {
                product_link = products.find('a[href$="#'+i+'_'+j+'"]');
                product_link.data( 'product', project_data.projects[pName].products[i][j] );
                product_link.click(function(){
                    $('#portfolio_image img').attr('src', 'uploads/'+$(this).data('product').img );
                    $('#portfolio_products a').removeClass('disabled');
                    $(this).addClass('disabled');
                    return false;
                });
            }
        }
    }
    products.find('li:eq(0) a:first').click();
    products.find('li:last').remove();
}

function showWorktypeProjects( pName )
{
        /*
        var specs = $('#portfolio_specs tbody').html('');
        for(var i in project_data.projects[pName].attrs )
            specs.append( $( '<tr><td><div>'+i+'</div></td><td>'+project_data.projects[pName].attrs[i]+'</td></tr>' ) );*/
    var products = $('#portfolio_products').html('');
    //products.append( '<li>'+ pName +' : </li>' );
    $('#portfolio_details h2').text( pName );
    for(var i in project_data.projects )
    {
        var project = project_data.projects[i];
        if ( project.products[pName] == undefined ) continue;
        var projectProducts = project.products[pName];
        var product_link = null;
        if ( projectProducts.length == 1 )
        {
            var product = $( '<li><a href="#'+i+'_0">'+project.title+'</a></li><li> &bull; </li>' );
            products.append( product );
            product_link = product.find('a');
            product_link.data( 'project', project );
            product_link.data( 'product', projectProducts[0] );
            product_link.click(function(){
                $('#portfolio_image img').attr('src', 'uploads/'+$(this).data('product').img );
                $('#portfolio_products a').removeClass('disabled');
                $(this).addClass('disabled');
                var specs = $('#portfolio_specs tbody').html('');
                $('#portfolio_details h2').text( $(this).data('project').title );
                for(var i in $(this).data('project').attrs )
                    specs.append( $( '<tr><td><div>'+i+'</div></td><td>'+$(this).data('project').attrs[i]+'</td></tr>' ) );
                return false;
            });
        } else {
            var str = '<li>'+project.title+' [';
            for( var j in projectProducts )
            {
                str += '<a href="#'+project.title+'_'+j+'">'+(parseInt(j)+1)+'</a> -';
            }
            str = str.substr( 0, str.length - 2 ) + ' ]</li><li> &bull; </li>';
            products.append( str );
            for( j in projectProducts )
            {
                product_link = products.find('a[href$="#'+project.title+'_'+j+'"]');
                product_link.data( 'project', project );
                product_link.data( 'product', projectProducts[j] );
                product_link.click(function(){
                    $('#portfolio_image img').attr('src', 'uploads/'+$(this).data('product').img );
                    $('#portfolio_products a').removeClass('disabled');
                    $(this).addClass('disabled');
                    var specs = $('#portfolio_specs tbody').html('');
                    for(var i in $(this).data('project').attrs )
                        specs.append( $( '<tr><td><div>'+i+'</div></td><td>'+$(this).data('project').attrs[i]+'</td></tr>' ) );
                    return false;
                });
            }
        }
    }
    products.find('li:eq(0) a:first').click();
    products.find('li:last').remove();
}