var bookmark_object = {};
var list_of_sets = [];
var current_set = 0;
var set_items = [];

set_bookmark_object = function( obj ){
	window.location = "#" + encodeURIComponent(json_encode(obj));
};

get_bookmark_object = function(){
	var text = decodeURIComponent(document.location.hash.substring(1));
	if ( text.length > 0 ){
		return json_decode(text);
	} else {
		return {};
	}
};

close_popover = function(){
	element("popover").style.display = "none";
	element("popover_text").style.display = "none";
	
};

mouse_over_set_item = function( i ){
	var e = element("fashion_collage.set_item["+i+"]");
	e.style.border = "2px solid " + set_items[i].item.color;
	e.style.margin = "0px";
};
mouse_out_set_item = function( i ){
	var e = element("fashion_collage.set_item["+i+"]");
	e.style.border = "none";
	e.style.margin = "2px";
};

click_sets_with_item = function ( id ){
	post_http(
		"list_sets_with_item.php",
		{
			"id":id
		},
		function(response){
			var obj = json_decode(response);
			if ( report_errors(obj) == false ){
				list_of_sets = obj.sets;
				element("fashion_sets").style.display = "block";
				update_list_of_sets();
			}
			
		}
	);
	element("popover").style.display = "none";
	element("popover_text").style.display = "none";
};

set_item_text = function( i ){
	var text = "";
	var size_string = "";
	if ( set_items[i].item.width > set_items[i].item.height ){
		size_string = "width=\"161\"";
	} else {
		size_string = "height=\"161\"";
	}
	text += "<span class=\"popover_left\">";
	/*added border=1*/
	text += "<img style=\"border:1px solid #EF2F8F;\" src=\"uploaded_images/"+encodeURIComponent(set_items[i].item.file_name)+"\" "+size_string+">";
	text += "</span>";
	text += "<span class=\"popover_right\">";
	if ( set_items[i].item.link.length > 0 ){
		text += "<a target=\"_blank\" class=\"name\" href=\""+set_items[i].item.link+"\">"+set_items[i].item.name+"</a><br/><br/>"
	} else {
		text += set_items[i].item.name+"<br/>"
	}
	
	if ( set_items[i].item.price.length > 0 ){
		text += "<span class=\"price\">"+set_items[i].item.price+"</span><br/>";
	}
	if ( set_items[i].item.source_name.length > 0 ){
		if ( set_items[i].item.source_link.length > 0  ){
			text += "<a target=\"_blank\" class=\"source\" href=\""+set_items[i].item.source_link+"\"><font color=\"green\">"+set_items[i].item.source_name+"</font></a><br/><br/>";
		} else {
			text += set_items[i].item.source_name+"<br/><br/>";
		}
	}
	
	if ( set_items[i].item.purchase_link.length > 0 ){
		text += "<a target=\"_blank\" href=\""+set_items[i].item.purchase_link+"\"><img src=\"images/buy.png\" border=\"0\"/></a><br/><br/>";
	}
	
	/*text += "<a target=\"_blank\" href=\"#\" onclick=\"click_sets_with_item("+set_items[i].item.id+")\">More Sets with this item &gt;&gt;</a>";*/
	text += "</span>";
	return text;

};
click_set_item = function(event, i){
	var top = mouse_y_from_event(event);
	var left = mouse_x_from_event(event);

	var e = element("popover");
	e.style.left = left + "px";
	e.style.top = top + "px";
	e.style.display = "block";

	var e = element("popover_text");
	e.style.left = left + "px";
	e.style.top = top + "px";
	e.style.display = "block";
	
	var text = "";
	text += "<div onclick=\"close_popover()\" class=\"close_button\"></div>";
	text += set_item_text(i);
	e.innerHTML = text;

};

update_set_items = function(){
	var text = "";
	for ( i = 0; i < set_items.length; i++ ){
		text += "<div onclick=\"click_set_item(event,"+i+")\" onmouseover=\"mouse_over_set_item("+i+")\" onmouseout=\"mouse_out_set_item("+i+")\" id=\"fashion_collage.set_item["+i+"]\"></div>";
	}
	var e = element("fashion_collage");
	e.innerHTML = text;
	e.style.display = "block";
	e.style.position = "relative";
	e.style.overflow = "hidden";
	
	
	
	
	for ( i = 0; i < set_items.length; i++ ){
		var e = element("fashion_collage.set_item["+i+"]");
		e.style.position = "absolute";
		e.style.left = set_items[i].left + "px";
		e.style.top = set_items[i].top + "px";
		e.style.width = set_items[i].item.width + "px";
		e.style.height = set_items[i].item.height + "px";
		e.style.backgroundImage = "url(uploaded_images/"+encodeURIComponent(set_items[i].item.file_name)+")";
		e.style.margin = "2px";
		e.style.zIndex = new Number(set_items[i].z_index)+100;
		e.style.cursor = "pointer";
		
	}
	
	text = "";
	text += "<h2>Items in this set</h2>";
	/*u2b i=0 changed to 1 to skip the main image*/
	for ( i = 1; i < set_items.length; i++ ){
		text += "<div class=\"set_item\">";
		text += set_item_text(i);
		text += "</div>";
	}
	element("items_in_set").innerHTML = text;
	
};

get_set_items = function(){
	post_http(
		"list_set_items.php",
		{
			"id":current_set
		},
		function( response ){
			var obj = json_decode(response);
			if ( report_errors( obj ) == false ){
				set_items = obj.set_items;
				update_set_items();
			}
		}
	);
};
click_set = function( i ){
	current_set = list_of_sets[i].id;
	bookmark_object.current_set = list_of_sets[i].id;
	set_bookmark_object(bookmark_object);

	element("items_in_set").style.display = "block";

	element("fashion_sets").style.display = "none";
	get_set_items();


};

update_list_of_sets = function(){
	var text = "";
	text += "<h2>Sets with this item</h2>";
	for ( i = 0; i < list_of_sets.length; i++ ){
		text += "<img class=\"clickable\" onclick=\"click_set("+i+")\" src=\"draw_set_collage.php?id="+list_of_sets[i].id+"\"/>";
	}
	element("fashion_sets").innerHTML = text;
};

get_list_of_sets = function(){
	get_http( 
		"list_sets.php",
		function (response){
			var obj = json_decode(response);
			if ( report_errors(obj) == false ){
				list_of_sets = obj.sets;
				update_list_of_sets();
			}
		}
	);

};

window.onload = function(){
	
	
	bookmark_object = get_bookmark_object();
	
	if ( typeof(bookmark_object.current_set) == "undefined" ){
		get_list_of_sets();
		element("fashion_sets").style.display = "block";
		element("fashion_collage").style.display = "none";
		element("items_in_set").style.display = "none";
	} else {
		current_set = bookmark_object.current_set;
		get_set_items();
		element("fashion_sets").style.display = "none";
		element("fashion_collage").style.display = "block";
		element("items_in_set").style.display = "block";
	}
};