$(document).ready(function() {

    $('#foodAndFriendsTrigger').hover(
		function foodAndFriendsTriggerMouseEnter(e) {
		    $('#foodAndFriendsMenu', this).show('slide', { direction: 'up' }, 200);
		},
		function foodAndFriendsTriggerMouseLeave(e) {
		    $('#foodAndFriendsMenu', this).hide('slide', { direction: 'up' }, 200);
		}
	);
    $('#archivesTrigger').hover(
		function archivesTriggerMouseEnter(e) {
		    $('#monthsMenu', this).show('slide', { direction: 'up' }, 200);
		},
		function archivesTriggerMouseLeave(e) {
		    $('#monthsMenu', this).hide('slide', { direction: 'up' }, 200);
		}
	);

    $('#placesTrigger').hover(
		function placesTriggerMouseEnter(e) {
		    $('#placesMenu', this).show('slide', { direction: 'up' }, 200);
		},
		function placesTriggerMouseLeave(e) {
		    $('#placesMenu', this).hide('slide', { direction: 'up' }, 200);
		}
	);

    $('#archivesTrigger').hover(
		function archivesTriggerMouseEnter(e) {
		    $('#monthsMenu', this).show('slide', { direction: 'up' }, 200);
		},
		function archivesTriggerMouseLeave(e) {
		    $('#monthsMenu', this).hide('slide', { direction: 'up' }, 200);
		}
	);

    $('#tagTrigger').hover(
	   function tagTriggerMouseEnter(e) {
	       var $tagCloud = $('#tagCloud', this);
	       var $sideMenuList = $('#sidemenuList');
	       $tagCloud.css({ 'left': '-160px' });
	       $tagCloud.show('slide', { direction: 'up' }, 200);
	   },
	   function tagTriggerMouseLeave(e) {
	       var $tagCloud = $('#tagCloud');
	       $tagCloud.hide('slide', { direction: 'up' }, 200);
	   }
   );
    $('#followTrigger').hover(
	   function (e) {
		    $('#followMenu', this).show('slide', { direction: 'up' }, 200);
		},
		function (e) {
		    $('#followMenu', this).hide('slide', { direction: 'up' }, 200);
		}
   );
    $('#galleryTrigger').hover(
		function archivesTriggerMouseEnter(e) {
		    $('#galleryWrapper', this).show('slide', { direction: 'up' }, 200);
		},
		function archivesTriggerMouseLeave(e) {
		    $('#galleryWrapper', this).hide('slide', { direction: 'up' }, 200);
		}
	);

	/*
    $('#scrollLeft').hover(
		function() {
		    scrollLeftIntervalId = setInterval(scrollLeft, 10);
		},
		function() {
		    clearInterval(scrollLeftIntervalId);
		}
		);
    $('#scrollRight').hover(
		function() {
		    scrollRightIntervalId = setInterval(scrollRight, 10);
		},
		function() {
		    clearInterval(scrollRightIntervalId);
		}
		);
		*/
		$('#scrollLeft').click(function(){
			var $imageGalleryList = $('#imageGalleryList');
		    var currentLeft = parseInt($imageGalleryList.css('left'));
		    //if (currentLeft < 0){
				var targetLeft = currentLeft + 488;
				
				if (targetLeft > 0){
					$imageGalleryList.animate({left:122}, 400, 'easeInOutQuad', 
						function (){
							$imageGalleryList.animate({left:0}, 200, 'easeInQuad');
						}
					);
				}
				else{
				$imageGalleryList.animate({left:targetLeft}, 800, 'easeOutQuad');
				}
				//targetLeft = targetLeft < 0 ? targetLeft : 0;
				//$imageGalleryList.animate({left:targetLeft}, 900, 'swing');
			//}			
		});
		$('#scrollRight').click(function(){
			var $imageGalleryList = $('#imageGalleryList');
			var actualWidth = $('li', $imageGalleryList[0]).length * 122;
		    var currentLeft = parseInt($imageGalleryList.css('left'));
			var minLeft = -1 * actualWidth + 788;
			var targetLeft = currentLeft - 488;
			
		    if (targetLeft < minLeft){
				$imageGalleryList.animate({left:minLeft - 122}, 400, 'easeInOutQuad', 
					function (){
						$imageGalleryList.animate({left:minLeft}, 200, 'easeInQuad');
					}
				);
			}else{
				$imageGalleryList.animate({left:targetLeft}, 800, 'easeInQuad');
			}	
//targetLeft = targetLeft < minLeft ? minLeft : targetLeft;			
		});
});

function scrollLeft() {
    var $imageGalleryList = $('#imageGalleryList');
    var currentLeft = parseInt($imageGalleryList.css('left'));
    if (currentLeft < 310) {
        var targetLeft = currentLeft + 4;
        $imageGalleryList.css({ 'left': targetLeft });
    }
    
}
function scrollRight() {
    var $imageGalleryList = $('#imageGalleryList');
    var actualWidth = $('li', $imageGalleryList[0]).length * 105;
    var currentLeft = parseInt($imageGalleryList.css('left'));
    if (currentLeft + actualWidth > 420) {
        var targetLeft = currentLeft - 4;
        $imageGalleryList.css({ 'left': targetLeft });
    }
}