﻿//create image slider
function createVideoSlider(passedVideoXML, passedThumbTarget, passedVideoTarget) {

    //define structure for thumbnails
    var currentThumbWrapper;    //<div>  list for the thumbnail
    var currentThumbA;      //<a>   link for the thumbnail
    var currentThumb;       //<img> thumbnail image  
    var currentThumbDesc;   //<label> label for video
    
    
    
    //finds video in XML file
    for(videoCount = 0; videoCount < passedVideoXML.length; videoCount++){
        
        //define structure for video and description
        var currentTable = document.createElement('table');
        
        var currentRow = document.createElement('tr');
            currentRow.setAttribute('valign', 'top');
            
        var currentDescCol = document.createElement('td');
            currentDescCol.setAttribute('align','left');
            currentDescCol.setAttribute('class', 'descriptionTD');
            currentDescCol.appendChild(generateDescription(passedVideoXML[videoCount].getElementsByTagName('DESCRIPTION')));
            
        var currentVidCol = document.createElement('td');
            currentVidCol.setAttribute('align','right');
            currentVidCol.setAttribute('class','playerTD');
            currentVidCol.appendChild(createVideoWrapper(passedVideoXML[videoCount]));
            
        //append structure together and to videoTarget
        currentTable.appendChild(currentRow);
        currentRow.appendChild(currentDescCol);
        currentRow.appendChild(currentVidCol);

        passedVideoTarget.innerHTML = passedVideoTarget.innerHTML + '<table>' + currentTable.innerHTML + '</table>';
        
        //create thumbnail wrapper
        passedThumbTarget.appendChild(createThumbWrapper(passedVideoXML[videoCount].getElementsByTagName('THUMBNAIL')[0]));
    }           
}

//create video wrapper
function createVideoWrapper(passedVideo){

    //define structure in which video goes
    var currentVideoWrapper;     //<div>     containing img and description
    var currentEmbed;            //<img>     slider image
    
    //define video attribute
    var width = passedVideo.getElementsByTagName('WIDTH')[0].childNodes[0].nodeValue;
    var height = passedVideo.getElementsByTagName('HEIGHT')[0].childNodes[0].nodeValue;
    var source = passedVideo.getElementsByTagName('SOURCE')[0].childNodes[0].nodeValue;
    
    //create video wrapper
    currentVideoWrapper = document.createElement('div');
    currentEmbed = createYoutubeVideo(width, height, source);
    currentVideoWrapper.appendChild(currentEmbed);
    
    return currentVideoWrapper;
}

//create thumbnail wrapper
function createThumbWrapper(passedThumb){

    //define structure in which thumbnails goes
    var currentThumbWrapper;    //<div>  list for the thumbnail
    var currentThumbA;          //<a>   link for the thumbnail
    var currentThumb;           //<img> thumbnail image  
    var currentThumbDesc;       //<label> label for video 

    //create structure in which thumbnails goes
    currentThumbWrapper = document.createElement('div');
    currentThumbWrapper.setAttribute('class','thumb');
    currentThumbA = document.createElement('a');
    
    currentThumb = document.createElement('img');
    currentThumb.setAttribute('src',passedThumb.getElementsByTagName('THUMB_IMAGE')[0].childNodes[0].nodeValue); 
    currentThumb.setAttribute('height','45px');
    currentThumb.setAttribute('width','65px');
    
    currentThumbDesc = document.createElement('label');
    currentThumbDesc.innerHTML = passedThumb.getElementsByTagName('THUMB_NAME')[0].childNodes[0].nodeValue;
    
    //append newly created elements
    currentThumbWrapper.appendChild(currentThumbA);
    currentThumbA.appendChild(currentThumb);
    currentThumbA.appendChild(document.createElement('br'));
    currentThumbA.appendChild(currentThumbDesc);
    
    //return wrapper for thumbnail
    return currentThumbWrapper;      
}
