var timerInterval = null;
var data = {};
$(document).ready(function(){


    $('#imageSlideshow').css({
        visibility: 'visible'
    });
    
    createSlideshow();
    $('#arrowRight').click(function(){
        galleryNext();
        clearInterval(timerInterval);
        timerInterval = setInterval('galleryNext()', 4000);
    });
    $('#arrowLeft').click(function(){
        galleryPrevious();
        clearInterval(timerInterval);
        timerInterval = setInterval('galleryNext()', 4000);
    });
    $('.footerMenu li:last').css({
        'border': 'none'
    });
    
	
});

function tooltipOn(el)
{
	//console.log("binding mouse over");
    var tip = el.attr("title");
	//console.log("tip is:"+tip);
    if (el.attr("title") == "") {
        tip = el.attr("name");
    }
    else {
        el.attr("title", "");
        el.attr("name", tip);
    }
    
    var left = el.offset().left;
    var top = el.offset().top;
    var tooltip = $("#customTooltip");
    tooltip.empty().append(tip);
	//console.log("appending tip");
    var height = tooltip.height();
    tooltip.css({
        "left": left + 10,
        "top": top - height,
        "display": "block"
    });
}
function tooltipOff()
{
	//console.log("binding mous out");
    var tooltip = $("#customTooltip");
    tooltip.css({
        "display": "none"
    });
}


function createSlideshow(){
    var path = "./images";
    var container = $("#gallery");
    var pages = $("#slideMenuPages");
    var imagesNumber = 5;
    for (var i = 0; i < imagesNumber; i++) {
        var number = i + 1;
        //		container.append('<a href="'+data.link[i]+'" alt="'+data.alt[i]+'" ><img src="'+path+'/'+data.images[i]+'"/></a>');
        pages.append('<a href="#"  class="slideMenuPagesLink">' + number + '</a>');
    }
    
    $('#gallery a:first').addClass('show');
    $("#gallery .show img").load(function(){
        $('#imageSlideshow').animate({
            opacity: 1.0
        }, 2000);
    });
    var number = $('#slideMenuPages a').eq(0);
    //number.addClass('selectedMenuPage');
    
    $('#slideMenuPages a').click(function(){
        $('#slideMenuPages .selectedMenuPage').removeClass('selectedMenuPage');
        $(this).addClass('selectedMenuPage');
        //if no IMGs have the show class, grab the first image  
        var current = ($('#gallery a.show') ? $('#gallery a.show') : $('#gallery a:first'));
        
        //Get next image, if it reached the end of the slideshow, rotate it back to the first image  
        var index = $('#slideMenuPages a').index(this);
        var next = $('#gallery a').eq(index);
        
        //Set the fade in effect for the next image, show class has higher z-index  
        next.css({
            opacity: 0.0
        }).css({
            zIndex: 10000
        }).addClass('show').animate({
            opacity: 1.0
        }, 2000);
        
        //Hide the current image  
        current.animate({
            opacity: 0.0
        }, 1000).css({
            zIndex: 10
        }).removeClass('show');
        
        clearInterval(timerInterval);
        timerInterval = setInterval('galleryNext()', 4000);
    });
    slideShow();
}

function slideShow(){
    //Set the opacity of all images to 0  
    $('#gallery a').css({
        opacity: 0.0
    });
    
    //Get the first image and display it (set it to full opacity)  
    $('#gallery a:first').css({
        opacity: 1.0
    }).css({
        zIndex: 10000
    });
    
    $('#slideshowMenu').css({
        opacity: 0.7
    });
    
    //Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds  
    timerInterval = setInterval('galleryNext()', 4000);
    
}

function galleryNext(){

    //if no IMGs have the show class, grab the first image  
    var current = ($('#gallery a.show') ? $('#gallery a.show') : $('#gallery a: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().hasClass('caption')) ? $('#gallery a:first') : current.next()) : $('#gallery a:first'));
    
    markNumber(next);
    
    //Set the fade in effect for the next image, show class has higher z-index  
    next.css({
        opacity: 0.0
    }).css({
        zIndex: 10000
    }).addClass('show').animate({
        opacity: 1.0
    }, 2000);
    
    //Hide the current image  
    current.css({
        zIndex: 10
    }).animate({
        opacity: 0.0
    }, 1000).removeClass('show');
    
}

function galleryPrevious(){

    //if no IMGs have the show class, grab the first image  
    var current = ($('#gallery a.show') ? $('#gallery a.show') : $('#gallery a:last'));
    
    //Get next image, if it reached the end of the slideshow, rotate it back to the first image  
    var prev = ((current.prev().length) ? ((current.prev().hasClass('caption')) ? $('#gallery a:last') : current.prev()) : $('#gallery a:last'));
    
    markNumber(prev);
    
    //Set the fade in effect for the next image, show class has higher z-index  
    prev.css({
        opacity: 0.0
    }).css({
        zIndex: 10000
    }).addClass('show').animate({
        opacity: 1.0
    }, 2000);
    
    //Hide the current image  
    current.css({
        zIndex: 10
    }).animate({
        opacity: 0.0
    }, 1000).removeClass('show');
    
}

function markNumber(current){
    $('#slideMenuPages .selectedMenuPage').removeClass('selectedMenuPage');
    var index = $('#gallery a').index(current);
    var number = $('#slideMenuPages a').eq(index);
    // number.addClass('selectedMenuPage');  
}