panel = {
	copy: { 
		fill: "Fill",
		frame: "Frame"
	},

	fillContent: [],
	
	activeCategory: 0,
	categoryItem: [],

	activeFillItem: [],
	selectableFillItems: 1,

	frameItem: [],

	activeFrameItem: [],
	selectableFrameItems: 1,
	
	//* Added by SYSteam
	allowTwoFillings: true,
	allowFrames: true,
	// Added by SYSteam *//

	init: function() {

//		this.detectFillContent();
//		this.detectFrameItems();
//		this.detectCategoryItems();
		
//		if (this.fillContent.length>0) {
//			this.selectFillContent(0, this.categoryItem[0]);
//		}
		this.selectThumbItem(document.getElementById("p1313_imageThumb0"), document.getElementById("midpic").src);
		
	},

	updateOutput: function() {
	
		var sOutput = "";

		var sDevider = "  ";

		var sFill = this.copy.fill;
		var sFrame = this.copy.frame;

		aActive = this.activeFillItem;
		if (aActive.length>0) { 
			sOutput += sFill+": ";
			for (var i=0; i<aActive.length; i++) {
				var oItem = aActive[i];
				sOutput += oItem.title;
				if (i+1<aActive.length) {
					sOutput += " & ";
				}
			}
		}

		aActive = this.activeFrameItem;
		if (aActive.length>0) { 
			sOutput += sDevider+" "+sFrame+": ";
			for (var i=0; i<aActive.length; i++) {
				var oItem = aActive[i];
				sOutput += oItem.title;
				if (i+1<aActive.length) {
					sOutput += " & ";
				}
			}
		}

		var oOutput = document.getElementById("p1313_output");
		oOutput.innerHTML = sOutput;
	
	},

	detectFillContent: function() {
	
		var bResult = true;
		var aContent = this.fillContent;

		for (var i=0; i<10 && bResult==true; i++) {

			var oContent = document.getElementById("p1313_fillContent"+i);
			bResult = (oContent!=null && oContent.className=="p1313_fillContent");

			if (bResult==true) {

				var aItem = oContent.fillItem = [];

				for (var j=0; j<oContent.childNodes.length; j++) {
					var oItem = oContent.childNodes[j];
					if (oItem.className!=null && oItem.className.indexOf("fillItem")) {
						var iItemCount = aItem.length;
						aItem[iItemCount] = oItem;
					}
				}

				var iContentCount = aContent.length;
				aContent[iContentCount] = oContent;

			}
			
		}
	
	},
	
	detectFrameItems: function() {

		var bResult = true;
		var aItem = this.frameItem;

		var oContent = document.getElementById("p1313_frameContent");

		for (var j=0; j<oContent.childNodes.length; j++) {
			var oItem = oContent.childNodes[j];
			if (oItem.className!=null && oItem.className.indexOf("frameItem")) {
				var iItemCount = aItem.length;
				aItem[iItemCount] = oItem;
			}
		}

	},

	detectCategoryItems: function() {

		var bResult = true;
		var aItem = this.categoryItem;

		var oContent = document.getElementById("p1313_categoryPanel");

		for (var j=0; j<oContent.childNodes.length; j++) {
			var oItem = oContent.childNodes[j];
			if (oItem.className!=null && oItem.className.indexOf("fillCategory")) {
				var iItemCount = aItem.length;
				aItem[iItemCount] = oItem;
			}
		}

	},

	setSelectableFillItems: function(option) {
		this.selectableFillItems = option;

		var aTempItem = [];
		var aActiveItem = this.activeFillItem;

		for (var i=0; i<aActiveItem.length; i++) {
			if (i<option) {
				aTempItem[i] = aActiveItem[i];
			}
		}
		if(option<2) {
			document.getElementById("p1313_viewFill2text").style.display = "none";
		} else {
			document.getElementById("p1313_viewFill2text").style.display = "block";
		}
		
		this.activeFillItem = aTempItem;

		this.updateFillItems();
		this.updateViewContent();
		this.updateOutput();
	},

	selectPanel: function(option) {

		if (option==1) {
			var oIntroPanel = document.getElementById("p1313_introPanel");
			oIntroPanel.style.display = "none";
			var oFillPanel = document.getElementById("p1313_fillPanel");
			oFillPanel.style.display = "block";
		}
		if (option==2) {
			var oFramePanel = document.getElementById("p1313_framePanel");
			oFramePanel.style.display = "block";
		}
	
	},
	
	selectFillContent: function(id, category) {
		if (id==null) {
			id = 0;
		}

		var oActiveContent = this.fillContent[id];

		if (oActiveContent!=null) {
			this.activeFillContent = oActiveContent;
			this.updateFillContent();
			this.updateFillItems();
		}
		for (var i=0;i<this.categoryItem.length;i++) {
			aItem = this.categoryItem[i];
			if(aItem == category) {
				aItem.style.backgroundImage="url('images/1313_fillbutton_bg1.gif')";
				//aItem.style.color="#CC162C";
				aItem.className= "p1313_fillCategory SlidingDoorFillColor";
			} else {
				aItem.style.backgroundImage="url('images/1313_fillbutton_bg0.gif')";
				//aItem.style.color="#333333";
				aItem.className= "p1313_fillCategory SlidingDoorFillWhite";
			}
		}

	},

	updateFillContent: function(option) {
	
		for (var i=0; i<this.fillContent.length; i++) {
			var oContent = this.fillContent[i];
			var sDisplay = (oContent==this.activeFillContent)? "block" : "none";
			oContent.style.display = sDisplay;
		}
		
	},

	updateViewContent: function() {

		// TODO: Automatically detect!
		var iMaxSelectableFillItems = 2;

		var aFill = this.activeFillItem;
		var aFrame = this.activeFrameItem;

		for (var i=0; i<aFill.length || i<iMaxSelectableFillItems; i++) {

			var oFill = document.getElementById("p1313_viewFill"+(i+1));
			var oFillItem = aFill[i];

			if (oFill!=null) {
				if (oFillItem!=null) {
	
					oFill.style.display = "block";
				
					var oFillImage = oFill.firstChild;
					var oFillItemImage = oFillItem.firstChild;

					// TODO: Use large format!
					//oFillImage.src = oFillItemImage.src.replace(".gif", "_large.gif");
					oFillImage.src = oFillItemImage.nextSibling.src;

				} else {
					oFill.style.display = "none";
				}
			}
		}

		var oFillSwitch1 = document.getElementById("p1313_viewSwitch1");
		var oFillSwitch2 = document.getElementById("p1313_viewSwitch2");

		var oFrame = document.getElementById("p1313_viewFrame");
		var oFrameText = document.getElementById("p1313_viewFrameText");

		if (aFill.length<1) {
			
			oFrame.style.display = "none";
			oFrameText.style.display = "none";

			oFillSwitch1.style.display = "none";
			oFillSwitch2.style.display = "none";
			
		} else {
			
			if (aFrame.length<1) {

				oFrame.style.display = "none";
				oFrameText.style.display = "block";

			} else {

				oFrame.style.display = "block";
				oFrameText.style.display = "none";

				var oFrameItem = aFrame[0];
				var oFrameImage = oFrame.firstChild;
				var oFrameItemImage = oFrameItem.firstChild;

				// TODO: Use large format!
				//oFrameImage.src = oFrameItemImage.src.replace(".gif", "_large.gif");
				oFrameImage.src = oFrameItemImage.nextSibling.src;
				if (this.selectableFillItems==1) {
					oFillSwitch1.style.display = "none";
					//* Changed by SYSteam //
					if (this.allowTwoFillings)
						oFillSwitch2.style.display = "block";
					else
						oFillSwitch2.style.display = "none";
					// Changed by SYSteam *//
				}
				if (this.selectableFillItems==2) {
					oFillSwitch1.style.display = "block";
					oFillSwitch2.style.display = "none";
				}
				
			}
			
		}

	},

	selectFillItem: function(item) {

		if (item==null) {
			item = this.activeFillContent.fillItem[0];
		}

		if (item!=null && item!=this.activeFillItem[0]) {

			var aActiveItem = [ item ];
		
			for (var i=0; i<this.selectableFillItems-1 && i<this.activeFillItem.length; i++) {
				var iItemCount = aActiveItem.length;
				aActiveItem[iItemCount] = this.activeFillItem[i];
			}

			this.activeFillItem = aActiveItem;

		}
		
		//* added by SYSteam //
		if (this.allowFrames) 
			this.selectPanel(2);
		else
			document.getElementById("p1313_viewFrameText").innerHTML = "";
		// added by SYSteam *//
		this.updateFillItems();
		this.updateViewContent();
		this.updateOutput();
		document.getElementById("p1313_viewFill2text").style.display = "none";

	},

	updateFillItems: function() {

		var aActiveItem = this.activeFillItem;
		var aActiveContent = this.activeFillContent;

		for (var i=0; i<aActiveContent.fillItem.length; i++) {
			var oItem = aActiveContent.fillItem[i];
			
			var bSelected = false;
			
			for (var j=0; j<aActiveItem.length; j++) {
				var oActiveItem = aActiveItem[j];
				if (oItem==oActiveItem) {
					bSelected = true;
				}
			}
			
			if (bSelected==true) {
				//oItem.style.borderColor = "#FF0000";
				oItem.className = "p1313_fillItem ThumbColorBorder";
			} else {
				//oItem.style.borderColor = "#FFFFFF";
				oItem.className = "p1313_fillItem ThumbWhiteBorder";
			}
		}
	
	},

	selectFrameItem: function(item) {

		if (item==null) {
			item = this.frameItem[0];
		}

		if (item!=null && item!=this.activeFrameItem[0]) {

			var aActiveItem = [ item ];
		
			for (var i=0; i<this.selectableFrameItems-1 && i<this.activeFrameItem.length; i++) {
				var iItemCount = aActiveItem.length;
				aActiveItem[iItemCount] = this.activeFrameItem[i];
			}

			this.activeFrameItem = aActiveItem;
		}
		
		this.updateFrameItems();
		this.updateViewContent();
		this.updateOutput();

	},

	updateFrameItems: function() {

		var aActiveItem = this.activeFrameItem;					

		for (var i=0; i<this.frameItem.length; i++) {
			var oItem = this.frameItem[i];
			
			var bSelected = false;
			
			for (var j=0; j<aActiveItem.length; j++) {
				var oActiveItem = aActiveItem[j];
				if (oItem==oActiveItem) {
					bSelected = true;
				}
			}
			if (bSelected==true) {
				//oItem.style.borderColor = "#FF0000";
				oItem.className ="p1313_frameItem ThumbColorBorder";
			} else {
				//oItem.style.borderColor = "#CCCCCC";
			    oItem.className ="p1313_frameItem ThumbWhiteBorder";
			}
		}
	},

	selectThumbItem: function(item, source) {

		var oThumbItem = item.firstChild;
		var sSource = oThumbItem.src;
		
		var i = 0;
		var j = null;
		while(j = document.getElementById("p1313_imageThumb" + i)) {
			//j.style.borderColor = "#FFFFFF";
			j.className ="p1313_imageThumbItem ThumbWhiteBorder";
			i++;
		}
		document.getElementById("p1313_viewFill2text").style.display = "none";

		// changed by SYSteam 051115
		if (source != null)
			sSource = source;
		else
			sSource = sSource.replace(".jpg", "_large.jpg");
		// changed by SYSteam 051115
			
		//item.style.borderColor = "#CC162C";
		item.className = "p1313_imageThumbItem ThumbColorBorder";

		var oViewItem = document.getElementById("p1313_viewImage").firstChild;
		oViewItem.src = sSource;

//		this.activeFillItem = [];
//		this.activeFrameItem = [];
//		this.updateFillItems();
//		this.updateFrameItems();
//		this.updateViewContent();

		var oOutput = document.getElementById("p1313_output");
		oOutput.innerHTML = item.title;
	
//		document.getElementById("p1313_framePanel").style.display = "none";

	}

}