﻿// Author: Scott Wespi (scott@darkstardesign.com) - Finish and hardware switching script
var curImage;
var curThumb;
var curOver;
var curOverThumb;
// class names - standard finishes
var cn_hidden = 'hidden';
var cn_mainImgShow = 'finish_fimg_show';
var cn_nonThumb = 'finish_fli_non';
var cn_curThumb = 'finish_fli_cur';
var cn_hovThumb = 'finish_fli_hover';
// class names - overlay finishes
var cn_over_hidden = 'hidden';
var cn_over_mainImgShow = 'finish_oimg_show';
var cn_over_nonThumb = 'finish_oli_non';
var cn_over_curThumb = 'finish_oli_cur';
var cn_over_hovThumb = 'finish_oli_hover';

function Finisher(finishListID, finishImagesID, bOverlay, captionid) {
    // finishListID - the ID of the UL that contains all of the finish thumbs and text
    // finishImagesID - the ID of the element that contains all of the finish main images
    // bOverlay - whether or not this group of finishes is an overlay
    // captionid - the id of the caption element used to show the current finish/overlay
    var tmpF = document.getElementById(finishListID).getElementsByTagName('li');
    var tmpFMI = document.getElementById(finishImagesID).getElementsByTagName('img');
    
    this.finishList = new Array(tmpF.length);
    this.overlay = bOverlay;
    this.caption = document.getElementById(captionid);
    
    if (this.finishList.length == tmpFMI.length) { 
        for (i=0;i<this.finishList.length;i++){
            this.finishList[i] = new Finish(tmpF[i], tmpFMI[i], tmpF[i].getElementsByTagName('span')[0].innerHTML);
            if (this.overlay) {
                AttachOverlayFuncs(i, this);
            } else {
                AttachFinishFuncs(i, this);
            }
        }       
    } else {
        alert ('Error - every finish type needs at least one corresponding main image.');
    }
}

Finisher.prototype.init = function() {
    // init - show the first finish if there are no finishes shown
    if (this.overlay) {
        if (!isset(curOver)){
            curOver = this.finishList[0].mainImage;
            curOverThumb = this.finishList[0].content;
            this.finishList[0].show();
        }    
    } else {
        if (!isset(curImage)){
            curImage = this.finishList[0].mainImage;
            curThumb = this.finishList[0].content;
            this.finishList[0].show();
        }
    }
};

function AttachOverlayFuncs(i, main) {
    main.finishList[i].show = function () {
        // show finish overlay
        curOver.className = cn_over_hidden;
        curOver = main.finishList[i].mainImage;
        curOver.className = cn_over_mainImgShow;        
        
        curOverThumb.className = cn_over_nonThumb;
        curOverThumb = main.finishList[i].content;
        curOverThumb.className = cn_over_curThumb;
        // set the caption overlay text
        main.caption.getElementsByTagName('span')[1].innerHTML = "<b>" + main.finishList[i].caption + "</b>&nbsp;hardware";
    };
    main.finishList[i].content.onclick = function() {
        main.finishList[i].show();
    };
    main.finishList[i].content.onmouseover = function() {
        if (this.className == cn_over_nonThumb) {
            this.className = cn_over_hovThumb;
        }
    };
    main.finishList[i].content.onmouseout = function() {
        if (this.className == cn_over_hovThumb) {
            this.className = cn_over_nonThumb;
        }
    };
}

function AttachFinishFuncs(i, main) {
    main.finishList[i].show = function () {
        // show finish 
        curImage.className = cn_hidden;
        curImage = main.finishList[i].mainImage;
        curImage.className = cn_mainImgShow;        
        
        curThumb.className = cn_nonThumb;
        curThumb = main.finishList[i].content;
        curThumb.className = cn_curThumb;
        // set the caption finish text
        main.caption.getElementsByTagName('span')[0].innerHTML = "<b>" + main.finishList[i].caption + "</b>&nbsp;finish";        
    };
    main.finishList[i].content.onclick = function() {
        main.finishList[i].show();
    };
    main.finishList[i].content.onmouseover = function() {
        if (this.className == cn_nonThumb) {
            this.className = cn_hovThumb;
        }
    };
    main.finishList[i].content.onmouseout = function() {
        if (this.className == cn_hovThumb) {
            this.className = cn_nonThumb;
        }
    };
}

function Finish(content, mainImage, caption) {
    // finish class initializer
    this.content = content;
    this.mainImage = mainImage;
    this.caption = caption;
}

function isset(varname){
    // very loose interpretation of "isset" - works only for global variables.
	return(typeof(varname)!='undefined');
}