var tags = new Array();
        var addTagActivated = false;
        var xmlhttp;
        var browser;
        browser = navigator.appName;

		function GetXmlHttpObject()
		{
			if (window.XMLHttpRequest)
			{
			  	// code for IE7+, Firefox, Chrome, Opera, Safari
			  	return new XMLHttpRequest();
			}
			if (window.ActiveXObject)
			{
			  // code for IE6, IE5
			  return new ActiveXObject("Microsoft.XMLHTTP");
			}
            
			return null;
		}

        function removeTag(tagid,tag,friendid) {
		     var userid = document.getElementById('userid').value;
            
            var pictid = document.getElementById('pictid').value;
            //alert(tagid); alert(tag); alert(friendid);
			xmlhttp=GetXmlHttpObject();
			if (xmlhttp==null)
		  	{
		  		alert ("Browser does not support HTTP Request");
		  		return;
		  	}
            //alert(friendid);
			var url = "DbServer.php";
			url = url + "?q=Remove&tagid="+tagid+"&userid="+userid+"&pictid="+pictid;

			xmlhttp.onreadystatechange = function()
			{
				if(xmlhttp.readyState == 4 )
				{
					var i,j=0,x,y,h,w,tag;
					var s = xmlhttp.responseText;
					var info = s.split("&&");
					var n = info.length-1;
                    var taglist = '';
					for(i=0;i<n;i=i+10)
					{
						x = info[i+0]; y = info[i+1]; h = info[i+2]; w = info[i+3];
						tag = info[i+4];
                        var userid   = info[i+5];
                        var pictid   = info[i+6];
                        var friendid = info[i+7];
                        var tagid    = info[i+8];
						var showdeltag  = info[i+9];
                        if(friendid == 0)
                            taglist  = taglist + '&nbsp; <a class="highlightTagNoId" href=\'javascript:void(0);\' onclick=\'goProfile('+friendid+',"'+tag+'")\' onmouseout=\'downLight('+tagid+',"'+tag+'")\' onmouseover=\'highLight('+tagid+',"'+tag+'")\'>'+tag+'</a>';
                        else
                            taglist  = taglist + '&nbsp; <a class="highlightTag" href=\'javascript:void(0);\' onclick=\'goProfile('+friendid+',"'+tag+'")\' onmouseout=\'downLight('+tagid+',"'+tag+'")\' onmouseover=\'highLight('+tagid+',"'+tag+'")\'>'+tag+'</a>';
						if(showdeltag == 1)
							taglist = taglist + ' <a class="removeTag" href="javascript:void(0);" onmouseout=\'downLight('+tagid+',"'+tag+'")\' onmouseover=\'highLight('+tagid+',"'+tag+'")\' onclick=\'removeTag('+tagid+',"'+tag+'",'+friendid+')\'>x</a>';


						tags[j]={"x1":x,"y1":y,"height":h,"width":w,"tag":tag,"tagid":tagid,"friendid":friendid};
						++j;
					}

                    document.getElementById('taglist').innerHTML = taglist;
					$('#tagpict').imgTags('firstload');
                    //$('#tagpict').imgTags();
					//alert("Succesfully information Loaded");
				/*	  var tagname = 'tagarea_'+tagid;
                    var alldivs = document.getElementsByName(tagname);
                    
                    for(var i=0; i<alldivs.length; i++) {
                        removedChildTagArea =document.getElementById(alldivs[i].getAttribute('id'));
                        document.body.removeChild(removedChildTagArea);
						}
						*/
				}
			}

			xmlhttp.open("GET", url, true);
			xmlhttp.send(null);
            
        }

        function highLight(tagid,tag){
            if(addTagActivated == true) return;
            var tagid_tad = 'tagarea_'+tagid;
            document.getElementById(tagid_tad).style.display = 'block';
            document.getElementById(tagid_tad).style.border = '1px solid white';

            //$('.tagarea_'+tagid).show();
        }

        function downLight(tagid,tag) {
            if(addTagActivated == true) return;
            var tagid_tad = 'tagarea_'+tagid;
            document.getElementById(tagid_tad).style.display = 'none';
            document.getElementById(tagid_tad).style.border = '0px solid white';
        }

		function LoadNode()
		{
            var userid = document.getElementById('userid').value;
            
            var pictid = document.getElementById('pictid').value;
           
			xmlhttp=GetXmlHttpObject();
			if (xmlhttp==null)
		  	{
		  		alert ("Browser does not support HTTP Request");
		  		return;
		  	}

			var url = "DbServer.php";
			url = url + "?q=Get&userid="+userid+"&pictid="+pictid;
            
			xmlhttp.onreadystatechange = function()
			{
				if(xmlhttp.readyState == 4 )
				{
					var i,j=0,x,y,h,w,tag;
					var s = xmlhttp.responseText;
					var info = s.split("&&");
					var n = info.length-1;
                    var taglist = '';
					for(i=0;i<n;i=i+10)
					{
						x = info[i+0]; y = info[i+1]; h = info[i+2]; w = info[i+3];
						tag = info[i+4];
                        var userid   = info[i+5];
                        var pictid   = info[i+6];
                        var friendid = info[i+7];
                        var tagid    = info[i+8];
						var showdeltag  = info[i+9];
                        if(friendid == 0)
                            taglist  = taglist + '&nbsp; <a class="highlightTagNoId" href=\'javascript:void(0);\' onclick=\'goProfile('+friendid+',"'+tag+'")\' onmouseout=\'downLight('+tagid+',"'+tag+'")\' onmouseover=\'highLight('+tagid+',"'+tag+'")\'>'+tag+'</a>';
                        else
                            taglist  = taglist + '&nbsp; <a class="highlightTag" href=\'javascript:void(0);\' onclick=\'goProfile('+friendid+',"'+tag+'")\' onmouseout=\'downLight('+tagid+',"'+tag+'")\' onmouseover=\'highLight('+tagid+',"'+tag+'")\'>'+tag+'</a>';
						if(showdeltag == 1)
							taglist = taglist + ' <a class="removeTag" href="javascript:void(0);" onmouseout=\'downLight('+tagid+',"'+tag+'")\' onmouseover=\'highLight('+tagid+',"'+tag+'")\' onclick=\'removeTag('+tagid+',"'+tag+'",'+friendid+')\'>x</a>';


						tags[j]={"x1":x,"y1":y,"height":h,"width":w,"tag":tag,"tagid":tagid,"friendid":friendid};
						++j;
					}

                    document.getElementById('taglist').innerHTML = taglist;
					$('#tagpict').imgTags('firstload');
                    //$('#tagpict').imgTags();
					//alert("Succesfully information Loaded");
				}
			}

			xmlhttp.open("GET", url, true);
			xmlhttp.send(null);
		}


		function AddNewNode()
		{
			xmlhttp=GetXmlHttpObject();
			if (xmlhttp==null)
		  	{
		  		alert ("Browser does not support HTTP Request");
		  		return false;
		  	}
			var x = document.getElementById("TagX1").value;
			var y = document.getElementById("TagY1").value;
			var h = document.getElementById("TagHeight").value;
			var w = document.getElementById("TagWidth").value;
			var tag = document.getElementById("TagTag").value;
            var userid = document.getElementById("userid").value;
            var pictid = document.getElementById("pictid").value;
            var friendid = document.getElementById("friendid").value;
			var member_id = document.getElementById("member_id").value;
            
            
			var url = "DbServer.php";
			url = url + "?q=Post&x="+x+"&y="+y+"&h="+h+"&w="+w+"&tag="+tag+"&userid="+userid+"&pictid="+pictid+"&friendid="+friendid+"&member_id="+member_id;

			xmlhttp.onreadystatechange = function()
			{
				if(xmlhttp.readyState == 4 )
				{
					var i=0;
					for(tmp in tags)
					{
						tags[i]=tags[i];
						++i;
					}
                    var res = xmlhttp.responseText.split('@@');
                    var tagid = res[0];
                    var current = res[1];
                    if(friendid == null || friendid == '' || friendid == '0' || friendid == 0)friendid = 0;
                    
					tags[i]={"x1":x,"y1":y,"height":h,"width":w,"tag":tag,"tagid":tagid,"friendid":friendid};
					$('#tagpict').imgTags('addnew');
                    //$('#tagpict').imgTags();
                    //
					//alert("Succesfully information Added");
                    document.getElementById('TagTag').value = '';
                    document.getElementById('friendid').value = '';
                    var prev = document.getElementById('taglist').innerHTML;
                    document.getElementById('taglist').innerHTML = prev + current;
					return true;
				}
			}

			xmlhttp.open("GET", url, true);
			xmlhttp.send(null);
            
		}

        function hideThings (event) {
            if(event.keyCode == 27) {
				$('#tagpict').imgAreaSelect({ hide: true });
				$('#tagform').hide();
            }
        }

		$(window).load(function () {
            
			LoadNode();
            
            if (window.addEventListener) {
                window.addEventListener("keydown", function(event){hideThings(event)}, false);
            } else if (window.attachEvent) {
                window.attachEvent("keydown", function(event){hideThings(event)}, false);
            }
			//$('#tagpict').imgAreaSelect({ onSelectChange: showaddtag })

			$('#submittag').click(function(){
                var tagval = document.getElementById('TagTag').value;
                if( tagval == "") { alert("Tag text empty! Please write the tag or choose from your friends list."); return; }
                AddNewNode();
				//if(!AddNewNode())return;
                addTagActivated = false;
				$('#tagpict').imgAreaSelect({ hide: true });
				$('#tagform').hide();
                hideResultDiv();
			});
            
			$('#canceltag').click(function(){
				$('#tagpict').imgAreaSelect({ hide: true });
				$('#tagform').hide();
                addTagActivated = false;
			});

			$('#addtaglink').click(function(){
				$('#tagpict').imgAreaSelect({ onSelectChange: showaddtag, x1: 120, y1: 90, x2: 280, y2: 210 });
                addTagActivated = true;
                setFocusBox();
				return false;
			});
		});

		function showaddtag (img, area)
		{
			imgOffset = $(img).offset();
			form_left  = parseInt(imgOffset.left) + parseInt(area.x1);
			form_top   = parseInt(imgOffset.top) + parseInt(area.y1) + parseInt(area.height)+5;

			$('#tagform').css({ left: form_left + 'px', top: form_top + 'px'});

			$('#tagform').show();

			$('#tagform').css("z-index", 10000);
			$('#TagX1').val(area.x1);
			$('#TagY1').val(area.y1);
			$('#TagHeight').val(area.height);
			$('#TagWidth').val(area.width);
            //This functions will initiate AJAX loader for friendlist
            //callLoadFriendList();
            
		}


        function callLoadFriendList() {

 			xmlhttp=GetXmlHttpObject();
			if (xmlhttp==null)
		  	{
		  		alert ("Browser does not support HTTP Request");
		  		return false;
		  	}

            var user_id;
			var url = "DbServer.php";
			url = url + "?frnlst=load&user_id="+user_id;

			xmlhttp.onreadystatechange = function(responseText)
			{
				if(xmlhttp.readyState == 4 )
				{

                    /*var i=0;
					for(tmp in tags)
					{
						tags[i]=tags[i];
						++i;
					}
					tags[i]={"x1":x,"y1":y,"height":h,"width":w,"tag":tag};
					$('#tagpict').imgTags();
					//alert("Succesfully information Added");
					return true;
                    */
				}
			}

			xmlhttp.open("GET", url, true);
			xmlhttp.send(null);
        }

        //this will redirect the page to the friend's profile
        function goProfile(fid, fname){
            if(fid == 0) {
                //
            }
            //else alert('This will redirect to the friend profile, id='+fid);
            else {
                memid = fid;
                var re_url = "../members/?memid="+memid;
                location.href = re_url;
            }
        }

        function setFocusBox() {
            document.getElementById("TagTag").focus();
        }