var cloneIndex = 100;
var product = new Array;

function Product(_seq, _colorStyle, _name, _imageSrc, _option1, _option2, _option3, _option4, _option5, _option6, _option7, _option8) {
	this.productListInstanceName = "productList";
	this.groupName = "product";
	this.index = eval(this.groupName+".length");
	this.id = this.groupName + "-" + this.index;
	
	this.seq = _seq;
	this.colorStyle = _colorStyle.toUpperCase();
	this.name = _name;
	this.imageSrc = _imageSrc;
	this.options = {
		  year		: _option1
		, network	: _option2
		, style		: _option3
		, camera	: _option4
		, ringtone	: _option5
		, lcdColor	: _option6
		, lcdSize	: _option7
		, features	: _option8
	};
	
	this.maximizedBodyHeight = 104;
	
	this.targetArea = {
		  id : ""
	}
	
	this.status = {
		  moveMode : ""
		, dragAndDropMode : ""
		, isBasketMode : false
		, isMaximizedMode : true
		, isShowMode : false
		, isSearchResult : true
	}
	
	this.vars = {
		errorMessage1	: "Only 3 Items to compare with."
	}
	
	this.dropZones = new Array;
	
	this.listAreas = new Array("listCol-0", "listCol-1", "listCol-2", "listCol-3");
	
	this.ids = {
		  button1				: this.id + "-buttonAddToBasket"
		, button2				: this.id + "-buttonRemoveFromBasket"
		, button3				: this.id + "-buttonMinimize"
		, button4				: this.id + "-buttonMaximize"
		, image1				: this.id + "-imageProduct"
		, image2				: this.id + "-imageLoading"
		, area1					: this.id + "-areaChangeBasketModeButton"
		, area2					: this.id + "-areaBasketModeAlt"
		, area3					: this.id + "-areaBodyContents"
		, area4					: this.id + "-areaProduct"
		, text1					: this.id + "-textAddToBasket"
		, text2					: this.id + "-textRemoveFromBasket"
		, tempArea1				: this.id + "-prevAreaTempe"
		, tempArea2				: this.id + "-insertAreaTempe"
		, temp1					: this.id + "-prevAreaTempeChild"
		, temp2					: this.id + "-insertAreaTempeChild"
		, resetArea				: this.listAreas[0]
		, basket				: "areaBasket"
		, basketAreaDropZone	: "areaBasket-DropZone"
	}
	
	this.getInstanceName = function() {
		return this.groupName+"["+this.index+"]";
	}
	
	this.getStyleColor = function() {
		var color = "#8AA779";
		if (this.colorStyle=="PRACTICAL") {
			color = "#8AA779";
		} else if (this.colorStyle=="STYLISH") {
			color = "#B36C96";
		} else if (this.colorStyle=="ENTERTAINING") {
			color = "#EB926A";
		} else if (this.colorStyle=="MULTIMEDIA") {
			color = "#8F8F8F";
		} else if (this.colorStyle=="BUSINESS") {
			color = "#757AA2";
		}
		return color;
	}
	
	this.getDarkStyleColor = function() {
		var color = "#6E8861";
		if (this.colorStyle=="PRACTICAL") {
			color = "#6E8861";
		} else if (this.colorStyle=="STYLISH") {
			color = "#8F5676";
		} else if (this.colorStyle=="ENTERTAINING") {
			color = "#D27951";
		} else if (this.colorStyle=="MULTIMEDIA") {
			color = "#727272";
		} else if (this.colorStyle=="BUSINESS") {
			color = "#5E6383";
		}
		return color;
	}
	
	this.getProductListInstanceName = function() {
		return eval(this.productListInstanceName);
	}
	
	this.isExcessiveNumberOfProducts = function() {
		return this.getProductListInstanceName().isExcessiveNumberOfProducts();
	}
	
	this.setBasketAltText = function() {
		$(this.ids.text1).setStyle("display",!this.status.isBasketMode);
		$(this.ids.text2).setStyle("display",this.status.isBasketMode);
	}
	
	this.showBasketAlt = function() {
		this.setBasketAltText();
		$(this.ids.area1).setStyle("backgroundColor",this.getDarkStyleColor());
		$(this.ids.area2).setStyle("display",true);
	}
	
	this.hideBasketAlt = function() {
		this.setBasketAltText();
		$(this.ids.area1).setStyle("backgroundColor","");
		$(this.ids.area2).setStyle("display",false);
	}
	
	this.chageBasketModeStatus = function(_isBasketMode) {
		this.status.isBasketMode = _isBasketMode;
		$(this.ids.button1).setStyle("display",!this.status.isBasketMode);
		$(this.ids.button2).setStyle("display",this.status.isBasketMode);
	}
	
	this.changeBasketMode = function() {
		if (this.status.moveMode!="ing") {
			if (!this.status.isBasketMode&&this.isExcessiveNumberOfProducts()) {
				kidow.alert(this.vars.errorMessage1, true);
			} else {
				this.status.moveMode = "ing";
				this.chageBasketModeStatus(!this.status.isBasketMode);
				if (this.status.isBasketMode) {
					this.targetArea.id = this.ids.basket;
				} else {
					this.targetArea.id = this.getRandomTargetArea();
				}
				this.hideBasketAlt();
				this.setAbsolute();
				this.moveToTargetArea();
			}
		}
	}
	
	this.changeMaximizedMode = function() {
		if ($(this.ids.area3).getAttribute("resizeStatus")!="ing") {
			if (!this.status.isMaximizedMode) {
				this.setMaximizedMode();
			} else {
				this.setMinimizedMode();
			}
		}
	}
	
	this.setMaximizedMode = function(_useEffect) {
		if ($(this.ids.area3).getAttribute("resizeStatus")!="ing") {
			this.status.isMaximizedMode = true;
			$(this.ids.button3).setStyle("display",this.status.isMaximizedMode);
			$(this.ids.button4).setStyle("display",!this.status.isMaximizedMode);
			if (_useEffect==null) _useEffect = true;
			if (_useEffect) {
				$(this.ids.area3).setStyle("display", true);
				$(this.ids.area3).resizeTo(null,this.maximizedBodyHeight);
			} else {
				$(this.ids.area3).setStyle("height", this.maximizedBodyHeight);
				$(this.ids.area3).setStyle("display", true);
			}
		}
	}
	
	this.setMinimizedMode = function(_useEffect) {
		if ($(this.ids.area3).getAttribute("resizeStatus")!="ing") {
			this.status.isMaximizedMode = false;
			$(this.ids.button3).setStyle("display",this.status.isMaximizedMode);
			$(this.ids.button4).setStyle("display",!this.status.isMaximizedMode);
			if (_useEffect==null) _useEffect = true;
			if (_useEffect) {
				$(this.ids.area3).resizeTo(null,0,"$('"+this.ids.area3+"').setStyle('display',false)");
			} else {
				$(this.ids.area3).setStyle("height", 1);
				$(this.ids.area3).setStyle("display", false);
			}
		}
	}
	
	this.getRandomTargetArea = function() {
		var targetAreaId = "";
		var fewChildAreaId = this.listAreas[0];
		var fewChildCount = $(this.listAreas[0]).childNodes.length;
		var childNodesLength = 0;
		for (var i=0; i<this.listAreas.length; i++) {
			childNodesLength = $(this.listAreas[i]).childNodes.length;
			if (childNodesLength<fewChildCount) {
				fewChildCount = childNodesLength;
				fewChildAreaId = this.listAreas[i];
			}
		}
		targetAreaId = fewChildAreaId + "-bottom";
		return targetAreaId;
	}
	
	this.moveToTargetArea = function() {
		this.status.moveMode = "ing";
		if ($(this.targetArea.id).isNull||this.targetArea.id==this.id) {
			this.targetArea.id = this.ids.resetArea;
		}
		$(this.id).moveToTarget(this.targetArea.id,this.getInstanceName()+".makeInsertArea()");
	}
	
	this.insertProduct = function() {
		var prevDiv = $(this.ids.tempArea2);
		if (prevDiv.isNull) {
			this.removeHTML();
			return;
		}
		var div = $(this.id);
		div.removeChild($(this.ids.temp2));
		for (var i=0; i<prevDiv.childNodes.length; i++) {
			div.appendChild(prevDiv.childNodes[i]);
		}
		div.setStyle("height", "");
		prevDiv.parentNode.removeChild(prevDiv);
		div = null;
		prevDiv = null;
		this.status.moveMode = "";
	}
	
	this.makeInsertArea = function() {
		var targetArea = $(this.targetArea.id);
		if (targetArea.isNull) {
			this.removeHTML();
			return;
		}
		var div = document.createElement("DIV");
		var divId = this.id;
		var prevDiv = $(this.id);
		prevDiv.setAttribute("id",this.ids.tempArea2);
		prevDiv = null;
		prevDiv = $(this.ids.tempArea2);
		div.setAttribute("id",divId);
		div.setAttribute("areaType","product");
		div.style.width = prevDiv.getW() + "px";
		div.innerHTML = '<table id="'+this.ids.temp2+'" width="1" height="1" cellpadding="0" cellspacing="0" border="0"><tr><td></td></tr></table>';
		if (targetArea.getAttribute("areaType")=="product") {
			targetArea.parentNode.insertBefore(div,targetArea);
		} else {
			if (targetArea.childNodes.length>0) {
				targetArea.insertBefore(div,targetArea.firstChild);
			} else {
				targetArea.appendChild(div);
			}
		}
		$(divId).resizeTo(null,prevDiv.getH(),this.getInstanceName()+".insertProduct()");
		targetArea = null;
		div = null;
		prevDiv = null;
	}
	
	this.setAbsolute = function() {
		var div = document.createElement("DIV");
		var divId = this.id;
		var prevDiv = $(this.id);
		div.style.position = "absolute";
		div.style.zIndex = cloneIndex++;
		div.style.left = prevDiv.getX() + "px";
		div.style.top = prevDiv.getY() + "px";
		prevDiv.setAttribute("id",this.ids.tempArea1);
		prevDiv.removeAttribute("areaType");
		prevDiv = null;
		prevDiv = $(this.ids.tempArea1);
		div.setAttribute("id",divId);
		prevDiv.setStyle("width",prevDiv.getW());
		prevDiv.setStyle("height",prevDiv.getH());
		div.innerHTML = "";
		for (var i=0; i<prevDiv.childNodes.length; i++) {
			div.appendChild(prevDiv.childNodes[i]);
		}
		document.body.insertBefore(div,document.body.firstChild);
		prevDiv.innerHTML = '<table id="'+this.ids.temp1+'" width="1" height="1" cellpadding="0" cellspacing="0" border="0"><tr><td></td></tr></table>';
		prevDiv.resizeTo(null,0,"$('"+this.ids.tempArea1+"').parentNode.removeChild($('"+this.ids.tempArea1+"'))");
		div = null;
		prevDiv = null;
	}
	
	this.openDetailPage = function() {
		if (this.status.moveMode!="ing") {
			kidow.open("/products/mobile/detailphone_gadget.jsp?seq="+this.seq, this.id, "titlebarbgcolor="+this.getStyleColor());
		}
	}
	
	this.setDropZones = function() {
		this.dropZones = new Array;
		var thisHeight = $(this.id).getH();
		var listDropZone = null;
		var dropZone = null;
		for (var i=0; i<this.listAreas.length; i++) {
			listDropZone = $(this.listAreas[i]);
			var minusOption = 0;
			for (var j=0; j<=listDropZone.childNodes.length; j++) {
				dropZone = $(listDropZone.childNodes[j]);
				if (!dropZone.isNull) {
					try {
						if (dropZone.getAttribute("id")!=null&&dropZone.getAttribute("id")!="") {
							if (dropZone.id==this.id) {
								minusOption = thisHeight;
							}
							if (dropZone.getAttribute("areaType")=="product") {
								this.dropZones.push(
									{
										  id : dropZone.id
										, x1 : dropZone.getX()
										, y1 : dropZone.getY()-minusOption
										, x2 : dropZone.getX()+dropZone.getW()
										, y2 : dropZone.getY()+dropZone.getH()-minusOption
									}
								);
							}
						}
					} catch(e) {
					
					}
				}
				dropZone = null;
			}
			dropZone = $(listDropZone.parentNode);
			this.dropZones.push(
				{
					  id : this.listAreas[i]
					, x1 : dropZone.getX()
					, y1 : dropZone.getY()
					, x2 : dropZone.getX()+dropZone.getW()
					, y2 : dropZone.getY()+dropZone.getH()
				}
			);
			dropZone = null;
			listDropZone = null;
		}
		dropZone = $(this.ids.basketAreaDropZone);
		this.dropZones.push(
			{
				  id : this.ids.basket
				, x1 : dropZone.getX()
				, y1 : dropZone.getY()
				, x2 : dropZone.getX()+dropZone.getW()
				, y2 : dropZone.getY()+dropZone.getH()
			}
		);
		dropZone = null;
	}
	
	this.setValidMouseEventType = function(_eventType) {
		$E.vars.validMouseEventType = _eventType;
	}
	
	this.connectToMouseEvent = function() {
		$E.stop();
		this.disconnectAllFromMouseEvent();
		if (this.status.moveMode!="ing") {
			if ($E.vars.validMouseEventType!="onclick") {
				this.setDropZones();
				$E.vars.focusedProduct.push(this.getInstanceName());
				$E.vars.startX = $E.pointerX();
				$E.vars.startY = $E.pointerY();
				$E.addAction("onMouseMove", this.id, this.getInstanceName()+".moveToMousePointer()");
				$E.addAction("onSelectStart", this.id, "$E.stop()");
				$E.addAction("onMouseMove", this.id, "$E.stop()");
				$E.addAction("onMouseUp", this.groupName, this.getInstanceName()+".disconnectAllFromMouseEvent()");
			} else {
				$E.vars.validMouseEventType = "";
			}
		}
	}
	
	this.moveToMousePointer = function() {
		var pointerX = $E.pointerX();
		var pointerY = $E.pointerY();
		var moveX = 0;
		var moveY = 0;
		var isMove = false;
		if (this.status.dragAndDropMode!="ing") {
			if (Math.abs($E.vars.startX-pointerX)>10||Math.abs($E.vars.startY-pointerY)>10) {
				this.setAbsolute();
				if ($E.vars.startX==0) $E.vars.startX = $E.pointerX();
				if ($E.vars.startY==0) $E.vars.startY = $E.pointerY();
				this.status.dragAndDropMode = "ing";
				var moveX = pointerX - $E.vars.startX;
				var moveY = pointerY - $E.vars.startY;
				isMove = true;
			}
		} else {
			moveX = pointerX - $E.vars.prevX;
			moveY = pointerY - $E.vars.prevY;
			isMove = true;
		}
		if (isMove) {
			$(this.id).setStyle("left",$(this.id).getX()+moveX);
			$(this.id).setStyle("top",$(this.id).getY()+moveY);
		}
		$E.vars.prevX = pointerX;
		$E.vars.prevY = pointerY;
		this.setTargetArea(pointerX, pointerY);
	}
	
	this.disconnectFromMouseEvent = function() {
		if ($E.vars.focusedProduct==null||$E.vars.focusedProduct==undefined) {
			$E.vars.focusedProduct = new Array;
		}
		$E.vars.focusedProduct.remove(this.getInstanceName());
		$E.removeAction(this.id);
		if (this.status.dragAndDropMode=="ing") {
			this.status.dragAndDropMode="";
			this.hideBasketAlt();
			if (this.targetArea.id==this.ids.basket) {
				if (this.isExcessiveNumberOfProducts()&&!this.status.isBasketMode) {
					kidow.alert(this.vars.errorMessage1, true);
					this.targetArea.id = this.getRandomTargetArea();
				} else {
					this.chageBasketModeStatus(true);
				}
			} else if (this.status.isBasketMode) {
				this.chageBasketModeStatus(false);
			}
			for (var i=0; i<this.listAreas.length; i++) {
				if (this.listAreas[i]==this.targetArea.id) {
					this.targetArea.id += "-bottom";
				}
			}
			if (this.targetArea.id==""||$(this.targetArea.id).isNull) {
				this.targetArea.id = this.ids.resetArea;
			}
			this.moveToTargetArea();
		}
	}
	
	this.disconnectAllFromMouseEvent = function() {
		if ($E.vars.focusedProduct==null||$E.vars.focusedProduct==undefined) {
			$E.vars.focusedProduct = new Array;
		}
		for (var i=0; i<$E.vars.focusedProduct.length; i++) {
			try {
				eval($E.vars.focusedProduct[i]+".disconnectFromMouseEvent()");
			} catch(e) {
			
			}
		}
		$E.removeAction(this.groupName);
		$E.vars.focusedProduct = $E.vars.focusedProduct.compact();
	}
	
	this.setTargetArea = function(_pointerX, _pointerY) {
		for (var i=0; i<this.dropZones.length; i++) {
			if (
				   this.dropZones[i].x1 <= _pointerX
				&& this.dropZones[i].y1 <= _pointerY
				&& this.dropZones[i].x2 >= _pointerX
				&& this.dropZones[i].y2 >= _pointerY
			) {
				this.targetArea.id = this.dropZones[i].id;
				break;
			}
		}
	}
	
	this.showProductImage = function() {
		try {
			$(this.ids.image2).setStyle("display",false);
			$(this.ids.image1).setStyle("display",true);
		} catch(e) {
		
		}
	}
	
	this.removeHTML = function() {
		var obj = $(this.id);
		try {
			obj.parentNode.removeChild(obj);
			this.status.isShowMode = false;
			this.status.isBasketMode = false;
			if (!$(this.ids.tempArea1).isNull) $(this.ids.tempArea1).parentNode.removeChild($(this.ids.tempArea1));
			if (!$(this.ids.tempArea2).isNull) $(this.ids.tempArea2).parentNode.removeChild($(this.ids.tempArea2));
		} catch(e) {
		
		}
		obj = null;
	}
	
	this.getHTML = function() {
		var s = '';
		s += '<div>';
		s += '<div onMouseDown="'+this.getInstanceName()+'.connectToMouseEvent();" style="cursor:move;">\n';
		s += '	<div id="'+this.ids.area2+'" style="position:absolute;display:none;">\n';
		s += '		<div style="position:relative;left:30px;top:-8px;">\n';
		s += '			<div style="color:#000000;background-color:#EAEAEA;border:1px solid #000000;padding:1px 3px 2px 4px;">\n';
		s += '			<span id="'+this.ids.text1+'" style="display:'+((this.status.isBasketMode)?"none":"")+';">Add to the slot</span>\n';
		s += '			<span id="'+this.ids.text2+'" style="display:'+((this.status.isBasketMode)?"":"none")+';">Remove from the slot</span>\n';
		s += '			</div>\n';
		s += '		</div>\n';
		s += '	</div>\n';
		s += '	<div id="'+this.ids.area1+'" style="position:absolute;width:23px;height:23px;">\n';
		s += '		<div id="'+this.ids.button1+'" style="display:'+((this.status.isBasketMode)?"none":"")+'"><img src="/img/common/etc/plus01.gif" width="9" height="9" style="margin:7px 0 0 7px;"></div>\n';
		s += '		<div id="'+this.ids.button2+'" style="display:'+((this.status.isBasketMode)?"":"none")+'"><img src="/img/common/etc/minus01.gif" width="9" height="9" style="margin:7px 0 0 7px;"></div>\n';
		s += '	</div>\n';
		s += '	<table onClick="'+this.getInstanceName()+'.changeBasketMode();" onMouseOver="'+this.getInstanceName()+'.showBasketAlt();" onMouseOut="'+this.getInstanceName()+'.hideBasketAlt();" onMouseDown="'+this.getInstanceName()+'.setValidMouseEventType(\'onclick\');" style="position:absolute;cursor:pointer;" width="23" height="23" cellpadding="0" cellspacing="0" border="0">\n';
		s += '		<tr>\n';
		s += '			<td></td>\n';
		s += '		</tr>\n';
		s += '	</table>\n';
		s += '	<div style="width:119px;padding:0 0 0 1px;">\n';
		s += '		<div style="width:118px;height:1px;background-color:'+this.getStyleColor()+';"><!-- space --></div>\n';
		s += '	</div>\n';
		s += '	<div style="width:121px;height:1px;background-color:#E0E0E0;">\n';
		s += '		<div style="width:120px;height:1px;background-color:'+this.getStyleColor()+';"><!-- space --></div>\n';
		s += '	</div>\n';
		s += '	<div style="width:122px;background-color:#E0E0E0;">\n';
		s += '		<div style="width:120px;height:21px;background-color:'+this.getStyleColor()+';vertical-align:top;">\n';
		s += '			<table width="120" cellpadding="0" cellspacing="0" border="0">\n';
		s += '				<tr valign="top">\n';
		s += '					<td style="color:#FFFFFF;font-weight:bold;padding:3px 0 0 23px;">'+this.name+'</td>\n';
		s += '					<td align="right" style="padding:3px 5px 0 0;">\n';
		s += '						<div style="width:13px;height:13px;text-align:left;">\n';
		s += '						<table onClick="'+this.getInstanceName()+'.changeMaximizedMode();" onMouseDown="'+this.getInstanceName()+'.setValidMouseEventType(\'onclick\');" style="position:absolute;cursor:pointer;" width="13" height="13" cellpadding="0" cellspacing="0" border="0">\n';
		s += '							<tr>\n';
		s += '								<td style="cursor:pointer;"></td>\n';
		s += '							</tr>\n';
		s += '						</table>\n';
		s += '							<div id="'+this.ids.button3+'" style="display:'+((this.status.isMaximizedMode)?"":"none")+'"><img src="/img/common/etc/minimize01.gif" width="13" height="13"></div>\n';
		s += '							<div id="'+this.ids.button4+'" style="display:'+((this.status.isMaximizedMode)?"none":"")+'"><img src="/img/common/etc/maximize01.gif" width="13" height="13"></div>\n';
		s += '						</div>\n';
		s += '					</td>\n';
		s += '				</tr>\n';
		s += '			</table>\n';
		s += '		</div>\n';
		s += '	</div>\n';
		s += '	<div id="'+this.ids.area3+'" onClick="'+this.getInstanceName()+'.openDetailPage();" style="width:122px;height:'+this.maximizedBodyHeight+'px;overflow:hidden;cursor:pointer;">\n';
		s += '		<div style="width:122px;background-color:#E0E0E0;">\n';
		s += '			<div style="width:120px;background-color:#C6C6C6;">\n';
		s += '				<div style="width:118px;height:103px;background-color:#F3F3F3;margin-left:1px;">\n';
		s += '					<center>\n';
		s += '						<div style="padding-top:14px;">\n';
		s += '						<div id="'+this.ids.image1+'" style="display:none;"><img src="'+this.imageSrc+'" onLoad="'+this.getInstanceName()+'.showProductImage();" width="75" height="75"></div>\n';
		s += '						<div id="'+this.ids.image2+'"><img src="/img/common/etc/start_loading01.gif" width="75" height="75"></div>\n';
		s += '						</div>\n';
		s += '					</center>\n';
		s += '				</div>\n';
		s += '			</div>\n';
		s += '		</div>\n';
		s += '		<div style="width:121px;height:1px;margin:0 0 0 1px;background-color:#E0E0E0;">\n';
		s += '			<div style="width:118px;height:1px;margin:0 0 0 0;background-color:#C6C6C6;"><!-- space --></div>\n';
		s += '		</div>\n';
		s += '	</div>\n';
		s += '	<div style="width:120px;height:1px;margin:0 0 0 1px;background-color:#E0E0E0;"><!-- space --></div>\n';
		s += '	<div style="width:118px;height:1px;margin:0 0 0 2px;background-color:#E0E0E0;"><!-- space --></div>\n';
		s += '</div>\n';
		s += '<table width="122" height="8" cellpadding="0" cellspacing="0" border="0"><tr><td></td></tr></table>\n';
		s += '</div>\n';
		return s;
	}
}