<!--Menu title list-->

function appendTitles() {

var titles = [1,2,3,4]; 

$.each(titles, function(index,title){

$("<img id = 'title_"+title+"' class='titles' src='images/title_"+title+".png'></img>").appendTo('#foldout')

.bind('click', function(){

<!--change to work in response to title choice-->

var work = $("#gwork").val();

$(".work_" + work).fadeOut(950, 'easeOutSine', function() {

    $(".work_"+ title).fadeIn(950, 'easeInSine');

  });

$("#gwork").val(title);

<!--Arrow dis/appear in case of not/first work-->

if (title==1){

$('.arrow.left').fadeOut(300, 'linear')

}

else

{

$('.arrow').fadeIn(300, 'linear')

}

<!--Menu Fold In-->

folderIn();

<!--Current Title change-->

titleChange();

});

});

}

<!--Menu Fold In-->

function folderIn() {

$('#foldout img')  

.stop(true,true)

.animate({'opacity': 0,'top': '0px','margin-top': '0px'}, 600, 'easeOutSine',function(){

$(this).stop(true,true)

.css('position', 'absolute');})

}

<!--Current Title change-->

function titleChange() {

 $('#current_title img').stop(true,true)

  .animate({opacity: 0, top: '-25px'}, 950, 'easeOutBack',function(){

  var title = $("#gwork").val();

$(this).attr('src', 'images/title_'+title+'.png')

})

    .animate({opacity: 1, top: '25px'}, 950, 'easeOutBack');

}