var updateCount = 0;
var currentlyShownBackgroundImageId = "";
var timeOut;

var daysOfTheWeek = ["Sun", "Mon", "Tue", "Wed", "Thur", "Fri", "Sat", "Sun"];
var monthsOfTheYear = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

var currentDate;
var homePageFeatures;


function InitializeHomePageFeature(pCurrentDate, pHomePageFeatures) {
    currentDate = pCurrentDate;
    homePageFeatures = pHomePageFeatures;

    var images = GetBackgroundImageUrls();

    $(images).preloadImages(function () {
        AppendBackGroundImages(images);
        GenerateImageSelector();
        UpdateHomePage(2000, 2000);
    });


}
// Helper function, used below.
// Usage: ['img1.jpg','img2.jpg'].remove('img1.jpg');
Array.prototype.remove = function (element) {
    for (var i = 0; i < this.length; i++) {
        if (this[i] == element) { this.splice(i, 1); }
    }
};

// Usage: $(['img1.jpg','img2.jpg']).preloadImages(function(){ ... });
// Callback function gets called after all images are preloaded
$.fn.preloadImages = function (callback) {
    checklist = this.toArray();
    checklist.remove($("img#imgBackground").attr("src"));
    this.each(function () {
        $('<img>').attr({ src: this }).load(function () {
            checklist.remove($(this).attr('src'));
            if (checklist.length == 0) { callback(); }
        });
    });
};

function AppendBackGroundImages(images) {
    var htmlToAppend = "";
    var count = images.length - 1;
    var x = 0;
    for (x = 0; x <= count; x++) {
        htmlToAppend = htmlToAppend + '<img id="slide-img-' + x.toString() + '" src="' + images[x] + '" width="1460" class="slide" alt="" style="display:none;" />';
    }

    $('#backgroundImages').html(htmlToAppend);


}



function GenerateImageSelector() {
    var html = "";
    var count = homePageFeatures.length - 1;

    $('#imageSelector').css("display", "block");

    html = '<div class="imagetitle"></div>'

    if (count > 0) {
        html = html + '<ul id="imagelist">'

        for (x = 0; x <= count; x++) {
            html = html + '<li><a id="showFeature' + x + '" href="#" class="">' + (x + 1).toString() + '</a></li>';
        }

        html = html + '</ul>';

        $('div#imageSelector').html(html);

        $('div#imageSelector li').click(function () {
            clearTimeout(timeOut);
            var index = $("div#imageSelector li").index(this);
            updateCount = index;
            UpdateHomePage(20, 20);
        });

    }

}

function GetBackgroundImageUrls() {
    var images = new Array();
    var count = homePageFeatures.length - 1;
    var x = 0;
    for (x = 0; x <= count; x++) {
        images[x] = homePageFeatures[x].ImageUrl;
    }

    return images;
}


function UpdateHomePage(FadeIn, FadeOut) {

    var ampm = "";
    var hour = "";
    var minute = "";
    var DayOfMonth = "";

    //var theDate = new Date(currentDate.Year, currentDate.Month, currentDate.Day, currentDate.Minute, 0, 0);
    var theDate = new Date();

    var day = daysOfTheWeek[Number(theDate.getDay())];

    var month = monthsOfTheYear[Number(currentDate.Month) - 1];

    if (Number(currentDate.Hour) > 12) {
        ampm = "PM";
        hour = (Number(currentDate.Hour) - 12).toString();
    }
    else {
        ampm = "AM";
        hour = currentDate.Hour;
    }

    if (hour.length == 1) {
        hour = "0" + hour;
    }

    minute = currentDate.Minute
    if (minute.length == 1) {
        minute = "0" + minute;
    }

    DayOfMonth = currentDate.Day
    if (DayOfMonth.length == 1) {
        DayOfMonth = "0" + DayOfMonth;
    }



    var weatherHtmlTime = '<strong>' + homePageFeatures[updateCount].ForcastRegion + ' Time</strong> ';
    weatherHtmlTime = weatherHtmlTime + hour + ':' + minute + ' ' + ampm + ', ';
    weatherHtmlTime = weatherHtmlTime + day + ' ' + currentDate.Day + ' ' + month + ' ' + currentDate.Year;

    var weatherHtmlForcast = '<strong>Today\'s Forecast</strong> Max: ' + homePageFeatures[updateCount].ForcastTemp;

    weatherHtmlForcast = weatherHtmlForcast + '&deg;C.' + homePageFeatures[updateCount].ForcastDescription;

    var imageTitle = "";
    imageTitle = '<a href="' + homePageFeatures[updateCount].Link + '">' + homePageFeatures[updateCount].Title + '</a>'

    var description = "";
    description = '<a href="' + homePageFeatures[updateCount].Link + '">' + homePageFeatures[updateCount].Description + '</a>'

    $("#time").html(weatherHtmlTime);
    $("#weather").html(weatherHtmlForcast);
    $('#sliderInfo').html(description);
    $(".imagetitle").html(imageTitle);

    Cufon.replace('#sliderInfo, .imagetitle, ul#imagelist li', {
        fontFamily: 'helveticaLT', hover: true
    });


    if (!FadeOut || FadeOut == null)
        FadeOut = 2000

    if (!FadeIn || FadeIn == null)
        FadeIn = 2000

    if (currentlyShownBackgroundImageId != "") {
        $(currentlyShownBackgroundImageId).fadeOut(FadeOut);
    }
    currentlyShownBackgroundImageId = '#slide-img-' + updateCount;
    $(currentlyShownBackgroundImageId).fadeIn(FadeIn, function () {
        // only queue next set timeout when fade in finishes, this is because
        // animations are queued on hidden windows
        clearTimeout(timeOut);
        timeOut = setTimeout(UpdateHomePage, 4000);

        if (updateCount >= (homePageFeatures.length - 1)) {
            updateCount = 0;
        }
        else {
            updateCount = updateCount + 1;
        }
    });

    var tempUpdateCount = updateCount + 1;
    $('div#imageSelector ul li').removeClass('selected');
    $('div#imageSelector ul li:nth-child(' + tempUpdateCount + ')').addClass('selected');
}