// Global variables
	
var map = null;
var last_deal_id = 0;
var get_deal_timer;
var resume_timer;
var clear_status_timer;
var theSeconds = 6; // The interval time to request, default to 6 seconds first
var is_loading_deal = false; // Check if it is loading the update
var count_time = 0; // Second for counting for making the update request
var timing = 1; // Second for updating count_time;
var img_max_width = 160; // Max width for display item image
var img_max_height = 160; // Max height for display item image
var max_width = 45; // Max width for viewed item image
var max_height = 45; // Max height for viewed item image
var viewed_item_div_width = 90; // Width of the viewed item
var first_viewed_item_left = 0; // The style.left value for the first viewed item which is not yet cleared.
var last_viewed_item_left = -viewed_item_div_width; // The style.left value for the last viewed item.
var prev_mouse_x = 0; // Fix IE bug, keep the previous mouse X coordinate
var prev_mouse_y = 0; // Fix IE bug, keep the previous mouse Y coordinate
var is_IE = document.uniqueID; // Check if it is IE
if (navigator.userAgent.toLowerCase().indexOf("safari")>0)
	var is_safari = true; // Check if it is Safari
else
	var is_safari = false;
var is_opera = window.opera; // Check if it is Opera
var content_template = null;
var svr_different_time = 0; // Time different from browser time.
var viewed_item_color = 1; // Colour indicator for viewed item div (1 or 2)

// Function: Trim string function
String.prototype.trim = function() {
    //skip leading and trailing whitespace
    //and return everything in between
    var x=this;
    x=x.replace(/^\s*(.*)/, "$1");
    x=x.replace(/((.|\n|\r)*?)\s*$/, "$1");
    return x;
};

// Function: Initialize.
function initialize() {
	if (GBrowserIsCompatible()) {
		preload_image();
		get_content_template();
	}
}

// Function: Pre Download the image
function preload_image(){
	var cart_on = new Image();
	cart_on.src = "pic/cart_on.png";
	var cart_off = new Image();
	cart_off.src = "pic/cart_off.png";
}

// Function: Get content template & initiate map for the 1st time
function get_content_template(){
	var request_url = "vmap_template.htm?ts=" + new Date().getTime();
	GDownloadUrl(request_url, function(data, responseCode){
		if( responseCode == 200 ){
			content_template = data;
			content_template = set_max_img_size(content_template);
		}
		if( !map )
			initiate_map();
	});
}

// Function: Get the max image size from the template, and return the template without the image size info.
function set_max_img_size(content_template){
	
	// Get image max width & max height
	var img_max_width_find = get_product_tag_content(content_template, "<!--start_product_img_max_width-->", "<!--end_product_img_max_width-->", 0);
	if( img_max_width_find.found ){
		img_max_width = parseInt(img_max_width_find.content.trim());
		content_template = content_template.replace(/<\!--start_product_img_max_width-->((.|\n|\r)*?)<\!--end_product_img_max_width-->/gi, "");
		
	}
	else{
		img_max_width = img_max_width;
	}
	
	var img_max_height_find = get_product_tag_content(content_template, "<!--start_product_img_max_height-->", "<!--end_product_img_max_height-->", 0);
	if( img_max_height_find.found ){
		img_max_height = parseInt(img_max_height_find.content.trim());
		content_template = content_template.replace(/<\!--start_product_img_max_height-->((.|\n|\r)*?)<\!--end_product_img_max_height-->/gi, "");
	}
	else{
		img_max_height = img_max_width;
	}
	return content_template;
}

//Function: Initiate map
function initiate_map(){
	map = new GMap2(document.getElementById("vmap_div"));
	map.addControl(new GLargeMapControl());
	map.addControl(new GMapTypeControl());
	map.setCenter(new GLatLng(37.4419, -122.1419), 3);
	
	/* When mouse moving, pause the update. 
	Since there is no "mousemoveend" event, so every time must resume it at the end. */
	GEvent.addListener(map, "mousemove", function(){
		/* Fix bug in IE & Safari: They always fire the mouseover event,
		so have to manually compare the mouse coordinates,
		if it is same as previous, don't fire the mouseover event. */
		if( is_IE || is_safari ){
			if( prev_mouse_x != event.clientX && prev_mouse_y != event.clientY ){
				pause_get_deal(1);
				resume_get_deal(1);
				prev_mouse_x = event.clientX;
				prev_mouse_y = event.clientY;
			}
		}
		else {
			pause_get_deal(1);
			resume_get_deal(1);
		}
	});
	
	get_deal(); // Get update for the first time.
	get_deal_timer = setInterval("get_deal_timing()", 1000*timing); // Create interval for update.
}

// Function: Get update.
function get_deal(){
	// Don't want to make more than one request. If there is already a request loading, don't make a request again.
	if( !is_loading_deal ) {
		set_is_loading_deal(true);
		var request_url = "vmap_request.cfm?last_deal_id=" + last_deal_id + "&ts=" + new Date().getTime();
		GDownloadUrl(request_url, function(data, responseCode){
			set_is_loading_deal(false);
			var has_record = false;
			var response_ok = false;
			if( responseCode == 200 ) {
				try {
					var xml = GXml.parse(data);
					
					/* If the content template is not loaded, try to call again,
					but this time consider response fail, so throw the error. */
					if( !content_template ){
						get_content_template();
						throw("no template");
					}
											
					response_ok = true; // Response ok if can reach this step
											
					var vmap_deal_tag = xml.documentElement.getElementsByTagName("vmap_deal");
					
					if( vmap_deal_tag.length > 0 ) {
						
						var deal_data = get_deal_data(vmap_deal_tag[0]);
						
						set_last_deal_id( deal_data.last_deal_id );
						
						// Create content, locate the content, and add into viewed item list
						create_content(content_template, deal_data);
						
						has_record = true;
					}
				}
				catch(e){}
			}
			if( !response_ok ){
				// Clear other status
				document.getElementById("vmap_status_waiting").style.display = "none";
				document.getElementById("vmap_status_waiting_2").style.display = "none";
				document.getElementById("vmap_status_no_record").style.display = "none";
				// Fade in the response-fail status and fade out after 40% of the interval request time.
				$("#vmap_status_response_fail").fadeIn("normal", function(){
					setTimeout(" $('#vmap_status_response_fail').fadeOut('slow'); ", (1000*theSeconds) * 0.4);
				});
			}
			else if( !has_record ){
				// Clear other status
				document.getElementById("vmap_status_waiting").style.display = "none";
				document.getElementById("vmap_status_waiting_2").style.display = "none";
				document.getElementById("vmap_status_response_fail").style.display = "none";
				// Fade in the no-record status and fade out after 40% of the interval request time.
				$("#vmap_status_no_record").fadeIn("normal", function(){
					setTimeout(" $('#vmap_status_no_record').fadeOut('slow'); ", (1000*theSeconds) * 0.4);
				});
			}
		});
	}
}

//Function: Get the response data
function get_deal_data(vmap_deal_tag){
	var deal_data = new Object();
	deal_data.latitude = vmap_deal_tag.getElementsByTagName("latitude")[0].firstChild.nodeValue;
	deal_data.longitude = vmap_deal_tag.getElementsByTagName("longitude")[0].firstChild.nodeValue;
	try { deal_data.last_deal_id = vmap_deal_tag.getElementsByTagName("last_deal_id")[0].firstChild.nodeValue; }
	catch(e){ deal_data.last_deal_id = 0; }
	try { deal_data.city = vmap_deal_tag.getElementsByTagName("city")[0].firstChild.nodeValue; }
	catch(e){ deal_data.city= ""; }
	try { deal_data.country = vmap_deal_tag.getElementsByTagName("country")[0].firstChild.nodeValue; }
	catch(e){ deal_data.country= ""; }
	try { deal_data.deal_type = vmap_deal_tag.getElementsByTagName("deal_type")[0].firstChild.nodeValue; }
	catch(e){ deal_data.deal_type = ""; }
	try{ deal_data.product_url = vmap_deal_tag.getElementsByTagName("product_url")[0].firstChild.nodeValue; }
	catch(e){ deal_data.product_url = ""; }
	try { deal_data.product_name = vmap_deal_tag.getElementsByTagName("product_name")[0].firstChild.nodeValue; }
	catch(e){ deal_data.product_name = ""; }
	try { deal_data.product_image = vmap_deal_tag.getElementsByTagName("product_image")[0].firstChild.nodeValue; }
	catch(e){ deal_data.product_image = ""; }
	try { deal_data.store_name = vmap_deal_tag.getElementsByTagName("store_name")[0].firstChild.nodeValue; }
	catch(e){ deal_data.store_name = ""; }
	try { deal_data.store_url = vmap_deal_tag.getElementsByTagName("store_url")[0].firstChild.nodeValue; }
	catch(e){ deal_data.store_url = ""; }
	try { deal_data.deal_date = vmap_deal_tag.getElementsByTagName("deal_date")[0].firstChild.nodeValue; }
	catch(e){ deal_data.deal_date = ""; }
	return deal_data;
}

// Function: This is the main function to create content.
/* Actually this function itself only get the size from product image,
then when the image on load, only call create_content_main function to create content. */
function create_content(content_template, deal_data) {
	
	var img_width = img_max_width; // Default it
	var img_height = img_max_width;
	var img_type = "img"; // img or swf
	
	deal_data.product_image = deal_data.product_image.trim();
	deal_data.store_url = deal_data.store_url.trim();
	
	// If has width and height, usually Flash
	if( deal_data.product_image.indexOf("|") >= 0 ){
		var url_array = deal_data.product_image.split("|");
		deal_data.product_image = url_array[0];
		try{
			img_width = parseInt(url_array[2]);
			img_height = parseInt(url_array[3]);
		}
		catch(e){}
	}
	
	if( deal_data.product_image.substr(deal_data.product_image.length-4, 4).toLowerCase() == ".swf" ){
		img_type = "swf";
		create_content_main(content_template, deal_data, img_width, img_height, img_type, true);
	}
	else if( deal_data.product_image != "" ) {
		var product_img = new Image();			
		product_img.onload = function(){
			create_content_main(content_template, deal_data, this.width, this.height, img_type, true);
		};
		product_img.onerror = function(){
			create_content_get_no_image(content_template, deal_data);
		};
		product_img.src = deal_data.product_image;
	}
	else {
		create_content_get_no_image(content_template, deal_data);
	}
}

// Function: Get the no-image image size
/* When the image on load, call create_content_main to create content. */
function create_content_get_no_image(content_template, deal_data){
	var product_img = new Image();
	var img_type = "img";
	var img_src = "pic/no_image.gif";
	deal_data.product_image = img_src;
	
	product_img.onload = function(){
		create_content_main(content_template, deal_data, this.width, this.height, img_type, true);
	}
	product_img.onerror = function(){
		create_content_main(content_template, deal_data, 80, 80, img_type, true);
	}
	product_img.src = img_src;
}

// Function: Create content from the template and data
/* Call locate_deal() to locate the data on the map,
call add_viewed_item() to add the item into the viewed item list. */
function create_content_main(content_template, deal_data, img_width, img_height, img_type, call_add_viewed_item) {
	
	// Scale image and get the display width & height
	
	var img_size = scale_img(img_max_width, img_max_height, img_width, img_height);
	img_width = img_size.width;
	img_height = img_size.height;
	
	// Start replacing
	
	// product url
	content_template = content_template.replace(/<\!--product_url-->/gi, deal_data.product_url);
	
	// product image
	if( img_type == "img" ){
		var element = get_product_tag_content(content_template, "<!--start_product_img_img-->", "<!--end_product_img_img-->", 0);
		if( element.found ){
			element.content = element.content.replace(/<\!--product_img_url-->/gi, deal_data.product_image);
			element.content = element.content.replace(/<\!--product_img_width-->/gi, img_width);
			element.content = element.content.replace(/<\!--product_img_height-->/gi, img_height);
			content_template = content_template.replace(/<\!--start_product_img_img-->((.|\n|\r)*?)<\!--end_product_img_img-->/gi, element.content);
		}
		content_template = content_template.replace(/<\!--start_product_img_flash-->((.|\n|\r)*?)<\!--end_product_img_flash-->/gi, "");
	}
	else if( img_type == "swf"){
		var element = get_product_tag_content(content_template, "<!--start_product_img_flash-->", "<!--end_product_img_flash-->", 0);
		if( element.found ){
			element.content = element.content.replace(/<\!--product_img_url-->/gi, deal_data.product_image);
			element.content = element.content.replace(/<\!--product_img_width-->/gi, img_width);
			element.content = element.content.replace(/<\!--product_img_height-->/gi, img_height);
			content_template = content_template.replace(/<\!--start_product_img_flash-->((.|\n|\r)*?)<\!--end_product_img_flash-->/gi, element.content);
		}
		content_template = content_template.replace(/<\!--start_product_img_img-->((.|\n|\r)*?)<\!--end_product_img_img-->/gi, "");
	}
	
	// product image
	content_template = content_template.replace(/<\!--product_name-->/gi, deal_data.product_name);
	
	// deal type
	switch(deal_data.deal_type){
		case "product_view"	:
			content_template = content_template.replace(/<\!--start_product_view-->/gi, "");
			content_template = content_template.replace(/<\!--end_product_view-->/gi, "");
			content_template = content_template.replace(/<\!--start_product_buy-->((.|\n|\r)*?)<\!--end_product_buy-->/gi, "");
			break;
		case "product_buy"	:
			content_template = content_template.replace(/<\!--start_product_buy-->/gi, "");
			content_template = content_template.replace(/<\!--end_product_buy-->/gi, "");
			content_template = content_template.replace(/<\!--start_product_view-->((.|\n|\r)*?)<\!--end_product_view-->/gi, "");
			break;
	}
	
	// city
	content_template = content_template.replace(/<\!--visitor_city-->/gi, deal_data.city);
	
	// country
	content_template = content_template.replace(/<\!--visitor_country-->/gi, deal_data.country);
	
	// store name
	content_template = content_template.replace(/<\!--store_name-->/gi, deal_data.store_name);
	
	// store url
	content_template = content_template.replace(/<\!--store_url-->/gi, deal_data.store_url);
	
	// store url for display
	if( deal_data.store_url.toLowerCase().substr(0, 7) == "http://" ){
		var store_url_name = deal_data.store_url.substring(7, deal_data.store_url.length);
	}
	else{
		var store_url_name = deal_data.store_url;
	}
	content_template = content_template.replace(/<\!--store_url_name-->/gi, store_url_name);
	
	// Date. Original format: yyyy-mm-dd HH:mm:ss
	var deal_date_array = deal_data.deal_date.split(" ");
	
	var date_part_array = deal_date_array[0].split("-");
	var d_year = eval(date_part_array[0]);
	var d_month = eval(date_part_array[1])-1; // Month is 0-11 in JavaScript
	var d_day = eval(date_part_array[2]);
	
	var time_part_array = deal_date_array[1].split(":");
	var d_hour = eval(time_part_array[0]);
	var d_minute = eval(time_part_array[1]);
	var d_second = eval(time_part_array[2].split(".")[0]); // Use 00 format instead of 00.0
	
	var deal_date = new Date(d_year, d_month, d_day, d_hour, d_minute, d_second);
	
	var one_minute = 1000*60;
	var now = new Date();

	// Calculate difference btw the two dates, and convert to minutes
	// Need to plus time different from server.
	var d_different_minute = Math.round( ( (now.getTime()+svr_different_time)-deal_date.getTime() ) / one_minute );
	
	content_template = content_template.replace(/<\!--total_minute-->/gi, d_different_minute);
	
	if( d_different_minute > 1 ){
		content_template = content_template.replace(/<\!--start_more_than_one_minute-->/gi, "");
		content_template = content_template.replace(/<\!--end_more_than_one_minute-->/gi, "");
	}
	else{
		content_template = content_template.replace(/<\!--start_more_than_one_minute-->((.|\n|\r)*?)<\!--end_more_than_one_minute-->/gi, "");
	}
	
	locate_deal(deal_data.latitude, deal_data.longitude, content_template);
					
	if( call_add_viewed_item )	
		add_viewed_item(deal_data.product_image, img_width, img_height, deal_data.product_url, deal_data);
	
}


// Function: Get the content between a start tag and an end tag
function get_product_tag_content(input_content, start_tag, end_tag, start_pos){
	// Get the content start from start_pos
	input_content = input_content.substring(start_pos, input_content.length);
	var element_start = input_content.indexOf(start_tag) + start_tag.length;
	var element_end = input_content.indexOf(end_tag);
	
	var element = new Object();	
	if( element_start >= 0 && element_end >= 0 && element_start < element_end ){
		element.found = true;
		element.content = input_content.substring(element_start, element_end);
	}
	else {
		element.found = false;
		element.content = "";
	}

	return element;
}


// Function: Scale and get the display image width & height
function scale_img(max_width, max_height, width, height){
	if( width > height ){
		if( width > max_width ){
			var scale_ratio = max_width / width;
			width = max_width;
			height = height * scale_ratio;
		}
	}
	else if( height > width ){
		if( height > max_height ){
			var scale_ratio = max_height / height;
			height = max_height;
			width = width * scale_ratio;
		}
	}
	else{
		if( width > max_width ){
			width = max_width;
			height = max_height;
		}
	}
	
	var img_size = new Object();
	img_size.width = width;
	img_size.height = height;
	
	return img_size;
}


// Function: Put the point on map.
function locate_deal(latitude, longitude, content){
	map.clearOverlays();
	map.closeInfoWindow();
	var point = new GLatLng(latitude, longitude);
	map.addOverlay(new GMarker(point));
	
	var info_point = new GLatLng(point.lat(), point.lng());
	map.openInfoWindow(info_point, content);
	map.panTo(point);
}

// Function: Create interval to get update.
function get_deal_timing(){
	count_time += timing;
	if( count_time >= theSeconds ){
		get_deal();
		count_time = 0;
	}
}

// Function: Pause the update, delete the interval object.
function pause_get_deal( pause_type ){
	// Stop the update request timer
	if( get_deal_timer ){
		clearInterval(get_deal_timer);
	}
	// Stop the fade out timer
	if( resume_timer ){
		clearTimeout(resume_timer);
	}
	
	// pinhow to be continued
	if( clear_status_timer ){
		clearTimeout(clear_status_timer);
	} 
	
	document.getElementById("vmap_status_no_record").style.display = "none";
	document.getElementById("vmap_status_response_fail").style.display = "none";
	
	switch( pause_type ){
		case 1	:	document.getElementById("vmap_status_waiting_2").style.display = "none";
					$("#vmap_status_waiting").fadeIn("normal");
					// Set a timeout to clear the status bar to avoid it didn't cleared just now.
					clear_waiting_status( "vmap_status_waiting_2" );
					break;
		case 2	:	document.getElementById("vmap_status_waiting").style.display = "none";
					$("#vmap_status_waiting_2").fadeIn("normal");
					// Set a timeout to clear the status bar to avoid it didn't cleared just now.
					clear_waiting_status( "vmap_status_waiting" );
					break;
	}
	
}

// Function: Clear a status bar after 1 minute	
function clear_waiting_status( status_id ){
	clear_status_timer = setTimeout( "clear_waiting_status_timeout('" + status_id + "')", 1000*1 );
}

// Function: Action to clear a status bar
function clear_waiting_status_timeout( status_id ){
	document.getElementById(status_id).style.display = "none";
}

// Function: Resume the update, waiting to action.
function resume_get_deal( pause_type ){
	if( clear_status_timer ){
		clearTimeout(clear_status_timer);
	} 
	
	// Fade out the status after 1 minute then only continue timer
	resume_timer = setTimeout( "resume_get_deal_timeout(" + pause_type + ")", 1000*1 );
}

// Function: Resume the update, timeout to action.
function resume_get_deal_timeout( pause_type ){
	switch( pause_type ){
		case 1	:	$("#vmap_status_waiting").stop();
					document.getElementById("vmap_status_waiting_2").style.display = "none";
					$("#vmap_status_waiting").fadeOut("normal", function(){
						get_deal_timer = setInterval("get_deal_timing()", 1000*timing);
						}
					);
					break;
		case 2	:	$("#vmap_status_waiting_2").stop();
					document.getElementById("vmap_status_waiting").style.display = "none";
					$("#vmap_status_waiting_2").fadeOut("normal", function(){
						get_deal_timer = setInterval("get_deal_timing()", 1000*timing);
						}
					);
					break;
	}
}

// Function: Added viewed item into the list
function add_viewed_item(img_url, img_width, img_height, product_url, deal_data){
	var list_div = document.getElementById("viewed_item_list_div");
	
	// Determine the image type
	var img_type;
	switch( img_url.substr(img_url.length-4,4) ){
		case ".swf"	:	img_type = "swf";
						break;
		default		:	img_type = "img";
						break;
	}
	
	last_viewed_item_left += viewed_item_div_width;
	var new_left = last_viewed_item_left;
	
	var template = document.getElementById("viewed_item_div_template");
	var new_div = template.cloneNode(true);
	new_div.id = "";
	// Assign correct colour based on viewed_item_color.
	if( viewed_item_color == 1 ){
		new_div.className = "viewed_item_div_c1";
		viewed_item_color = 2;
	}
	else{
		new_div.className = "viewed_item_div_c2";
		viewed_item_color = 1;
	}
	new_div.style.left = new_left;
	new_div.style.top = "0px";
	new_div.style.display = "block";
	
	if( img_type == "img"){ // Image
		var img_tag = new_div.getElementsByTagName("img")[1];
		img_tag.src = img_url;
		var embed_tag = new_div.getElementsByTagName("embed")[0];
		embed_tag.parentNode.removeChild(embed_tag);
		
		if( img_width == "" || img_height == "" ){
			var new_image = new Image();
			new_image.src = img_url;
			img_width = new_image.width;
			img_height = new_image.height;
		}
		
		var img_size = scale_img(max_width, max_height, img_width, img_height);
		img_tag.width = img_size.width;
		img_tag.height = img_size.height;
		
		var img_a = new_div.getElementsByTagName("a")[0];
		img_a.onmouseover = function(){ focus_viewed_item(this) };
		img_a.onmouseout = function(){ unfocus_viewed_item(this) };
		img_a.href = product_url;
		
	}
	else { // Flash
		var embed_tag = new_div.getElementsByTagName("embed")[0];
		embed_tag.setAttribute("src",img_url);
		var img_tag = new_div.getElementsByTagName("img")[1];
		img_tag.parentNode.removeChild(img_tag);
		
		// Simply assign if no width or no height, bcoz rarely will occur
		if( img_width == "" ){
			img_width = img_max_width;
		}
		if( img_height == "" ){
			img_height = img_max_width;
		}
		
		var img_size = scale_img(max_width, max_height, img_width, img_height);
		embed_tag.width = img_size.width;
		embed_tag.height = img_size.height;
		
		var img_a = new_div.getElementsByTagName("a")[0];
		img_a.onmouseover = function(){ focus_viewed_item(this) };
		img_a.onmouseout = function(){ unfocus_viewed_item(this) };
		img_a.href = product_url;
	}
	
	// Keep all data in hidden input, to be retrieved later if mouse over.
	var data_form = new_div.getElementsByTagName("form")[0];
	var input_tags = data_form.getElementsByTagName("input");
	
	for( var i=0; i < input_tags.length; i++ ){
		switch(input_tags[i].name){
			case "latitude"		:	input_tags[i].value = deal_data.latitude;
									break;
			case "longitude"	:	input_tags[i].value = deal_data.longitude;
									break;
			case "city"			:	input_tags[i].value = deal_data.city;
									break;
			case "country"		:	input_tags[i].value = deal_data.country;
									break;
			case "deal_type"	:	input_tags[i].value = deal_data.deal_type;
									break;
			case "product_name"	:	input_tags[i].value = deal_data.product_name;
									break;
			case "product_url"	:	input_tags[i].value = deal_data.product_url;
									break;
			case "product_image":	input_tags[i].value = deal_data.product_image;
									break;
			case "store_name"	:	input_tags[i].value = deal_data.store_name;
									break;
			case "store_url"	:	input_tags[i].value = deal_data.store_url;
									break;
			case "deal_date"	:	input_tags[i].value = deal_data.deal_date;
									break;
			case "img_width"	:	input_tags[i].value = img_width;
									break;
			case "img_height"	:	input_tags[i].value = img_height;
									break;
			case "img_type"		:	input_tags[i].value = img_type;
									break;
		}
	}
	
	list_div.appendChild(new_div);
	
	$(list_div).animate({
		left: "-="+viewed_item_div_width
	}, "normal");
	
	clear_viewed_list_item();
}

// Function: Set last deal id.
function set_last_deal_id(deal_id){
	last_deal_id = deal_id;
}

// Function: Set is_loading_deal.
function set_is_loading_deal(d_value){
	is_loading_deal = d_value;
}

// Function: Enlarge the viewed item when mouse over
function focus_viewed_item(obj){
	
	pause_get_deal(2); // Pause the map update
	
	var img_width = img_max_width;
	var img_height = img_max_width;
	var img_type = "img";
	var img_tags = obj.parentNode.getElementsByTagName("img");
	var cart_img = img_tags[0];
	cart_img.src = "pic/cart_on.png";
	
	var deal_data = new Object();
	var data_form = obj.parentNode.getElementsByTagName("form")[0];
	var input_tags = data_form.getElementsByTagName("input");
	
	for( var i=0; i < input_tags.length; i++ ){
		switch(input_tags[i].name){
			case "latitude"		:	deal_data.latitude = input_tags[i].value;
									break;
			case "longitude"	:	deal_data.longitude = input_tags[i].value;
									break;
			case "city"			:	deal_data.city = input_tags[i].value;
									break;
			case "country"		:	deal_data.country = input_tags[i].value;
									break;
			case "deal_type"	:	deal_data.deal_type = input_tags[i].value;
									break;
			case "product_name"	:	deal_data.product_name = input_tags[i].value;
									break;
			case "product_url"	:	deal_data.product_url = input_tags[i].value;
									break;
			case "product_image":	deal_data.product_image = input_tags[i].value;
									break;
			case "store_name"	:	deal_data.store_name = input_tags[i].value;
									break;
			case "store_url"	:	deal_data.store_url = input_tags[i].value;
									break;
			case "deal_date"	:	deal_data.deal_date = input_tags[i].value;
									break;
			case "img_width"	:	img_width = parseInt(input_tags[i].value);
									break;
			case "img_height"	:	img_height = parseInt(input_tags[i].value);
									break;
			case "img_type"		:	img_type = input_tags[i].value;
									break;
		}
	}
	
	// Direct call create_content_main() to create & locate content, except add into viewed item list.
	create_content_main(content_template, deal_data, img_width, img_height, img_type, false);
}

// Function: Reset the size of the viewed item when mouse out
function unfocus_viewed_item(obj){
	
	var img_tags = obj.parentNode.getElementsByTagName("img");
	var cart_img = img_tags[0];
	cart_img.src = "pic/cart_off.png";
	
	resume_get_deal(2); // Resume the map update
}

// Function: Clear the viewed list item which are out of the border and no longer need
function clear_viewed_list_item(){
	var list_div = document.getElementById("viewed_item_list_div");
	var list_width = last_viewed_item_left - first_viewed_item_left;
	// We keep the width minimum 1288px even the browser window width has less than that.
	var min_width_to_clear = 1288;
	if( list_width > document.body.clientWidth && list_width > min_width_to_clear ){
		if( document.body.clientWidth > min_width_to_clear )
			var width_to_clear = document.body.clientWidth;
		else
			var width_to_clear = min_width_to_clear;
		var total_to_clear = (list_width - width_to_clear) / viewed_item_div_width;
		
		total_to_clear = Math.floor(total_to_clear);
		//alert(total_to_clear);
		if( total_to_clear > 0 ){
			for( var i=0; i<total_to_clear; i++ ){
				list_div.removeChild(list_div.childNodes[0]);
			}
			// Assign the last_viewed_item_left
			first_viewed_item_left += viewed_item_div_width * total_to_clear;
		}
	}
}