// Image slide v1.0
// Slides through a list of images and html text
//
// Inputs:
//      parentId =  ID of the element to attach to
//      image_filenames_s = ` seperated image filenames
//      image_htmltext_s = ` seperated html text
//      imageClass = CSS class for images
//      textClass = CSS class for html text

function ImageSlider(parentId, imageFilenames, imageHtmlText, imageClass, textClass ) {
    
    // Checks if and extra spacer(`) has been added to the end, if so it removes it (split command)
    while (true) { if (imageFilenames.substr(imageFilenames.length - 2, 1) != "`") break; imageFilenames = imageFilenames.substr(0, imageFilenames.length - 2); }

	var imageHtmlTextArr = [];
	var arrayi=0;
	var lastptr=0

    // ********************************* User variables *************************************
    // Image settings var
    this.transitionTime = 2000;    // ms
    this.pauseTime = 5000;         // ms

    // *********************************** Private variables ********************************
    var imageFilenamesArr = imageFilenames.split('`');         // Array of filenames
    var imageHtmlTextArr = imageHtmlText.split('`');           // Array of htmltext
    this.pictureIndex = 0;      // Start image

    var image1;         // Control objects          
    var text1;          // '  

    var thisObj = this;

    // *********************************** User functions ************************************


    // Creates additional controls for smooth transition and start the interval timer
    $('document').ready(function() {
		var status = 0
        if (imageFilenames.length > 0) {
	    for (var i = 0; i < imageFilenamesArr.length; i++) {
                // Create image controls 
                image1 = document.createElement('img');
                image1.src = imageFilenamesArr[i];
                image1.className = imageClass;
                image1.id = "imgrot" + i;
                if (i == 0) image1.style.left = "0";
                else image1.style.left = "100%";
                document.getElementById(parentId).appendChild(image1);
            }
            status = status +1;
        }

        // Get main text control
        if (imageHtmlText.length > 0) {
            for (var i = 0; i < imageHtmlTextArr.length; i++) {
                // Create text control with style properties
                text1 = document.createElement('div');
                text1.innerHTML = imageHtmlTextArr[i];
                text1.className = textClass;
                text1.id = "txtrot" + i;
                if (i == 0) text1.style.left = "0";
                else text1.style.left = "100%";
                document.getElementById(parentId).appendChild(text1);
            }
            status = status + 2;
        }

        // Set the rotator depending on the files/text given 
        if( status == 1 ) {
            window.setInterval(transitionImg, thisObj.pauseTime+thisObj.transitionTime);
        }
        else if( status == 2 ) {
            window.setInterval(transitionTxt, thisObj.pauseTime+thisObj.transitionTime);
        }
        else if( status == 3 ) {
            window.setInterval(transitionImgTxt, thisObj.pauseTime+thisObj.transitionTime);
        }
        else {
	    return;
    	}

    });

    function transitionImg() {
        document.getElementById('imgrot' + ((thisObj.pictureIndex + 1) % imageFilenamesArr.length)).style.left =  document.getElementById(parentId).offsetWidth+'px';
        $('#imgrot' + ((thisObj.pictureIndex + 1) % imageFilenamesArr.length)).animate({left:0},thisObj.transitionTime);
        $('#imgrot' + thisObj.pictureIndex).animate({ left: -document.getElementById(parentId).offsetWidth }, thisObj.transitionTime);      
        thisObj.pictureIndex = (thisObj.pictureIndex + 1) % imageFilenamesArr.length;
    }
    function transitionTxt() {
        $('#txtrot' + ((thisObj.pictureIndex + 1) % imageHtmlTextArr.length)).fadeIn(thisObj.transitionTime);
        $('#txtrot' + thisObj.pictureIndex).fadeOut(thisObj.transitionTime);
        thisObj.pictureIndex = (thisObj.pictureIndex + 1) % imageHtmlTextArr.length;
    }
    function transitionImgTxt() {
        document.getElementById('imgrot' + ((thisObj.pictureIndex + 1) % imageFilenamesArr.length)).style.left = document.getElementById(parentId).offsetWidth+'px';
        $('#imgrot' + ((thisObj.pictureIndex + 1) % imageFilenamesArr.length)).animate({ left: 0 }, thisObj.transitionTime);
        $('#imgrot' + thisObj.pictureIndex).animate({ left: -document.getElementById(parentId).offsetWidth }, thisObj.transitionTime);

        document.getElementById('txtrot' + ((thisObj.pictureIndex + 1) % imageFilenamesArr.length)).style.left = document.getElementById(parentId).offsetWidth+'px';
        $('#txtrot' + ((thisObj.pictureIndex + 1) % imageHtmlTextArr.length)).animate({ left: 0 }, thisObj.transitionTime);
        $('#txtrot' + thisObj.pictureIndex).animate({ left: -document.getElementById(parentId).offsetWidth }, thisObj.transitionTime);
        

        thisObj.pictureIndex = (thisObj.pictureIndex + 1) % imageFilenamesArr.length;
    }
}