var clientActive = campActive = imageActive = 0;

var clientDetail = function(id) {
    var clientInfo = '<h3>'+clientDB[id]['name']+'</h3>'+
                     '<p><strong>Descrição:</strong> '+clientDB[id]['description']+'</p>';
    $('#clientDesc').html(clientInfo);
    $('#clientLogo'+clientActive).removeClass('active');
    $('#clientLogo'+id).addClass('active');
    clientActive = id;
    showCampaign(id);
}

var showCampaign = function(id) {
    if (clientDB[id]['campaign'][0]['thumb'] != '') {
        var campaignHTML = '';
        for (key in clientDB[id]['campaign']) {
            campaignHTML += '<li id="campImage' + key + '"><a href="javascript:showImage(' + id + ',' + key + ')"><img src="_NovoSite/' + clientDB[id]['campaign'][key]['thumb'] + '"/></a></li>';
        }
        $('#clientCamp ul').html(campaignHTML);
        showImage(id, 0);
        showCampInfo(id, 0);
        $('#clientCamp').show();
        $('#clientImages').show();
        $('#clientInfo').show();
    }
    else {
        $('#clientCamp').hide();
        $('#clientImages').hide();
        $('#clientInfo').hide();
    }
}

var showImage = function(id,camp) {
    var campImages = clientDB[id]['campaign'][camp]['image'];
    var imagesHTML = '<div id="campImage"><img src="_NovoSite/'+campImages[0]+'"/></div><ul>';
    for(key in campImages) {
        var imageActive = (key == 0) ? ' class="active"' : '';
        imagesHTML += '<li id="imageThumb'+key+'"><a href="javascript:changeImage('+id+','+camp+','+key+')"><img src="_NovoSite/'+campImages[key]+'"/></a></li>';
    }
    $('#clientImages').html(imagesHTML+'</ul>');
    $('#campImage'+campActive).removeClass('active');
    $('#campImage'+camp).addClass('active');
    campActive = camp;
    changeImage(id,camp,0);
    showCampInfo(id,camp);
}

var changeImage = function(id,camp,img) {
    $('#campImage').html('<img src="_NovoSite/'+clientDB[id]['campaign'][camp]['image'][img]+'"/>');
    $('#imageThumb'+imageActive).removeClass('active');
    $('#imageThumb'+img).addClass('active');
    imageActive = img;
}

var showCampInfo = function(id,camp) {
    var campInfo = clientDB[id]['campaign'][camp]['info'];
    var campInfoHTML = '<ul>';
    for(key in campInfo) {
        campInfoHTML += '<li><strong>'+key+':</strong> '+campInfo[key]+'</li>';
    }
    $('#clientInfo').html(campInfoHTML+'</ul>');
}

var counter = 1;
var clientLength = clientDB.length;
var clientLogoList = '<ul>';
for(key in clientDB) {
    clientLogoList += '<li id="clientLogo'+key+'"><a href="javascript:clientDetail('+key+')"><img src="_NovoSite/'+clientDB[key]['logo']+'" alt=""/></a></li>';
    if(counter%18 == 0 && counter < clientLength) {
        clientLogoList += '</ul><ul>';
    }
    if(counter == clientLength) {
        clientLogoList += '</ul>';
    }
    counter++;
}

var animeSteps = 0;
var animateValue = ($.browser.msie && parseInt($.browser.version)< 7) ? '540px': '535px';
var showNav = function() {
    if(animeSteps == $('#clientList ul').length) {
        $('#nextClient').show();
        $('#prevClient').hide();
    }
    else if(animeSteps > 1 && animeSteps < $('#clientList ul').length) {
        $('#nextClient').show();
        $('#prevClient').show();
    }
    else if(animeSteps == 1) {
        $('#nextClient').hide();
        $('#prevClient').show();
    }
}

/* Dom Ready */
$(document).ready(function(){

/* Show Client Logo List */
    $('#clientList').html(clientLogoList);
    clientDetail(clientActive);

/* Previous and Next Animation */
    if($('#clientList ul').length > 1) {
        $('#navBar').show();
        animeSteps = $('#clientList ul').length;
    }

    $('#nextClient').click(function() {
        $('#clientList').animate({marginLeft:'-='+animateValue},1500);
        animeSteps--;
        showNav();
    });

    $('#prevClient').click(function() {
        $('#clientList').animate({marginLeft:'+='+animateValue},1500);
        animeSteps++;
        showNav();
    });
});