$(document).ready(function() {


    $('#container').hide();
//    $('#container').show('slide', { direction: 'right'}, 500);
    $('#container').fadeIn(1700);


    var xmlDoc = loadXmlDoc('/resources/portfolio.xml');
    
    var arrSites = xmlDoc.getElementsByTagName('site');
    var numSites = arrSites.length;
    
    var arrGraphics = xmlDoc.getElementsByTagName('graphics');
    var numGraphics = arrGraphics.length;
    
    var numTotal = numSites + numGraphics;
    
    var item = 0;
    
    showFirstItem();
    
    $('#previous').click(function(event) {
        event.preventDefault();
        
        item--;
        if (item < 0) {
            item = numTotal - 1;
        }
        showItem(item, true, 'left');
        if (item == numTotal - 1) {
            switchToGraphics();
        } else if (item == numSites - 1) {
            switchToWebsites();
        }
    });
    
    $('#next').click(function(event) {
        event.preventDefault();
        
        item++;
        if (item > numTotal - 1) {
            item = 0;
        }
        showItem(item, true, 'right');
        if (item == 0) {
            switchToWebsites();
        } else if (item == numSites) {
            switchToGraphics();
        }
    });
    
    function showFirstItem() {
    	showItem(0, false, null);
    }

    function showItem(i, effect, fromDirection) {
        if (effect) {
//            $('#img_thumbnail').fadeOut('fast');
            $('#img_thumbnail').hide();
            $('#txt').hide();
        }

   	if (i < numSites) {
   	    var title = arrSites[i].getAttribute('title');
   	    var url = arrSites[i].getAttribute('url');
            $('#link_image').attr('href', arrSites[i].getAttribute('image'));
//            var description = 'Visit the site: &lt;a href=&quot;' + url + '&quot; target=&quot;_blank&quot; &gt;' + title + '&lt;/a&gt;';
            var description = 'Visit the site: <a class="caption_link" href="' + url + '" target="_blank">' + title + '</a>';
//            $('#link_image').attr('title', description);
            $('#link_image_caption').attr('title', description);
    
            $('#img_thumbnail').queue(function() {
                $('#img_thumbnail').attr('src', arrSites[i].getAttribute('thumbnail'));
                
                $('#img_thumbnail').dequeue();
            });    
            
	    $('#txt').queue(function() {       
	        $('#txt_title').text(arrSites[i].getAttribute('title'));
	        $('#txt_title').show();
	        $('#txt_description').text(arrSites[i].getAttribute('description'));
	        $('#txt_technical').text(arrSites[i].getAttribute('technical'));
	        $('#txt_technical_container').show();
	        $('#link_visit').attr('href', arrSites[i].getAttribute('url'));
	        $('#link_visit').show();
	        
	        $('#txt').dequeue();
	    });
	} else {
	    var j = i - numSites;
            $('#link_image').attr('href', arrGraphics[j].getAttribute('image'));
            $('#link_image_caption').attr('title', '');
            
            $('#img_thumbnail').queue(function() {
                $('#img_thumbnail').attr('src', arrGraphics[j].getAttribute('thumbnail'));
                
                $('#img_thumbnail').dequeue();
            });    
        
            $('#txt').queue(function() {        
//              $('#txt_title').text(arrGraphics[j].getAttribute('title'));
                $('#txt_title').hide();
                $('#txt_description').text(arrGraphics[j].getAttribute('description'));
//              $('#txt_technical').text(arrGraphics[j].getAttribute('technical'));
                $('#txt_technical_container').hide();
//              $('#link_visit').attr('href', arrGraphics[j].getAttribute('url'));
                $('#link_visit').hide();
    
                $('#txt').dequeue();
            });
        }
        
        if (effect) {
            $('#img_thumbnail').fadeIn('fast');
            $('#txt').show('slide', { direction: fromDirection }, 200);
        }
    }
    
    function switchToWebsites() {
    	$('#menu_websites').addClass('portfolio_menu_item_selected');
    	$('#img_check_websites').attr('src', '/images/pink/check.jpg');
    	$('#menu_others').removeClass('portfolio_menu_item_selected');
    	$('#img_check_others').attr('src', '/images/pink/empty_check.jpg');
    }

    function switchToGraphics() {
    	$('#menu_websites').removeClass('portfolio_menu_item_selected');
    	$('#img_check_websites').attr('src', '/images/pink/empty_check.jpg');
    	$('#menu_others').addClass('portfolio_menu_item_selected');
    	$('#img_check_others').attr('src', '/images/pink/check.jpg');
    }
    
    
    $('#link_websites').click(function(event) {
        event.preventDefault();
        
        switchToWebsites();
        item = 0;
        showItem(item, true, 'right');
    });
    
    $('#link_others').click(function(event) {
        event.preventDefault();
        
        switchToGraphics();
        item = numSites;
        showItem(item, true, 'right');
    });
    

});