$(document).ready(function() {

    //	var caption1 = '<h1>Children of Immigrants: The Data1</h1><p>Immigration concerns continue to spark debate in Arizona and elsewhere.  The Urban Institute&#39;s interactive data resource looks at the characteristics of immigrant children, allows you to   compare populations of children and parents defined by nativity and citizenship, and enables you to generate charts for all 50 states.</p><br /><br /><p><strong>More Information</strong></p><ul><li><a href="#">Link 1</a></li><li><a href="#">Link 2</a></li><li><a href="#">Link 3</a></li></ul>
    var highlights;

    // Get the highlights on page load
    $.ajax({
        type: "POST",
        url: "Index.aspx/GetHighlights",
        contentType: "application/json; charset=utf-8",
        data: "{}",
        dataType: "json",
        success: SetAll,
        error: AjaxFailed
    });

//    function GetPageTarget(url) {
//        var target = "_self";
//        // Assume that if the url starts with http:// or https:// then this url is an external URL and needs to open in a new window    
//        if (url.toLowerCase().indexOf("http://") > -1 || url.toLowerCase().indexOf("https://") > -1) {
//            target = "_blank";
//        }

//        return target;
//    }

    function ShowNavigation(navTitles, navLinks) {
        var moreinfo = '<br /><br /><p><strong>More Information</strong></p><ul>';
        var titles = navTitles.split("|");
        var links = navLinks.split(" ");

        $.each(titles, function (index, value) {
            moreinfo += '<li><a href="' + links[index] + '" target="' + GetPageTarget(links[index]) + '">' + value + '</a></li>';
        });

        moreinfo += '</ul>';
        return moreinfo;
    }

    function ShowCaption(index) {
        var captiontext = '<h1>' + highlights[index].Heading + '</h1>';
        captiontext += '<p>' + highlights[index].Paragraph + '</p>';

        //append links if any
        if (highlights[index].NavTitles != '') {
            captiontext += ShowNavigation(highlights[index].NavTitles, highlights[index].NavLinks);
        }
        $('div#caption').html(captiontext);
    }

    function SetAll(response) {
        highlights = (typeof response.d) == 'string' ? eval('(' + response.d + ')') : response.d;
        ShowHighlight();
        //window.setInterval(ShowHighlight, 3000);
    }

    function ShowHighlight() {
        var randomnumber = Math.floor(Math.random() * 5);

        $('div#highlight-img img').attr('src', highlights[randomnumber].ImageURL);
        ShowCaption(randomnumber);
        SetActiveThumb('div#thumb' + (randomnumber + 1));
    }

    function AjaxFailed(result) {
        //alert(result.status + ' ' + result.statusText);
    }

    function SetActiveThumb(activethumb) {
        // deactive all
        $('div#thumb1').removeClass('active');
        $('div#thumb2').removeClass('active');
        $('div#thumb3').removeClass('active');
        $('div#thumb4').removeClass('active');
        $('div#thumb5').removeClass('active');

        // set active one
        $(activethumb).addClass('active');
    }

    $('div#thumb1').click(function() {
        $('div#caption').fadeOut('slow', function() {
            ShowCaption(0);
            $(this).fadeIn('slow');
        });

        $('div#highlight-img').fadeOut('slow', function() {
            $('img', this).attr('src', highlights[0].ImageURL);
            $(this).fadeIn('slow');
        });

        SetActiveThumb(this);
    });

    $('div#thumb2').click(function() {
        $('div#caption').fadeOut('slow', function() {
            ShowCaption(1);
            $(this).fadeIn('slow');
        });

        $('div#highlight-img').fadeOut('slow', function() {
            $('img', this).attr('src', highlights[1].ImageURL);
            $(this).fadeIn('slow');
        });

        SetActiveThumb(this);
    });

    $('div#thumb3').click(function() {
        $('div#caption').fadeOut('slow', function() {
            ShowCaption(2);
            $(this).fadeIn('slow');
        });

        $('div#highlight-img').fadeOut('slow', function() {
            $('img', this).attr('src', highlights[2].ImageURL);
            $(this).fadeIn('slow');
        });

        SetActiveThumb(this);
    });

    $('div#thumb4').click(function() {
        $('div#caption').fadeOut('slow', function() {
            ShowCaption(3);
            $(this).fadeIn('slow');
        });

        $('div#highlight-img').fadeOut('slow', function() {
            $('img', this).attr('src', highlights[3].ImageURL);
            $(this).fadeIn('slow');
        });

        SetActiveThumb(this);
    });

    $('div#thumb5').click(function() {
        $('div#caption').fadeOut('slow', function() {
            ShowCaption(4);
            $(this).fadeIn('slow');
        });

        $('div#highlight-img').fadeOut('slow', function() {
            $('img', this).attr('src', highlights[4].ImageURL);
            $(this).fadeIn('slow');
        });

        SetActiveThumb(this);
    });
});