// Javascript Background Changer with JQuery 1.4.2

var _Current = 0;
var _TotalImages = 0;
var _TimeForImageTranformation = 10000;
var _Interval = 0;
var _imgURL;
var _imgTitle;

jQuery(document).ready(function () {

    _TotalImages = $("#bannerimages").children("img").size() - 1;

    _Interval = setInterval(fnImageTranformation, _TimeForImageTranformation);

    //Contain is initially set to Opacity Zero in CSS just in Case Javascript is Disabled.
    //If Javascript enabled then Opacity is set back to 100% to load a fade create a fade in effect by setting it back to 0.
    $("#bannerfader").css("opacity", "1");
    $("#bannerfader").css("filter", "alpha(opacity=100)");
//    $("#bannerinfoHolder").css("display", "");
//    $("#bannerinfoHolder").css("opacity", "0.7");
//    $("#bannerinfoHolder").css("filter", "alpha(opacity=70)");
//    $("#bannerinfoHolder p").text($("#bannerimages").find("img").attr("alt"));
//    $("#bannerinfoHolder").animate({ opacity: 'show', "top": "0px" }, 2100);
    $("#bannerfader").animate({ opacity: 'hide' }, 2000);
    if (_TotalImages >= 0) {
        $("#bannerbuttons").find("#0").addClass("selectedbutton");
    }
    $(".bannerbutton").click(function () {
        _itemid = $(this).attr("id");
        clearInterval(_Interval);
        fnImageButtomTranformation(_itemid);
    });

//    $("#bannerinfoHolder").click(function () {
//        clearInterval(_Interval);
//        _Interval = setInterval(fnImageTranformation, _TimeForImageTranformation);
//        fnImageTranformation();
//    });

});


function fnImageButtomTranformation(itemid) {
    _Current = itemid;

  $("#bannerbuttons").find("div").removeClass("selectedbutton");
  
  $("#bannerimages").find("#" + itemid).each(function (i) {

      $("#bannerbuttons").find("#" + itemid).addClass("selectedbutton");
        _imgURL = $(this).attr("src");
        _imgTitle = $(this).attr("alt");

        //Sets Info Tag. and perform a left to right animation, together with fade in and out.
//        $("#bannerinfoHolder").animate({ opacity: 'hide', "top": "-300px" }, 2100, function () {
//            $("#bannerinfoHolder p").text(_imgTitle);
//            $("#bannerinfoHolder").animate({ opacity: 'show', "top": "0px" }, 2100);
//        });

        //Sets Container Opacity to 100% Info Tag. and perform a left to right animation, together with fade in and out.
        $("#bannerfader").animate({ opacity: 'show' }, 2000, function () {
            $("#maincontent").css("background-image", "url(" + _imgURL + ")");
            $("#bannerfader").animate({ opacity: 'hide' }, 2000);
        });      

    }); 
    _Interval = setInterval(fnImageTranformation, _TimeForImageTranformation);
}

 

function fnImageTranformation() {

        _Current == _TotalImages ? _Current = 0 : _Current++;
        
    
        $("#bannerimages").find("img").each(function (i) {

            $("#bannerbuttons").find("#" + i).removeClass("selectedbutton");
            if (i == _Current) {
                $("#bannerbuttons").find("#" + i).addClass("selectedbutton");
                _imgURL = $(this).attr("src");
                _imgTitle = $(this).attr("alt");

                //Sets Info Tag. and perform a left to right animation, together with fade in and out.
//                $("#bannerinfoHolder").animate({ opacity: 'hide', "top": "-300px" }, 2100, function () {
//                    $("#bannerinfoHolder p").text(_imgTitle);
//                    $("#bannerinfoHolder").animate({ opacity: 'show', "top": "0px" }, 2100);
//                });


                //Sets Container Opacity to 100% Info Tag. and perform a left to right animation, together with fade in and out.
                $("#bannerfader").animate({ opacity: 'show' }, 2000, function () {
                    $("#maincontent").css("background-image", "url(" + _imgURL + ")");
                    $("#bannerfader").animate({ opacity: 'hide' }, 2000);
                });
            }


                
        });    
    
}