$(document).ready(function() {
    //Execute the slideShow
    slideShow();

    // Show the description of portfolio project
    showPortfolio();
    
    // slide through news articles
    scrollNews();

});

function showPortfolio() {
    // Attach link to protfolio item
    $('#project-list li a').click(function() {
        $('#shadow-box').removeClass('hide');
        $('#project-box').removeClass('hide');

        var projectId = $(this).children('.hidden').html();

        $.ajax({
            url: "/projects/" + projectId + ".html",
            cache: false,
            success: function(result) {
                var domElement = $(result); // create element from html
                $('#project-description').append(domElement); // append to project information pop-up
            }
        });
    });

    // Close project box
    $('#project-box .box-top a').click(function() {
        $('#shadow-box').addClass('hide');
        $('#project-box').addClass('hide');
        $('#project-description').empty();
    });
}

function scrollNews() {

	$('#news-wrapper .mask > div:first').addClass('show');
	var number =  $('#news-wrapper .mask > div').length
	
	if (number > 1) {
        //Call the newsarticles function to run the scrollto, 6000 = change to next image after 6 seconds   
        setInterval('newsarticles()', 6000);
    } 
}

function newsarticles() {
	//if no IMGs have the show class, grab the first image
    var current = ($('#news-wrapper .mask > div.show') ? $('#news-wrapper .mask > div.show') : $('#news-wrapper .mask > div:first'));   
  
    //Get next image, if it reached the end of the slideshow, rotate it back to the first image
    var next = ((current.next().length) ?  current.next(): $('#news-wrapper .mask > div:first'));
    
    //Set the fade in effect for the next image, show class has higher z-index
    next.addClass('show')
    
    //Hide the current image
    current.removeClass('show');  
    
    $('#news-wrapper').scrollTo(next, 800);
}
 
function slideShow() {
    //Set the opacity of all images to 0
    $('#header .banner-image > div').css({ opacity: 0.0 });
    
    //Get the first image and display it (set it to full opacity)
    $('#header .banner-image > div:first').css({ opacity: 1.0 }).addClass('show');

    var n = $('#header .banner-image > div').length;

    if (n > 1) {
        //Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds   
        setInterval('gallery()', 6000);
    } 
} 

function gallery() {       
   
    //if no IMGs have the show class, grab the first image
    var current = ($('#header .banner-image > div.show') ? $('#header .banner-image > div.show') : $('#header .banner-image > div:first'));   
  
    //Get next image, if it reached the end of the slideshow, rotate it back to the first image
    var next = ((current.next().length) ?  current.next(): $('#header .banner-image > div:first'));

    //Set the fade in effect for the next image, show class has higher z-index
    next.addClass('show').animate({ opacity: 1.0 }, 1000);

    //Hide the current image
    current.animate({ opacity: 0.0 }, 1000).removeClass('show');     
}