/* ------------------------------------------------------------------------
    headerSlider
	
    Developped By:
    T.Guganeshan ( http://guganeshan-t.blogspot.com )
    
    Version:
    1.0
	
    Copyright:
    Feel free to redistribute & modify the script
------------------------------------------------------------------------- */

(function($) {
    $.fn.headerSlider = function(params) {

        // Prepare default values for the parameters
        var defaults = {
            leftPartOfImageName: '../images/header', // Image name starts with 'header', in a folder named 'images'
            rightPartOfImageName: '.jpg', // File name ends with the .png extension
            firstImageNumber: 1, // The 1st image we want to display is named as 'header1.png', that is why this is '1'
            lastImageNumber: 2, // The 1st image we want to display is named as 'header2.png', that is why this is '2'
            tagLinesScriptDivId: 'tagLinesScript', // ID of the DIV that contains tag lines as <script> blocks
            taglineCssClass: 'tagLine', // CSS class used to style the tagline
            timeOut: 10000 // Timeout for transition animation
        };

        // Set default values for parameters
        var params = $.extend(defaults, params);

        var sliderDivName = $(this)[0].id;
        var leftPartOfImageName = params.leftPartOfImageName;
        var rightPartOfImageName = params.rightPartOfImageName;
        var firstImageNumber = (params.firstImageNumber != undefined) ? params.firstImageNumber : 1;
        var lastImageNumber = params.lastImageNumber;
        var tagLinesScriptDivId = params.tagLinesScriptDivId;
        var taglineCssClass = params.taglineCssClass;
        var timeOut = (params.timeOut != undefined) ? params.timeOut : 10000;

        var previousNumber = 1;
        var currentNumber = 1;
        var currentTagNumber = 0;
        var dynamicTaglineDivId = "tagLineDynamicDiv";

        var tagLinesInScript = $("#" + tagLinesScriptDivId + " p");
        $("#" + sliderDivName).append("<div id='" + dynamicTaglineDivId + "' class='" + taglineCssClass + "'></div>");

        var changeImage = function() {
            if (currentNumber > lastImageNumber) {
                currentNumber = 1;
            }

            if (currentTagNumber >= tagLinesInScript.length) {
                currentTagNumber = 0;
            }

            var fullImageName = "url(" + leftPartOfImageName + currentNumber + rightPartOfImageName + ")";
            $("#" + sliderDivName).css("background-image", fullImageName);
            $("#" + sliderDivName).css("background-repeat", "no-repeat");
            $("#" + sliderDivName).css("background-position", "center");
            $("#" + sliderDivName).fadeTo(timeOut * 0.1, 1);

            previousNumber = currentNumber;
            currentNumber = currentNumber + 1;

            setTimeout(changeImage, timeOut);
            setTimeout(fadeOutImageDiv, timeOut * 0.9);
            setTimeout(fadeOutTagline, timeOut * 0.8);

            setTimeout(fadeInTagline, timeOut * 0.1);
        }

        var fadeOutImageDiv = function() {
            $("#" + sliderDivName).fadeTo(timeOut * 0.1, 0);
        }

        var fadeOutTagline = function() {
            $("#" + dynamicTaglineDivId).fadeOut("slow");
        }

        var fadeInTagline = function() {
            $("#" + dynamicTaglineDivId).html($(tagLinesInScript[currentTagNumber]).html());
            var sliderBottom = ($("#" + sliderDivName).position().top + $("#" + sliderDivName).height());
            var tagLineTop = sliderBottom - $("#" + dynamicTaglineDivId).outerHeight();
            $("#" + dynamicTaglineDivId).css("top", tagLineTop + "px");
            $("#" + dynamicTaglineDivId).fadeIn(timeOut * 0.1);
            currentTagNumber = currentTagNumber + 1;
        }

        changeImage();

    };
})(jQuery);