/**
 * @author Garrett Eidsvig
 * @version 1.1
 * 
 * references for javascript:
 * http://developer.mozilla.org/en/docs/A_re-introduction_to_JavaScript
 */

var GALLERYIMAGE  = 'GalleryImage';
var GALLERYLINKS = 'GalleryLinks';
var CONTAINER = 'imageContainer';
var BEFORE = 'before';
var DURING = 'during';
var AFTER = 'after';
var DIVPOSTFIX = '_div';

function initApp() {
   initGallery(); 
}

/**
 * This function is triggered on page load for the NWI gallery page.
 * The purpose is to initialize all of the gallery sections with thumbnails,
 * and the corresponding onclick functions.
 */
function initGallery() {
    initKitchenThumbnails();
    initBathThumbnails();
    initFlooringThumbnails();
    initInteriorThumbnails();
    initFireFeatureThumbnails();
    initExteriorThumbnails();
    initFramingThumbnails();
}

function updateGallery(target, newImage, before, during, after) {
    updateGalleryImage(target, newImage);
    updateGalleryLinks(target, before, during, after);
}

function updateGalleryImage(target, newImage) {
    var element = findTargetElementById(target, target+GALLERYIMAGE);
    //console.log(' ... changing gallery image to ' + newImage);
    element.className = newImage;
//        element.onclick = function() {
//             alert('test');
//        };
//        element.onmouseover = function(){
//            element.innerHTML = 'click to enlarge';
//        };
//        element.onmouseout = function(){
//            element.innerHTML = '';
//        };
}

function updateGalleryLinks(target, before, during, after) {
    var element = findTargetElementById(target, target+GALLERYLINKS);
    //console.log(' ... changing gallery links ' + target +' with before:'+ before + ' during:' + during + ' after:' + after);
    var beforeEl = createGalleryLinkEl(target, before, "Before", 'before');
    var duringEl = createGalleryLinkEl(target, during, "During", 'during');
    var afterEl = createGalleryLinkEl(target, after, "After", 'after');
    element.innerHTML = beforeEl.innerHTML + duringEl.innerHTML + afterEl.innerHTML;
}

function findTargetElementById(target, id) {
    //console.log('attempting to find element '+id);
    var element = null;
    var el = document.getElementById(target);
    if (el !== undefined) {
        for (var i=0; i<el.childNodes.length; i++) {
            if (el.childNodes[i].className == CONTAINER) {
                var containerNodes = el.childNodes[i].childNodes;
                for (var j=0; j<containerNodes.length; j++) {
                    var nodeId = containerNodes[j].id;
                    ////console.log(' ... nodeId '+nodeId);
                    if (nodeId == id) {
                        element = containerNodes[j];
                        break;
                    }
                }
            }
        }
    }
    return element;
}

function isNullOrEmpty(object) {
    return (object == '' || object == null);    
}

function isDefined(object) {
    return (object !== undefined);
}

function createGalleryLinkEl(target, source, html, id) {
    var newEl = document.createElement('div');
    if (isNullOrEmpty(source)) {
        newEl.innerHTML = '<div class=\'noImage\'>'+html+'</div>';
    } else {
        newEl.innerHTML = '<div class=\'hasImage\' id=\"'+id+'\" '+ createUpdateGalleryLinksString(target, source)+'>'+html+'</div>';
    }
    return newEl;
}
function createUpdateGalleryImageString(target, newImage, after, during, before){
    return 'onclick=\"updateGallery(\''+target+'\',\''+newImage+'\',\''+before+'\',\''+during+'\',\''+after+'\')\"';
}
function createUpdateGalleryLinksString(target, source) {
    return 'onclick=\"updateGalleryImage(\''+target+'\',\''+source+'\')\"';
}
 
function createThumbnailHtml(room, imageArray) {
 	var html = '<ul>';
    for (var i=0; i<imageArray.length; i++) {
        var css = imageArray[i].thumbnail;
		var script = createUpdateGalleryImageString(room, imageArray[i].after, imageArray[i].after, imageArray[i].during, imageArray[i].before);
        //console.log(css);
        html += '<li class=\"' + css + '\"' +script+'></li>';
    }
    html += '</ul>';
	return html;
}
 
function initBathThumbnails() {
    var imageArray = getBathImageArray();
    var target = 'bathrooms';
    var thumbnailEl = document.getElementById('bath_thumbnails');
	var html = createThumbnailHtml(target, imageArray);
    thumbnailEl.innerHTML = html;
    var firstImageSet = imageArray[0];
    updateGalleryImage(target, firstImageSet.after);
}
 
function initKitchenThumbnails() {
    var imageArray = getKitchenImageArray();
    var target = 'kitchens';
    var thumbnailEl = document.getElementById('kitchen_thumbnails');
	var html = createThumbnailHtml(target, imageArray);
    thumbnailEl.innerHTML = html;
    var firstImageSet = imageArray[0];
    updateGalleryImage(target, firstImageSet.after);
}

function initFlooringThumbnails() {
    var imageArray = getFlooringImageArray();
    var target = 'flooring';
    var thumbnailEl = document.getElementById('flooring_thumbnails');
	var html = createThumbnailHtml(target, imageArray);
    thumbnailEl.innerHTML = html;
    var firstImageSet = imageArray[0];
    updateGalleryImage(target, firstImageSet.after);
}

function initInteriorThumbnails() {
    var imageArray = getInteriorImageArray();
    var target = 'interior';
    var thumbnailEl = document.getElementById('interior_thumbnails');
	var html = createThumbnailHtml(target, imageArray);
    thumbnailEl.innerHTML = html;
    var firstImageSet = imageArray[0];
    updateGalleryImage(target, firstImageSet.after);
}

function initExteriorThumbnails() {
    var imageArray = getExteriorImageArray();
    var target = 'exterior';
    var thumbnailEl = document.getElementById('exterior_thumbnails');
	var html = createThumbnailHtml(target, imageArray);
    thumbnailEl.innerHTML = html;
    var firstImageSet = imageArray[0];
    updateGalleryImage(target, firstImageSet.after);
}

function initFireFeatureThumbnails() {
    var imageArray = getFireFeaturesImageArray();
    var target = 'fire';
    var thumbnailEl = document.getElementById('fire_thumbnails');
	var html = createThumbnailHtml(target, imageArray);
    thumbnailEl.innerHTML = html;
    var firstImageSet = imageArray[0];
    updateGalleryImage(target, firstImageSet.after);
}

function initFramingThumbnails() {
    var imageArray = getFramingImageArray();
    var target = 'framing';
    var thumbnailEl = document.getElementById('framing_thumbnails');
	var html = createThumbnailHtml(target, imageArray);
    thumbnailEl.innerHTML = html;
    var firstImageSet = imageArray[0];
    updateGalleryImage(target, firstImageSet.after);
}



/**
 * The following section handles the image objects, so that each section of images can adhere to a standard.
 */

/**
 * This function takes in the required values to create an image set for the NWI website gallery page.
 * 
 * @param {Object} thumbnail
 * @param {Object} after
 * @param {Object} during
 * @param {Object} before
 */
function imageSet(thumbnail, after, during, before) {
	var imageSet = {
		thumbnail: thumbnail,
		before: before,
		during: during,
		after: after
	};
	return imageSet;	
}

/**
 * This function creates the bathroom image array for the gallery page.
 */
function getBathImageArray(){
    var imageArray = [];
    imageArray.push(imageSet('bath03_thumb', 'bath03_after', 'bath03_during', 'bath03_before'));
    imageArray.push(imageSet('bath01_thumb', 'bath01_after', 'bath01_during', 'bath01_before'));
    imageArray.push(imageSet('bath02_thumb', 'bath02_after', 'bath02_during', 'bath02_before'));
    imageArray.push(imageSet('bath04_thumb', 'bath04_after', 'bath04_during', 'bath04_before'));
    imageArray.push(imageSet('bath05_thumb', 'bath05_after', '', 'bath05_before'));
    imageArray.push(imageSet('bath06_thumb', 'bath06_after', '', 'bath06_before'));
    return imageArray;
}

/**
 * This function creates the kitchen image array for the gallery page.
 */
function getKitchenImageArray(){
    var imageArray = [];
	imageArray.push(imageSet('kitchen01_thumb', 'kitchen01_after', 'kitchen01_during', 'kitchen01_before'));
    imageArray.push(imageSet('kitchen02_thumb', 'kitchen02_after', 'kitchen02_during', 'kitchen02_before'));
    imageArray.push(imageSet('kitchen03_thumb', 'kitchen03_after', '', 'kitchen03_before'));
    imageArray.push(imageSet('kitchen04_thumb', 'kitchen04_after', 'kitchen04_during', 'kitchen04_before'));
    imageArray.push(imageSet('kitchen05_thumb', 'kitchen05_after', '', 'kitchen05_before'));
    imageArray.push(imageSet('kitchen06_thumb', 'kitchen06_after', '', 'kitchen06_before'));
    imageArray.push(imageSet('kitchen07_thumb', 'kitchen07_after', 'kitchen07_during', 'kitchen07_before'));
    imageArray.push(imageSet('kitchen08_thumb', 'kitchen08_after', '', ''));
    imageArray.push(imageSet('kitchen09_thumb', 'kitchen09_after', '', 'kitchen09_before'));
    return imageArray;
}

/**
 * This function creates the flooring image array for the gallery page.
 */
function getFlooringImageArray(){
    var imageArray = [];
	imageArray.push(imageSet('flooring01_thumb', 'flooring01_after', 'flooring01_during', 'flooring01_before'));
    imageArray.push(imageSet('flooring02_thumb', 'flooring02_after', 'flooring02_during', 'flooring02_before'));
    imageArray.push(imageSet('flooring03_thumb', 'flooring03_after', 'flooring03_during', 'flooring03_before'));
    imageArray.push(imageSet('flooring04_thumb', 'flooring04_after', '', ''));
    imageArray.push(imageSet('flooring05_thumb', 'flooring05_after', '', ''));
    imageArray.push(imageSet('flooring06_thumb', 'flooring06_after', '', 'flooring06_before'));
    imageArray.push(imageSet('flooring07_thumb', 'flooring07_after', '', 'flooring07_before'));        
    return imageArray;
}

/**
 * This function creates the flooring image array for the gallery page.
 */
function getInteriorImageArray(){
    var imageArray = [];
    imageArray.push(imageSet('ceiling01_thumb', 'ceiling01_after', 'ceiling01_during', 'ceiling01_before'));
	imageArray.push(imageSet('bedroom01_thumb', 'bedroom01_after', 'bedroom01_during', 'bedroom01_before'));
    imageArray.push(imageSet('bedroom02_thumb', 'bedroom02_after', '', 'bedroom02_before'));
    imageArray.push(imageSet('solarium01_thumb', 'solarium01_after', 'solarium01_during', 'solarium01_before'));
    imageArray.push(imageSet('living01_thumb', 'living01_after', '', 'living01_before'));
    imageArray.push(imageSet('living02_thumb', 'living02_after', '', 'living02_before'));
    imageArray.push(imageSet('foyer01_thumb', 'foyer01_after', 'foyer01_during', 'foyer01_before'));
    imageArray.push(imageSet('foyer02_thumb', 'foyer02_after', '', 'foyer02_before'));
    imageArray.push(imageSet('bar01_thumb', 'bar01_after', 'bar01_during', 'bar01_before'));
	imageArray.push(imageSet('living03_thumb', 'living03_after', '', ''));
    return imageArray;
}

/**
 * This function creates the decks/patios image array for the gallery page.
 */
function getExteriorImageArray(){
    var imageArray = [];
    imageArray.push(imageSet('deck05_thumb', 'deck05_after', 'deck05_during', 'deck05_before'));
    imageArray.push(imageSet('deck03_thumb', 'deck03_after', 'deck03_during', 'deck03_before'));
    imageArray.push(imageSet('deck01_thumb', 'deck01_after', 'deck01_during', ''));
	imageArray.push(imageSet('deck02_thumb', 'deck02_after', 'deck02_during', 'deck02_before'));
    imageArray.push(imageSet('deck04_thumb', 'deck04_after', '', 'deck04_before'));
    imageArray.push(imageSet('lift01_thumb', 'lift01_after', 'lift01_during', 'lift01_before'));    
    imageArray.push(imageSet('deck06_thumb', 'deck06_after', 'deck06_during', ''));
    return imageArray;
}

/**
 * This function creates the framing and siding image array for the gallery page.
 */
function getFramingImageArray(){
    var imageArray = [];
    imageArray.push(imageSet('frame01_thumb', 'frame01_after', 'frame01_during', 'frame01_before'));
    imageArray.push(imageSet('frame02_thumb', 'frame02_after', '', 'frame02_before'));
    imageArray.push(imageSet('frame03_thumb', 'frame03_after', '', 'frame03_before'));
    imageArray.push(imageSet('frame04_thumb', 'frame04_after', '', 'frame04_before'));
    imageArray.push(imageSet('siding01_thumb', 'siding01_after', '', 'siding01_before'));
    imageArray.push(imageSet('siding02_thumb', 'siding02_after', '', 'siding02_before'));
    imageArray.push(imageSet('concrete01_thumb', 'concrete01_after', '', ''));
    return imageArray;
}

/**
 * This function creates the fire feature image array for the gallery page.
 */
function getFireFeaturesImageArray(){
    var imageArray = [];
    imageArray.push(imageSet('fire01_thumb', 'fire01_after', '', ''));
    imageArray.push(imageSet('fire02_thumb', 'fire02_after', '', ''));
    imageArray.push(imageSet('fire03_thumb', 'fire03_after', '', ''));
    imageArray.push(imageSet('fire04_thumb', 'fire04_after', '', ''));
    imageArray.push(imageSet('fire05_thumb', 'fire05_after', '', ''));
    imageArray.push(imageSet('fire06_thumb', 'fire06_after', '', ''));
    imageArray.push(imageSet('fire07_thumb', 'fire07_after', '', ''));
    imageArray.push(imageSet('fire08_thumb', 'fire08_after', '', ''));
    imageArray.push(imageSet('fire09_thumb', 'fire09_after', '', ''));        
    return imageArray;
}