$(document).ready(function () {
    //Tool Tip
    $('a#slider-one').mouseover(function () { $('div#tip-one').css('display', 'block') });
    $('a#slider-one').mouseout(function () { $('div#tip-one').css('display', 'none') });
    $('a#slider-two').mouseover(function () { $('div#tip-two').css('display', 'block') });
    $('a#slider-two').mouseout(function () { $('div#tip-two').css('display', 'none') });
    $('a#slider-three').mouseover(function () { $('div#tip-three').css('display', 'block') });
    $('a#slider-three').mouseout(function () { $('div#tip-three').css('display', 'none') });
    $('a#slider-four').mouseover(function () { $('div#tip-four').css('display', 'block') });
    $('a#slider-four').mouseout(function () { $('div#tip-four').css('display', 'none') });
    //button styling
    function highlightOne() {
        $('a#slider-one').css('background-position', '0 -38px').css('color', '#3ea2db')
        $('a#slider-two').css('background-position', '0 0').css('color', '#fff')
        $('a#slider-three').css('background-position', '0 0').css('color', '#fff')
        $('a#slider-four').css('background-position', '0 0').css('color', '#fff')
    }
    function highlightTwo() {
        $('a#slider-one').css('background-position', '0 0').css('color', '#fff')
        $('a#slider-two').css('background-position', '0 -38px').css('color', '#3ea2db')
        $('a#slider-three').css('background-position', '0 0').css('color', '#fff')
        $('a#slider-four').css('background-position', '0 0').css('color', '#fff')
    }
    function highlightThree() {
        $('a#slider-one').css('background-position', '0 0').css('color', '#fff');
        $('a#slider-two').css('background-position', '0 0').css('color', '#fff');
        $('a#slider-three').css('background-position', '0 -38px').css('color', '#3ea2db');
        $('a#slider-four').css('background-position', '0 0').css('color', '#fff');
    }
    function highlightFour() {
        $('a#slider-one').css('background-position', '0 0').css('color', '#fff')
        $('a#slider-two').css('background-position', '0 0').css('color', '#fff')
        $('a#slider-three').css('background-position', '0 0').css('color', '#fff')
        $('a#slider-four').css('background-position', '0 -38px').css('color', '#3ea2db')
    }
    //button function
    $('a#slider-one').click(function () {
        $('div#slider-content').animate({ left: '0' }, 1000);
        $('div#slider-image').animate({ top: '0' }, 1000);
        highlightOne();
    });
    $('a#slider-two').click(function () {
        $('div#slider-content').animate({ left: '-960' }, 1000);
        $('div#slider-image').animate({ top: '-339' }, 1000);
        highlightTwo();
    });
    $('a#slider-three').click(function () {
        $('div#slider-content').animate({ left: '-1920' }, 1000);
        $('div#slider-image').animate({ top: '-678' }, 1000);
        highlightThree();
    });
    $('a#slider-four').click(function () {
        $('div#slider-content').animate({ left: '-2880' }, 1000);
        $('div#slider-image').animate({ top: '-1014' }, 1000);
        highlightFour();
    });
    //auto play
    window.setInterval(slider, 15000);
    function slider() {
        var p = $('div#slider-content');
        var position = p.position();

        if (position.left === 0) {
            $('div#slider-content').animate({ left: '-960' }, 1000);
            $('div#slider-image').animate({ top: '-339' }, 1000);
            highlightTwo();
        }
        if (position.left === -960) {
            $('div#slider-content').animate({ left: '-1920' }, 1000);
            $('div#slider-image').animate({ top: '-678' }, 1000);
            highlightThree();
        }
        if (position.left === -1920) {
            $('div#slider-content').animate({ left: '-2880' }, 1000);
            $('div#slider-image').animate({ top: '-1014' }, 1000);
            highlightFour();
        }
        if (position.left === -2880) {
            $('div#slider-content').animate({ left: '0' }, 1000);
            $('div#slider-image').animate({ top: '0' }, 1000);
            highlightOne();
        }
    }
});