/*############### FEATURED ORIGINAL SLIDER  ######################*/
function addPortfolioNavItem(id,imgSrc,title) {
	 
	    // If the new navigation menu has NOT been created yet:
	    if(!$('#portfolio-nav').get(0)) { // Test whether nav-menu already exists
	        $('<ul id="portfolio-nav" class="clearfix"/>')
	            .insertAfter('#portfolio-wrapper'); // If it does not exist then create it and insert before #portfolio-wrapper (an element which will be created later)
	    }
	    // creates a new list item and appends it to #portfolio-nav
	    return $('<li><a href="#' + id + '" title="' + title + '"><img width="60" height="60" src="' + imgSrc + '" alt="' + title + '" /></a></li>').appendTo('#portfolio-nav');
	 
}	
$(function(){ // Function initiates when DOM is ready
	
    // Apply styles to #portfolio and wrap it in #portfolio-wrapper
    $('#portfolio')
        .css({
            height: '392px', // 392 is the height of each portfolio image  (360px) + any padding/margin/borders  ( 12(2x6px padding on the img)+2(2x1px border)+18(18px bottom padding on the ul#portfolio) ) 
            width: ($(this).width() * $('#portfolio li').size()) + 'px', // i.e. 960x10 = 9600
            position: 'relative'
        })
        .wrap('<div id="portfolio-wrapper" style="width:960px;overflow:hidden;position:relative;"></div>'); // Wrap in new DIV element (required for scroll to work properly)
	
	$('#portfolio li')
        // Looping through each list-item:
        .each(function(){
 
            var newNavItem = addPortfolioNavItem( $(this).attr('id') , $('img:eq(0)',this).attr('src') , $('h2',this).text() );
			
            newNavItem.children('a:eq(0)').click(function(){
                // When portfolio nav-item is clicked:
                $('img',this).css({opacity:0.5}).parents('li').addClass('active_slide').siblings().removeClass('active_slide'); // Dim to .8 opacity (to show the user they've been there)
                var id = $(this).attr('href').split('#')[1]; // FIX: IE returns actual HREF instead of href attribute
                var difference = $('#portfolio').offset().left-$('#portfolio li#' + id).offset().left; // leftOffset of ul#portfolio minus leftOffset of selected portfolio piece
                $('#portfolio').animate({left: difference}, 700); // Animate to the value of different over 700 milliseconds
                return false; // prevent default action of links
            });
		
        })
		
        .css({
            width: '960px', // Specify width as 960 (minus any padding/margin/borders on either side)
            margin: 0, 
            float: 'left'
		});
		
});
 
	
	
/*############### FEATURED CODA SLIDER -  IMAGE AND TEXT (Manual Slider)  ######################*/	
$(function(){ 

	$.fn.cycle.updateActivePagerLink = function(pager, currSlideIndex) { 
	    $(pager).find('li').removeClass('active_slide') 
	        .filter('li:eq('+currSlideIndex+')').addClass('active_slide'); 
	}; 
	
	$('#portfolioCodaManualSlider').after('<ul id="portfolio-nav" class="clearfix">').cycle({ 
	    fx:			'scrollLeft',
		timeout: 	0, 
		pager:  	'#portfolio-nav',
		pagerAnchorBuilder: function(idx, slide) { 
			var src = $('img',slide).attr('src'); 
	        return '<li><a href="#"><img src="' + src + '" width="60" height="60" /></a></li>'; 
	    } 
	});
});
/*############### FEATURED CODA SLIDER - IMAGE ONLY######################*/
$(function(){ 

	$.fn.cycle.updateActivePagerLink = function(pager, currSlideIndex) { 
	    $(pager).find('li').removeClass('active_slide') 
	        .filter('li:eq('+currSlideIndex+')').addClass('active_slide'); 
	}; 
	         
	$('#portfolioCodaImgSlider').after('<ul id="portfolio-nav" class="clearfix">').cycle({ 
		fx:			'scrollLeft',
		timeout: 	4000, 
		pager:  	'#portfolio-nav',
		pagerEvent: 'mouseover', 
	    fastOnEvent: true, 	
	    pagerAnchorBuilder: function(idx, slide) { 
			var src = $('img',slide).attr('src'); 
	        return '<li><a href="#"><img src="' + src + '" width="60" height="60" /></a></li>'; 
	    } 
	});
	
});

/*############### FEATURED CODA SLIDER - IMAGE AND TEXT  (Automatic & Manual scroll) ######################*/
$(function(){ 

	// redefine Cycle's updateActivePagerLink function 
	$.fn.cycle.updateActivePagerLink = function(pager, currSlideIndex) { 
	    $(pager).find('li').removeClass('active_slide') 
	        .filter('li:eq('+currSlideIndex+')').addClass('active_slide'); 
	}; 
	         
	$('#portfolioCodaImgTextSlider').after('<ul id="portfolio-nav" class="clearfix">').cycle({ 
		fx:			'scrollLeft',
		timeout: 	4000, 
		pager:  	'#portfolio-nav',
		pagerEvent: 'mouseover', 
	    fastOnEvent: true, 	
	    pagerAnchorBuilder: function(idx, slide) { 
			var src = $('img',slide).attr('src'); 
	        return '<li><a href="#"><img src="' + src + '" width="60" height="60" /></a></li>'; 
	    } 
	}); 
});

/*################## SIDEBAR SLIDE ################################ */
$(function(){ 
$(".btn_slide").click(function(){
	  $("#panel").slideToggle("slow");
	  $(this).toggleClass("active");
	});
});

/*################## TOOLTIP ##########################################*/
$(function(){ 
$(".bookmarks_mini_gallery a, .bookmarks_gallery a").addClass('tooltip');
});

this.tooltip = function(){	
	/* CONFIG */		
		xOffset = 10;
		yOffset = 20;		
		// these 2 variable determine popup's distance from the cursor
		// you might want to adjust to get the right result		
	/* END CONFIG */		
	$("a.tooltip").hover(function(e){											  
		this.t = this.title;
		this.title = "";									  
		$("body").append("<p id='tooltip'><span>"+ this.t +"</span></p>");
		$("#tooltip")
			.css("top",(e.pageY - xOffset) + "px")
			.css("left",(e.pageX + yOffset) + "px")
			.fadeIn("fast");		
    },
	function(){
		this.title = this.t;		
		$("#tooltip").remove();
    });	
	$("a.tooltip").mousemove(function(e){
		$("#tooltip")
			.css("top",(e.pageY - xOffset) + "px")
			.css("left",(e.pageX + yOffset) + "px");
	});			
};



// starting the script on page load
$(document).ready(function(){
	tooltip();
});