// This hotfix makes older versions of jQuery UI drag-and-drop work in IE9
(function($){
		var a=$.ui.mouse.prototype._mouseMove;
		$.ui.mouse.prototype._mouseMove=function(b){
			if($.browser.msie&&document.documentMode>=9){
				b.button=1
			};
			a.apply(this,[b]);
		}
}(jq142));


function ColumnCO (){
	this.baseImage = "";
	this.topImage = "";
	this.strollerName = "";
	this.baseColorName = "";
	this.topColorName = "";
}

function Bugaboo_Compare(){
	this.namespace= "";
	this.prePopulate = false;
	this.onlyDetails = false;
	this.hideCloseIcon = false;
	this.hideStrollerMenu = false;
	this.amount =0;
	
	this.diff = 0;
	this.ypos = 0;
	
	this.col = [];
	this.col[0] = new ColumnCO();
	this.col[1] = new ColumnCO();
	this.col[2] = new ColumnCO();

	strollers = "";
	this.detailstitles = "";
	this.strollernameandimages = undefined;
	this.dragme = "";
	this.clickme = "";
	this.t=null;
	this.dragEnabled = false;
	this.previousSwitch = 0;
	this.supportEvents = false;
	
	this.touchHandler = function(event)
	{
		var touches = event.changedTouches,
		first = touches[0],
		type = "";
		
		switch(event.type)
		{
			case "touchstart": 
				type = "mousedown"; 
				break;
			case "touchmove":  
				type="mousemove"; 
				break;        
			case "touchend":   
				type="mouseup"; 
				break;
			default: 
				return;
		}

	    var simulatedEvent = document.createEvent("MouseEvent");
	    simulatedEvent.initMouseEvent(type, true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY, false,false, false, false, 0, null);
	    first.target.dispatchEvent(simulatedEvent);
	    if(jq142(event.target).hasClass("ui-draggable")){
	    	event.preventDefault();
	    }
	};
	
	
	this.getImage = function (column, type, color_name){
		var columnCO = this.col[parseInt(column, 10)-1];
		if(type === "basetoptop") { // keep baseimage
			for (var i = 0; i < this.strollers.strollers.length; i++){
				if(this.strollers.strollers[i].itemcode !== columnCO.strollerName){
					continue;
				}
				var item = this.strollers.strollers[i];
				for(var j = 0; j < item.images[0].image.length; j++){
					var image = item.images[0].image[j];
					if(image.color_name === columnCO.baseColorName + "_" + color_name){
						columnCO.topColorName = color_name;
						this.col[parseInt(column, 10)-1] = columnCO;
						return image.url;
					}
				}
			}
		}
		else if(type === "basetopbase"){ // keep top image
			for (var k = 0; k < this.strollers.strollers.length; k++){
				if(this.strollers.strollers[k].itemcode !== columnCO.strollerName){
					continue;
				}
				var item2 = this.strollers.strollers[k];
				for(var l = 0; l < item2.images[0].image.length; l++){
					var image2 = item2.images[0].image[l];
					if(image2.color_name === color_name + "_" + columnCO.topColorName ){
						columnCO.baseColorName = color_name;
						this.col[parseInt(column, 10)-1] = columnCO;
						return image2.url;
					}
				}
			}
		}
	};

	this.setImage = function(column, type, url, color_name){
		var _column = parseInt(column, 10)-1;
		if(type === "base"){
			jq142("div#"+this.namespace+"drag img#compare_image_"+column+"_"+type).attr("src",url);
			this.col[_column].baseImage = url;
		}
		else if(type === "top"){ 
			jq142("div#"+this.namespace+"drag img#compare_image_"+column+"_"+type).attr("src",url);
			this.col[_column].topImage = url;
		}
		else if(type === "basetopbase" || type === "basetoptop"){
			url = this.getImage(column, type, color_name);
			jq142("div#"+this.namespace+"drag img#compare_image_"+column+"_base").attr("src",url);
			this.col[_column].baseImage = url;
		}
		else if(type === "special"){
			jq142("div#"+this.namespace+"drag img#compare_image_"+column+"_base").attr("src",url);
			this.col[_column].baseImage = url;
		}
	};

	this.getLatestFreeColumn =	function (){
		if(this.col[0].strollerName === ""){
			return 1;
		}
		else if(this.col[1].strollerName === ""){
			return 2;
		}
		else if(this.col[2].strollerName === ""){
			return 3;
		}
		else{
			return -1;
		}
	};
	this.getColumnId = function (columnName){
		if(columnName === "col1"){
			return 1;
		}
		if(columnName === "col2"){
			return 2;
		}
		if(columnName === "col3"){
			return 3;
		}
	};
	this.getColumn = function (name){
		if(col1 === name){
			return 1;
		}
		if(col2 === name){
			return 2;
		}
		if(col3 === name){
			return 3;
		}
	};
	
	this.setColumnFree = function (name){
		if(col1 === name){
			col1 = "";
			return;
		}
		if(col2 === name){
			col2 = "";
			return;
		}
		if(col3 === name){
			col3 = "";
			return;
		}
	};
	this.setText = function (id, text){
		if(text === undefined){
			text = "";
		}
		id = "div#"+this.namespace+"drag #" + id;
		jq142(id).html(text);
		jq142(id).addClass("detail");
		if(text.trim() === ""){
			jq142(id).css("display","none");
		}else{
			jq142(id).css("display","block");
		}
	};	
	this.clearColumn = function (column){
		jq142("div#"+this.namespace+"drag img#compare_image_"+column+"_back").hide();
		jq142("div#"+this.namespace+"drag img#compare_image_"+column+"_base").attr("src","");
		jq142("div#"+this.namespace+"drag img#compare_image_"+column+"_base").css("display","none");
		jq142("div#"+this.namespace+"drag div#compare_image_"+column+"_remove").hide();

		this.setText("compare_product_title"+column, "");
		this.setText("compare_colors_"+column+"_0", "");
		this.setText("compare_colors_"+column+"_1", "");
		this.setText("compare_colors_"+column+"_2", "");
		this.setText("usage_"+column, "");
		this.setText("travelsystem_"+column, "");
		this.setText("folding_"+column, "");
		this.setText("carseat_"+column, "");
		this.setText("reversable_seat_"+column, "");
		this.setText("seat_recline_"+column, "");
		this.setText("height_adjustable_backrest_"+column, "");
		this.setText("reversable_handlebar_"+column, "");
		this.setText("height_handlebar_"+column, "");
		this.setText("wheels_sus_"+column, "");
		this.setText("size_"+column, "");
		this.setText("width_"+column, "");
		this.setText("weight_"+column, "");
		this.setText("storage_"+column, "");
		this.setText("colors_"+column, "");
		
		this.setText("convert_to_duo_"+column, "");
		this.setText("tires_"+column, "");
		this.setText("size_folded_modular_"+column, "");
		this.setText("suspension_"+column, "");
		this.setText("luggage_storage_"+column, "");
		
		jq142("div#"+this.namespace+"drag tr#color1").css("border-top","0px");
		jq142("div#"+this.namespace+"drag tr#color2").css("border-top","0px");
	};
	
	this.removeStroller = function (fromId){
		// clear the col# var
		this.col[parseInt(fromId, 10)-1] = new ColumnCO();
		
		// clear the previous column
		this.clearColumn(fromId);
		// reset old dropper
		jq142("div#"+this.namespace+"drag div#droppable"+fromId).css({"width": "250px", "height": "250px", "float": "left"});
		jq142("div#"+this.namespace+"drag div#droppable"+fromId).css("background","none");

		// reset old base
		jq142("div#"+this.namespace+"drag div#base"+fromId).removeClass();
		jq142("div#"+this.namespace+"drag div#base"+fromId).removeAttr("style");
		jq142("div#"+this.namespace+"drag div#base"+fromId).css({"position": "absolute", "z-index": "120"});

		jq142("div#"+this.namespace+"drag div#top"+fromId).removeClass();
		jq142("div#"+this.namespace+"drag div#top"+fromId).removeAttr("style");
		jq142("div#"+this.namespace+"drag div#top"+fromId).css({"position": "absolute", "z-index": "150"});

		jq142("div#"+this.namespace+"drag div#compare_colors_"+fromId+"_0").show();
		jq142("div#"+this.namespace+"drag div#compare_colors_"+fromId+"_1").show();
		jq142("div#"+this.namespace+"drag div#compare_colors_"+fromId+"_2").show();
		this.clearColumn(fromId);
		if(jq142("div#"+this.namespace+"drag div#color0 td div").children().size() > 0){
			jq142("div#"+this.namespace+"drag div#compare_colors_text_0").show();
		}else{
			jq142("div#"+this.namespace+"drag div#compare_colors_text_0").hide();
		}
		jq142("div#"+this.namespace+"drag div#exp1").hide();
		jq142("div#"+this.namespace+"drag div#exp2").hide();
		jq142("div#"+this.namespace+"drag div#exp3").hide();
		var lfc = this.getLatestFreeColumn();
		if(lfc > 0){
			jq142("div#"+this.namespace+"drag div#exp"+lfc).show();
		}
	};
	
	this.fillColumn = function (column, item, columnCO, q){
		jq142("div#"+q.namespace+"drag div[id^='exp']").css("display","none");
		var highestImage = "base";
		
		jq142("div#"+q.namespace+"drag img#compare_image_"+column+"_back").attr("src", "/product_comparison-portlet/250x250_horizon.jpg");
		jq142("div#"+q.namespace+"drag img#compare_image_"+column+"_back").show();
		if(columnCO && columnCO.baseImage !== ""){
			jq142("div#"+q.namespace+"drag img#compare_image_"+column+"_base").attr("src", columnCO.baseImage);
		}
		else if(item.images){
			var color_names = item.images[0].image[0].color_name.split("_");
			if(color_names.length > 1){
				q.col[parseInt(column, 10)-1].baseColorName = color_names[0];		
				q.col[parseInt(column, 10)-1].topColorName = color_names[1];		
			}
			jq142("div#"+q.namespace+"drag img#compare_image_"+column+"_base").attr("src",item.images[0].image[0].url);
		}
		jq142("div#"+q.namespace+"drag img#compare_image_"+column+"_base").show();
		if(!q.hideCloseIcon){
			jq142("div#"+q.namespace+"drag div#compare_image_"+column+"_remove").show();
		}
		q.setText("compare_product_title"+column, item.title);
		for(var i = 0; item.images !== undefined && i < item.images.length; i++){
			if(item.images[i]){
				var color_count = item.images[i].image.length;
				if(color_count > 0){
					var hasTop = (item.images[i].image[0].color_name.indexOf('_') >= 0 );
					if(hasTop){ // split images in base & top
						var prefBase = "";
						var bases = [];
						var tops = [];
						for(var a = 0; a < color_count; a++){
							var split = item.images[i].image[a].color_name.split("_");
							if(prefBase != split[0]){ // new Base
								prefBase = split[0];
								bases.push(item.images[i].image[a]);
								if(tops.length === 0 ){
									tops.push(item.images[i].image[a]);
								}
							}else{
								var contains = false;
								for(var b = 0; b < tops.length; b++){
									if(tops[b].color_name.split("_")[1] == split[1]){
										contains = true;
										break;
									}
								}
								if(!contains){
									tops.push(item.images[i].image[a]);
								}
							}
						}
						// base images
						var ret = "<table cellspacing='0' cellpadding='0'>";
						for(var c = 0; c < bases.length; c++){
							var item_color = bases[c];
							if(c % 3 === 0){ ret += "<tr>"; }
							var color_name = item_color.color_name.substring(0, item_color.color_name.indexOf("_"));
							var color_code = item_color.color_code.substring(0, item_color.color_code.indexOf("_"));
							var text_color = item_color.text_color.substring(0, item_color.text_color.indexOf("_"));
							ret += "<td style=\"background:#"+color_code+";cursor:pointer;color:#"+text_color+";\" onclick=\"javascript:"+q.namespace+"fn.setImage('"+column+"','basetopbase','"+item_color.url+"','"+color_name+"');\"><div>"+q.getColorName(color_name)+"</div></td>";
							if(c % 3 === 2){ ret += "</tr>"; }
							else if(c === bases.length -1){ret += "</tr>"; }
						}
						ret += "</table>";
						q.setText("compare_colors_"+column+"_0", ret);
						
						// top images
						ret = "<table cellspacing='0' cellpadding='0'>";
						for(var d = 0; d < tops.length; d++){
							var item_color2 = tops[d];
							if(d % 3 === 0){ ret += "<tr>"; }
							var color_name2 = item_color2.color_name.substring(item_color2.color_name.indexOf("_")+1);
							var color_code2 = item_color2.color_code.substring(item_color2.color_code.indexOf("_")+1);
							var text_color2 = item_color2.text_color.substring(item_color2.text_color.indexOf("_")+1);
							ret += "<td style=\"background:#"+color_code2+";cursor:pointer;color:#"+text_color2+";\" onclick=\"javascript:"+q.namespace+"fn.setImage('"+column+"','basetoptop','"+item_color2.url+"','"+color_name2+"');\"><div>"+q.getColorName(color_name2)+"</div></td>";
							if(d % 3 === 2){ ret += "</tr>"; }
							else if(d === tops.length -1){ret += "</tr>"; }
						}
						ret += "</table>";
						q.setText("compare_colors_"+column+"_1", ret);
					}else if(item.images[i].type === "special"){
						if(item.images[i].image){
							var ret2 = "<table cellspacing='0' cellpadding='0'>";
							for(var e = 0; e < item.images[i].image.length; e++){
								var item_special = item.images[i].image[e];
								if(e % 3 === 0){ ret2 += "<tr>"; }
								ret2 += "<td><a href='#' onclick=\"javascript:"+q.namespace+"fn.setImage('"+column+"','special','"+item_special.url+"');return false;\"><img src='"+item_special.color_code+"'></a></td>";
								if(e % 3 === 2){ ret2 += "</tr>"; }
								else if(e === item.images[i].image.length -1){ret2 += "</tr>"; }
							}
							ret2 += "</table>";
							q.setText("compare_colors_"+column+"_2", ret2);
						}
					}else{
						var ret3 = "<table cellspacing='0' cellpadding='0'>";
						for(var f = 0; f < color_count; f++){
							var item_color3 = item.images[i].image[f];
							if(f % 3 === 0){ ret3 += "<tr>"; }
							ret3 += "<td style=\"background:#"+item_color3.color_code+";cursor:pointer;color:#"+item_color3.text_color+";\" onclick=\"javascript:"+q.namespace+"fn.setImage('"+column+"','"+item.images[i].type+"','"+item_color3.url+"');\"><div>"+q.getColorName(item_color3.color_name)+"</div></td>";
							if(f % 3 === 2){ ret3 += "</tr>"; }
							else if(f === color_count -1){ret3 += "</tr>"; }
						}
						ret3 += "</table>";
						q.setText("compare_colors_"+column+"_"+i, ret3);
					}
				}
			}
			jq142("div#"+q.namespace+"drag div#compare_image_"+column+"_base").parent().css("position","absolute");
		}
		q.setText("usage_"+column, item.usage_occasions);
		q.setText("travelsystem_"+column, item.infant_to_toddler_travel_system);
		q.setText("folding_"+column, item.folding);
		q.setText("carseat_"+column, item.car_seat_adaptable);
		q.setText("reversable_seat_"+column, item.reversible_seat);
		q.setText("seat_recline_"+column, item.seat_recline);
		q.setText("height_adjustable_backrest_"+column, item.height_adjustable_backrest);
		q.setText("reversable_handlebar_"+column, item.reversible_handlebar);
		q.setText("height_handlebar_"+column, item.one_piece_height_adjustable_handlebar);
		q.setText("wheels_sus_"+column, item.wheels_and_suspension);
		q.setText("size_"+column, item.size_foldedxwxh_wheels_attached);
		q.setText("width_"+column, item.maximum_unfolded_width);
		q.setText("weight_"+column, item.weight_chassis_wheels_seat);
		q.setText("storage_"+column, item.underseat_bag_storage);
		q.setText("colors_"+column, item.available_colors_fabric);
		q.setText("convert_to_duo_"+column, item.convert_to_duo);
		q.setText("tires_"+column, item.tires);
		q.setText("size_folded_modular_"+column, item.size_folded_modular);
		q.setText("suspension_"+column, item.suspension);
		q.setText("luggage_storage_"+column, item.luggage_storage);
		if(jq142("div#"+q.namespace+"drag tr#color0 td div").children().size() > 0){
			jq142("div#"+q.namespace+"drag tr#color0").css("border-top","1px solid #888888");
		}
		if(jq142("div#"+q.namespace+"drag tr#color1 td div").children().size() > 0){
			jq142("div#"+q.namespace+"drag tr#color1").css("border-top","1px solid #888888");
		}
		if(jq142("div#"+q.namespace+"drag tr#color2 td div").children().size() > 0){
			jq142("div#"+q.namespace+"drag tr#color2").css("border-top","1px solid #888888");
		}
		return highestImage;
	};


	this.dragging = function(event, ui){
		if(ui.helper[0].id.startsWith("base") && ui.position.left < 250){
			ui.position.left = 250;
		}else if(ui.helper[0].id.startsWith("base")){
			if(this.q.ypos === 0){
				this.q.ypos = ui.position.top;
			}
			ui.position.top = this.q.ypos;
		}
		var zindex = jq142(ui.helper[0]).css("z-index");
		if(zindex === "auto"){
			zindex = 1000;
		}
		else if(parseInt(zindex, 10) <= 1000){
			zindex = parseInt(zindex, 10) + 1000;
		}
		jq142(ui.helper[0]).css("z-index",(zindex));
	};

	var obj1 = {
		q:this,
		func:this.dragging
	};
	
	this.stopping = function(event, ui){
		var zindex = jq142(ui.helper[0]).css("z-index");
		if(parseInt(zindex, 10) > 1000){
			jq142(ui.helper[0]).css("z-index",(zindex - 1000));
		}
		if(ui.helper[0].id.startsWith("draggable")){
			jq142(ui.helper[0]).css({"left":"0px","top":"0px"});
		}
		this.q.ypos = 0;
	};
	
	
	var obj2 = {
		q:this,
		func:this.stopping
	};
	
	this.setDraggable = function (id){
		jq142(id).draggable({
			containment: '#'+this.namespace+'drag',
			axis: 'x',
			drag : jq142.delegate(obj1.func, obj1), 
			stop : jq142.delegate(obj2.func, obj2),
			revert : "invalid"
		});
	};
	
	this.placeDraggableManual = function (id){
		var free = this.getLatestFreeColumn();
		if(free > 0){
			this.placeDraggable(null, jq142("div#"+this.namespace+"drag div#"+id)[0], jq142("div#"+this.namespace+"drag div#droppable"+free)[0]);
		}
	};
	
	this.placeDraggableAutomatic = function (id, name){
		var free = this.getLatestFreeColumn();
		if(free > 0){
			this.placeDraggable(null, jq142("div#"+this.namespace+"drag div#"+id)[0], jq142("div#"+this.namespace+"drag div#droppable"+free)[0], true);
		}
		if(this.onlyDetails){
			jq142("div#"+this.namespace+"drag div#compare_product_title"+free).html("bugaboo " + name);
			jq142("div#"+this.namespace+"drag div#compare_product_title"+free).show();
			jq142("div#"+this.namespace+"drag div#"+id).hide();
			jq142("div#"+this.namespace+"drag div#droppable"+free).hide();
			jq142("div#"+this.namespace+"drag div#exp"+free).parent().remove();
			jq142("div#"+this.namespace+"drag div#droppable"+free).remove();
			jq142("div#"+this.namespace+"drag div#base"+free).css("position","relative");
			jq142("div#"+this.namespace+"drag img#compare_image_"+free+"_base").css("height","100px");
		}
	};
	
	this.placeDraggable = function (event, ui, dropper, auto){
		var dragger = null;					
		if(event == undefined){
			dragger = ui;
		}else{
			dragger = ui.draggable[0];
		}
		if(!this.q){
			this.q = this;
		}
		if(!auto){
			var stamp = new Date().getTime();
			if(stamp < this.previousSwitch + 100){
				this.previousSwitch = stamp;
				return;
			}
			this.previousSwitch = stamp;
		}
		if(jq142("div#"+this.q.namespace+"drag div#"+dragger.id).attr("class") === ""){
			return;
		}
		var fromId = 0;
		var fromDraggable = dragger.id.startsWith("draggable");
		if(!fromDraggable){
			fromId = dragger.id.charAt(dragger.id.length -1);
		}
		var toId = dropper.id.charAt(dropper.id.length -1);
		var fromStroller = (fromDraggable ? undefined :this.q.col[parseInt(fromId, 10)-1].strollerName);
		var toStroller = "";
		toStroller = this.q.col[parseInt(toId, 10)-1].strollerName;
		var fromColumnCO = (fromDraggable ? undefined :this.q.col[parseInt(fromId, 10)-1]);
		var toColumnCO = this.q.col[parseInt(toId, 10)-1];
		
		if(!fromDraggable && fromId === toId && fromStroller === toStroller){
			jq142(dragger).css({"left":"","top":""});
			return;
		}
		var draggerHasCompareImage = false;
		if(jq142("div#"+this.q.namespace+"drag #"+dragger.id+" img[id^='compare_image']").length > 0){
				draggerHasCompareImage = true;
		}
				
		if(draggerHasCompareImage){ // draggable is an image
			// clear the col# var
			this.q.col[parseInt(fromId, 10)-1] = new ColumnCO();
			
			// clear the previous column
			this.q.clearColumn(fromId);
			// reset old dropper
			jq142("div#"+this.q.namespace+"drag #droppable"+fromId).css({"width": "250px", "height": "250px", "float": "left"});

			// reset old base
			jq142("div#"+this.q.namespace+"drag #base"+fromId).removeClass();
			jq142("div#"+this.q.namespace+"drag #base"+fromId).removeAttr("style");
			jq142("div#"+this.q.namespace+"drag #base"+fromId).css({"position": "absolute", "z-index": "120"});

			jq142("div#"+this.q.namespace+"drag #top"+fromId).removeClass();
			jq142("div#"+this.q.namespace+"drag #top"+fromId).removeAttr("style");
			jq142("div#"+this.q.namespace+"drag #top"+fromId).css({"position": "absolute", "z-index": "150"});

			jq142("div#"+this.q.namespace+"drag #compare_colors_"+fromId+"_0").css({"display": "block"});
			jq142("div#"+this.q.namespace+"drag #compare_colors_"+fromId+"_1").css({"display": "block"});
			jq142("div#"+this.q.namespace+"drag #compare_colors_"+fromId+"_2").css({"display": "block"});
			
		}else{
			fromStroller = dragger.firstChild.id;
		}
		
		if(this.q.col[parseInt(toId, 10)-1].strollerName === ""){ // column is free
			if(draggerHasCompareImage){
				this.q.col[parseInt(toId, 10)-1] = fromColumnCO;
			}
			else{
				this.q.col[parseInt(toId, 10)-1].strollerName = fromStroller;
			}
			jq142("div#"+this.q.namespace+"drag div#"+dropper.id).css("z-index","-100");
			for (var i = 0; i < this.q.strollers.strollers.length; i++){
				var item = this.q.strollers.strollers[i];
				if(item.itemcode === this.q.col[parseInt(toId, 10)-1].strollerName){
					var highestImage = this.q.fillColumn(toId, item, fromColumnCO, this.q);
					jq142("div#"+this.q.namespace+"drag div#base"+toId).css({"display": "block"});
					if(jq142("div#"+this.q.namespace+"drag div#"+highestImage+toId).attr("class") === "" && !this.q.onlyDetails){
						this.q.setDraggable("div#"+this.q.namespace+"drag div#" + highestImage + toId);
					}
					break;
				}
			}
		}else if(fromDraggable){ // column is not free, so overwrite
			for (var j = 0; j < this.q.strollers.strollers.length; j++){
				var item2 = this.q.strollers.strollers[j];
				if(item2.itemcode === fromStroller){
					this.q.clearColumn(toId);
					var highestImage2 = this.q.fillColumn(toId, item2, null, this.q);
					jq142("div#"+this.q.namespace+"drag #base"+toId).css({"display": "block"});
					this.q.col[parseInt(toId, 10)-1].strollerName = fromStroller;
					if(jq142("div#"+this.q.namespace+"drag div#"+highestImage2+toId).attr("class") === "" && !this.q.onlyDetails){
						this.q.setDraggable("div#"+this.q.namespace+"drag div#" + highestImage2 + toId);
					}
					break;
				}
			}
		}else{ // column is not free, so switch
			// place newId to prevId
			for (var k = 0; k < this.q.strollers.strollers.length; k++){
				var item3 = this.q.strollers.strollers[k];
				if(item3.itemcode === toStroller){
					var highestImage3 = this.q.fillColumn(fromId, item3, toColumnCO,this.q);
					jq142("div#"+this.q.namespace+"drag #base"+fromId).css({"display": "block"});
					this.q.col[parseInt(fromId, 10)-1] = toColumnCO;
					if(jq142("div#"+this.q.namespace+"drag div#"+highestImage3+toId).attr("class") === "" && !this.q.onlyDetails){
						this.q.setDraggable("div#"+this.q.namespace+"drag div#" + highestImage3 + fromId);
					}
					break;
				}
			}
			
			// place prevId to toId
			for (var l = 0; l < this.q.strollers.strollers.length; l++){
				var item4 = this.q.strollers.strollers[l];
				if(item4.itemcode === fromStroller){
					this.q.clearColumn(toId);
					var highestImage4 = this.q.fillColumn(toId, item4, fromColumnCO, this.q);
					jq142("div#"+this.q.namespace+"drag #base"+toId).css({"display": "block"});
					this.q.col[parseInt(toId, 10)-1] = fromColumnCO;
					if(jq142("div#"+this.q.namespace+"drag div#"+highestImage4+toId).attr("class") === "" && !this.q.onlyDetails){
						this.q.setDraggable("div#"+this.q.namespace+"drag div#" + highestImage4 + toId);
					}
					break;
				}
			}
		}
		if(jq142("div#"+this.q.namespace+"drag #color0 td div").children().size() > 0){
			jq142("div#"+this.q.namespace+"drag #compare_colors_text_0").css("display","block");
		}else{
			jq142("div#"+this.q.namespace+"drag #compare_colors_text_0").css("display","none");
		}
		var lfc = this.q.getLatestFreeColumn();
		if(lfc > 0){
			jq142("div#"+this.q.namespace+"drag #exp"+lfc).css("display","block");
		}
	};
	this.getColorName = function (color){
		return this.t["color_"+color];
	};
	
	this.test = function(){
		if(this.fn == 'undefined'){
			alert("undefined");
		}else{
			alert("YES");
		}
	};
	
	this.init = function(){
		// get country and language
		var gli = jq142.cookie('GUEST_LANGUAGE_ID');
		var language = "en";
		var country = "US";
		if(gli != null){
			language = gli.substring(0,2);
			country = gli.substring(3,5);
		}
		this.t = this.detailstitles.detailstitles[0];
		
		for (var j = 0; j < this.strollernameandimages.length; j++){
			this.setDraggable("div#"+this.namespace+"drag #draggable"+(j+1));
			if(this.hideStrollerMenu){
				jQuery("div#"+this.namespace+"drag #draggable"+(j+1)).hide();
			}
		}
		if(this.dragEnabled){
			document.addEventListener("touchstart",this.touchHandler, true);
		    document.addEventListener("touchmove", this.touchHandler, true);
		    document.addEventListener("touchend", this.touchHandler, true);
		    document.addEventListener("touchcancel", this.touchHandler, true);
			
			jq142("div#"+this.namespace+"drag tr#title").hide();
			jq142("div#"+this.namespace+"drag tr#color2").hide();
		}
		if(this.prePopulate){
			for (var j = 0; j < this.strollernameandimages.length && j < 3; j++){
				this.placeDraggableAutomatic("draggable"+(j+1), this.strollernameandimages[j][0]);
			}
			if(this.onlyDetails && this.strollernameandimages.length < 3){
				for(var j = this.strollernameandimages.length +1; j <= 3; j++){
					jq142("div#"+this.namespace+"drag div#droppable"+j).remove();
					jq142("div#"+this.namespace+"drag div#exp"+j).remove();
				}
			}
			
		}

		
		jq142("div[id*='droppable']").css({ "width": "250px", "height": "250px", "float": "left"});
		
		var obj = {
			q:this,
			func:this.placeDraggable
		};
		
		jq142("div#"+this.namespace+"drag div[id*='droppable']").each(function(){
			jq142(this).droppable({
					accept:function(a){
						return true;
					},
				tolerance: 'pointer',
				activeClass: 'ui-state-hover',
				hoverClass: 'ui-state-active',
				drop:jq142.delegate(obj.func, obj, this),
				over:function(event, ui){
					jq142(this).css("background","#FF6600");
				},
				out:function(event, ui){
					jq142(this).css("background","none");
				}
			});
		});
		
		function hideCompare(){
			jq142("div#"+this.q.namespace+"drag").hide();
		}
		function showCompare(){
			jq142("div#"+this.q.namespace+"drag").show();
		}
		var delegate1 = {
			q:this,
			func:hideCompare
		};
		var delegate2 = {
			q:this,
			func:showCompare
		};
		if(this.supportEvents){
			Liferay.bind("hideCompare", jq142.delegate(delegate1.func, delegate1));
			Liferay.bind("showCompare", jq142.delegate(delegate2.func, delegate2));
		}
	};
}