var aThumbPaths = new Array();
var aFullImagePaths = new Array();
var aThumbAltText = new Array();
var aThumbDescription = new Array();

function btnClear_onclick() {
	getElem("inpThumbPath").value = "";
	getElem("inpImagePath").value = "";
	getElem("inpThumbAltText").value = "";
	getElem("inpThumbDescription").value = "";
};

function btnAdd_onclick() {
	var _sThumbPath = getElem("inpThumbPath").value.toString();
	if (_sThumbPath.length > 0) {
		
		getElem("inpThumbPath").style.backgroundColor = "";
		getElem("btnAdd").style.backgroundColor = "";
		
		aThumbPaths[aThumbPaths.length] = _sThumbPath;
		aFullImagePaths[aFullImagePaths.length] =getElem("inpImagePath").value.toString();
		aThumbAltText[aThumbAltText.length] = getElem("inpThumbAltText").value.toString();
		aThumbDescription[aThumbDescription.length] = getElem("inpThumbDescription").value.toString();
		
		repopulateCurrentThumbs();
		btnClear_onclick();
		getElem("inpThumbPath").focus();
	} else {
		getElem("inpThumbPath").style.backgroundColor = "#CCCCFF";
		alert('A "Thumbnail Path" is required.');
		getElem("inpThumbPath").focus();
	}
};

function repopulateCurrentThumbs() {
	var _selObj = getElem("selCurrentThumbs");
	for (x = _selObj.childNodes.length; x > -1; x--) {
		_selObj.options[x] = null;
	}
	
	for (i = 0; i < aThumbPaths.length; i++) {
		_optObj = newElem("option");
		_textObj = document.createTextNode(aThumbPaths[i]);
			_optObj.appendChild(_textObj);
			_selObj.appendChild(_optObj);
	}
};

function btnBack_4_onclick() {
	togglePageElement("divPage_3", "hide");
	togglePageElement("divPage_2", "show");
};

function btnNext_1_onclick() {
	var _selObj = getElem("selCurrentThumbs");
	if ((_selObj.options.length) > 0) {
		getElem("inpThumbPath").style.backgroundColor = "";
		getElem("inpThumbPath").style.backgroundColor = "";
		populateNumOfThumbsShown();
		togglePageElement("divPage_1", "hide");
		togglePageElement("divPage_2", "show");
	} else {
		getElem("inpThumbPath").style.backgroundColor = "#CCCCFF";
		getElem("btnAdd").style.backgroundColor = "#CCCCFF";
		alert('You have not added any Thumbnail images. Please enter a path to a valid image and then click "Add" button.');
		getElem("inpThumbPath").focus();
	}
};

function btnMoveDown_onclick() {
	var _selObj = getElem("selCurrentThumbs");
	if ((_selObj.selectedIndex + 1) > 0 && _selObj.selectedIndex < (_selObj.childNodes.length - 1)) {
		_selObj.options[_selObj.selectedIndex].swapNode(_selObj.options[_selObj.selectedIndex + 1]);
	}
};

function btnMoveUp_onclick() {
	var _selObj = getElem("selCurrentThumbs");
	if ((_selObj.selectedIndex - 1) > -1) {
		_selObj.options[_selObj.selectedIndex].swapNode(_selObj.options[_selObj.selectedIndex - 1]);
	}
};

function btnDeleteSelected_onclick() {	
	var _selObj = getElem("selCurrentThumbs");
	if (_selObj.selectedIndex > -1) {
		_selObj.options[_selObj.selectedIndex] = null;
	}
};

function btnFinish_onclick() {
	togglePageElement("divPage_2", "hide");
	togglePageElement("divPage_3", "show");
	generateFinalCode();
};

function btnPreview_onclick() {

};

function btnBack_3_onclick() {
	togglePageElement("divPage_2", "hide");
	togglePageElement("divPage_1", "show");
	getElem("inpThumbPath").focus();
};

function togglePageElement(elementIdToToggle, toggleType) {
    if (toggleType.toLowerCase() == "show" || toggleType.toLowerCase() == "hide") {
        if (toggleType.toLowerCase() == "show") {
			getElem(elementIdToToggle).style.display = "";
		}
		if (toggleType.toLowerCase() == "hide") {
			getElem(elementIdToToggle).style.display = "none";
		}		
    } else {
        if (getElem(elementIdToToggle).style.display == "none") {
            getElem(elementIdToToggle).style.display = "";
        } else {
            getElem(elementIdToToggle).style.display = "none";
        }
    }
};

var iRetryAttempt = 0;
var iMaxAttachRetry = 3;
function addAnEvent(_obj, _eventName, _functionName) {
	if (_obj != null && _obj != "undefined") {
		if (window.addEventListener) {
			_obj.addEventListener(_eventName, _functionName, false);
		} else {
			_obj.attachEvent("on" + _eventName, _functionName);
		}
		iRetryAttempt = 0;
	} else {
		if (iRetryAttempt  < iMaxAttachRetry) {
			try {
				iRetryAttempt++;
				window.setTimeout(addAnEvent(_obj, _eventName, _functionName), 1000);
			} catch(Exceptions) {
				return;
			}
		}
	}
};
function populateNumOfThumbsShown() {
	var _selObj = getElem("selThumbsShown");
	for (x = _selObj.childNodes.length; x > -1; x--) {
		_selObj.options[x] = null;
	}
	
	for (i = 0; i < aThumbPaths.length; i++) {
		_optObj = newElem("option");
		_textObj = document.createTextNode(i + 1);
			_optObj.appendChild(_textObj);
            addAttrib(_optObj, "value", i + 1);
            addAttrib(_optObj, "selected", false);
			_selObj.appendChild(_optObj);
	}
};
function newElem(_newElem) {
    return document.createElement(_newElem);
};

function addAttrib(_element, _attrib, _value) {             
    var _newAttrib = document.createAttribute(_attrib);
        _newAttrib.nodeValue = _value;
        _element.setAttributeNode(_newAttrib);                    
};

function getElem(_elemID) {
    return document.getElementById(_elemID);
};


function cbCounterDivID_onclick() {
	if (getElem("cbCounterDivID").checked == true) {
		getElem("inpCounterDivID").disabled = false;
		getElem("inpCounterDivID").style.backgroundColor = "";
	} else {
		getElem("inpCounterDivID").disabled = true;
		getElem("inpCounterDivID").style.backgroundColor = "#cccccc";
	}
}

function cbDescriptionDivID_onclick() {
	if (getElem("cbDescriptionDivID").checked == true) {
		getElem("inpDescriptionDivID").disabled = false;
		getElem("inpDescriptionDivID").style.backgroundColor = "";
	} else {
		getElem("inpDescriptionDivID").disabled = true;
		getElem("inpDescriptionDivID").style.backgroundColor = "#cccccc";
	}
}

function rdNextText_onclick() {
    getElem("inpNextText").disabled = false;
	getElem("inpNextText").style.backgroundColor = "";
    getElem("inpNextImagePath").disabled = true;
	getElem("inpNextImagePath").style.backgroundColor = "#cccccc";
}

function rdNextImage_onclick() {
    getElem("inpNextText").disabled = true;
	getElem("inpNextText").style.backgroundColor = "#cccccc";
    getElem("inpNextImagePath").disabled = false;
	getElem("inpNextImagePath").style.backgroundColor = "";
}

function rdBackText_onclick() {
    getElem("inpBackText").disabled = false;
	getElem("inpBackText").style.backgroundColor = "";
    getElem("inpBackImagePath").disabled = true;
	getElem("inpBackImagePath").style.backgroundColor = "#cccccc";
}

function rdBackImage_onclick() {
    getElem("inpBackText").disabled = true;
	getElem("inpBackText").style.backgroundColor = "#cccccc";
    getElem("inpBackImagePath").disabled = false;
	getElem("inpBackImagePath").style.backgroundColor = "";
}

function generateFinalCode() {
	var _sFinalCode = "";
	var _objCodeArea = getElem("taFinalCode");
		_objCodeArea.disabled = true;
		_objCodeArea.innerHTML = "";
	
	_sFinalCode += createISScrollerJSLink() + '\n\r';
	_sFinalCode += createISScrollerHTML() + '\n\r';	
	
	_objCodeArea.value = _sFinalCode;
		_objCodeArea.disabled = false;
};
function createISScrollerHTML() {
	var _sFinalRandom = "_" + Math.round(999999 * Math.random());

	var _sFinalCode = '';
		_sFinalCode += '<table cellpadding="0" cellspacing="0"><tr valign="top"><td>' + '\n\r';
		_sFinalCode += '<a id="previousButton" href="javascript:myScroller.scrollReverse();">';
	
		if (getElem("rdBackText").checked) {
			_sFinalCode += getElem("inpBackText").value;
		} else {
			_sFinalCode += '<img src="' + getElem("inpBackImagePath").value + '" alt="See last image" style="margin-top: 3px;" border="0"/>';
		}
		
		_sFinalCode += '</a>' + '\n\r';
		_sFinalCode += '</td><td>' + '\n\r';
		
		if (getElem("cbCounterDivID").checked && getElem("inpCounterDivID").value.length > 1) {
			_sFinalCode += '' + '\n\r';		
			_sFinalCode += '<!-- MOVE THIS DIV WHERE THE COUNTER SHOULD APPEAR ON THE PAGE -->' + '\n\r';		
			_sFinalCode += '<div id="isCounterDiv"></div>' + '\n\r';
		}
		
		if (getElem("cbDescriptionDivID").checked && getElem("inpCounterDivID").value.length > 1) {
			_sFinalCode += '' + '\n\r';		
			_sFinalCode += '<!-- MOVE THIS DIV WHERE THE DESCRIPTION SHOULD APPEAR ON THE PAGE -->' + '\n\r';
			_sFinalCode += '<div id="isThumbDescription"></div>' + '\n\r';
		}
		
		_sFinalCode += '' + '\n\r';
		_sFinalCode += '<div id="isFrame" name="isFrame" style="margin: 0px; padding: 0px; position: relative; overflow: hidden;">' + '\n\r';
		_sFinalCode += '' + '\n\r';
		_sFinalCode += '<div id="isImageRow" name="isImageRow" style="position: absolute; top: 0px; left: 0px;">' + '\n\r';
		_sFinalCode += '' + '\n\r';
		_sFinalCode += '<scr' + 'ipt type="text/javascript">' + '\n\r';
		_sFinalCode += 'var myScroller = new ImageScroller("isFrame", "isImageRow");' + '\n\r';
		
		for (t = 0; t < aThumbPaths.length; t++) {
			_sFinalCode += 'myScroller.addThumbnail("' + aThumbPaths[t] + '","' + aFullImagePaths[t] + '", "' + aThumbAltText[t] + '", "' + aThumbDescription[t] + '");' + '\n\r';
		}
		
		if (getElem("cbCounterDivID").checked && getElem("inpCounterDivID").value.length > 1) {
			_sFinalCode += 'myScroller.enableCurrentCount("isCounterDiv");' + '\n\r';
		}
		
		if (getElem("cbDescriptionDivID").checked && getElem("inpCounterDivID").value.length > 1) {
			_sFinalCode += 'myScroller.enableThumbnailDescription("isThumbDescription");' + '\n\r';
		}
		
		_sFinalCode += 'myScroller.setThumbnailHeight(' + getElem("inpThumbHeight").value + ');' + '\n\r';
		_sFinalCode += 'myScroller.setThumbnailWidth(' + getElem("inpThumbWidth").value + ');' + '\n\r';
		_sFinalCode += 'myScroller.setThumbnailPadding(' + getElem("inpThumbPadding").value + ');' + '\n\r';		
		_sFinalCode += 'myScroller.setScrollSpeed(' + getElem("inpScrollDelay").value + ');' + '\n\r';
		_sFinalCode += 'myScroller.setScrollAmount(' + getElem("inpScrollAmount").value + ');' + '\n\r';		
		_sFinalCode += 'myScroller.enableThumbBorder(' + getElem("cbHrefBorder").checked + ');' + '\n\r';
		
		if (getElem("rdHorizontalLayout").checked) {
			_sFinalCode += 'myScroller.setScrollType(0);' + '\n\r';
		} else {
			_sFinalCode += 'myScroller.setScrollType(1);' + '\n\r';
		}
		
		var _iCT;
			if (getElem("cbHrefBorder").checked) { _iCT = 1; } else { _iCT = 0; };
			
		_sFinalCode += 'myScroller.setClickOpenType(' + _iCT + ');' + '\n\r';
		
		_sFinalCode += 'myScroller.setThumbsShown(' + getElem("selThumbsShown").value + ');' + '\n\r';
		
		_sFinalCode += 'myScroller.renderScroller();' + '\n\r';
		_sFinalCode += '</scr' + 'ipt>' + '\n\r';
		_sFinalCode += '</div>' + '\n\r';
		_sFinalCode += '</div>' + '\n\r';
		_sFinalCode += '</td><td>' + '\n\r';
		_sFinalCode += '<a id="nextButton" href="javascript:myScroller.scrollForward();">';
		
		if (getElem("rdNextText").checked) {
			_sFinalCode += getElem("inpNextText").value;
		} else {
			_sFinalCode += '<img src="' + getElem("inpNextImagePath").value + '" alt="See next image" style="margin-top: 3px;" border="0"/>';
		}
		
		_sFinalCode += '</a>' + '\n\r';
		_sFinalCode += '</td></tr></table>' + '\n\r';
		
	return _sFinalCode;
};
function createISScrollerJSLink() {
	var _sFinalCode = '<script type="text/javasc' + 'ript" src="thumbscroller.js">' + '</scri' + 'pt>';
	return _sFinalCode;
};