var keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";

function encode64(input) {
   var output = "";
   var chr1, chr2, chr3;
   var enc1, enc2, enc3, enc4;
   var i = 0;

   do {
      chr1 = input.charCodeAt(i++);
      chr2 = input.charCodeAt(i++);
      chr3 = input.charCodeAt(i++);

      enc1 = chr1 >> 2;
      enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
      enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
      enc4 = chr3 & 63;

      if (isNaN(chr2)) {
         enc3 = enc4 = 64;
      } else if (isNaN(chr3)) {
         enc4 = 64;
      }

      output = output + keyStr.charAt(enc1) + keyStr.charAt(enc2) + 
         keyStr.charAt(enc3) + keyStr.charAt(enc4);
   } while (i < input.length);
   
   return output;
}

var bDragApproved = false;
var oOldImage = null;
var nOldRight = 0;
var nOldBottom = 0;
var oImage = null;
var nTempX;
var nTempY;
var x;
var y;
var nStartX;
var nStartY;

if(document.layers) 
{
	document.captureEvents(Event.MOUSEDOWN);
	document.captureEvents(Event.MOUSEMOVE);
	document.captureEvents(Event.MOUSEUP);
}

document.onmousedown = DragImage;
document.onmouseup = DropImage;

function OnMove(e)
{
	if(document.all) 
	{
		if (event.button==1 && bDragApproved)
		{
			if(oImage != null)
			{
				oImage.style.pixelLeft = nTempX + event.clientX - x;
				oImage.style.pixelTop = nTempY + event.clientY - y;
			}

			return false;
		}
	}
	else if(document.layers || document.getElementById)
	{
		if (bDragApproved)
		{
			if(oImage != null)
			{
				oImage.style.left = parseInt(nTempX) + e.pageX - x + 'px';
				oImage.style.top = parseInt(nTempY) + e.pageY - y + 'px';
			}

			return false;
		}
	}
}

function DragImage(e)
{
	if(document.all) 
	{
		if (event.button == 1) 
		{
			if (event.srcElement.className == "drag")
			{
				bDragApproved = true;
				oImage = event.srcElement;
				nTempX = oImage.style.pixelLeft;
				nTempY = oImage.style.pixelTop;
				nStartX = nTempX;
				nStartY = nTempY;
				x = event.clientX;
				y = event.clientY;
				document.onmousemove = OnMove;
				SaveWhiteBoard();

				return false;
			} 
		}
	}
	else if(document.layers || document.getElementById)
	{
		if (e.which==1)
		{
			if(e.target.className == "drag" && oImage == null)
			{
				bDragApproved = true;
				oImage = e.target;
				nTempX = getPosition(oImage).x;
				nTempY = getPosition(oImage).y;
				oImage.style.left = nTempX;
				oImage.style.top = nTempY;
				oImage.style.position = 'absolute';
				nStartX = nTempX;
				nStartY = nTempY;
				x = e.pageX;
				y = e.pageY;
				document.onmousemove = OnMove;
				SaveWhiteBoard();
				
				return false;
			}
		}
	}
}

function getPosition(e)
{
	var left = 0;
	var top  = 0;

	while (e.offsetParent)
	{
		left += e.offsetLeft;
		top  += e.offsetTop;
		e     = e.offsetParent;
	}

	left += e.offsetLeft;
	top  += e.offsetTop;

	return {x:left, y:top};
}

function DropImage(e)
{
    bDragApproved = false;
    if(oImage != null)
    {
		var oWhity = document.getElementById('PanelWhiteBoard');
		var nWhityLeft = getPosition(oWhity).x;//parseInt(oWhity.style.left) - document.body.scrollLeft;
		var nWhityWidth = 500;
		var nWhityTop = 150;//parseInt(oWhity.style.top) - document.body.scrollTop;
		var nWhityHeight = 500;

		if(oImage.className == "drag")
		{
			var nLeft = getPosition(oImage).x - nWhityLeft;
			var nTop = getPosition(oImage).y - nWhityTop;
			if(nLeft>0 && nLeft<nWhityWidth && nTop>0 && nTop<nWhityHeight)
			{
				SaveWhiteBoard();

				var strDataSrc = oImage.getAttribute('dataSrc');
				if(strDataSrc.length > 0)
					strDataSrc = encode64(strDataSrc);
				var strUrl = "SharedWhite.aspx?action=add&source=" + encode64(oImage.src) + "&alter=" + encode64(oImage.alt) + "&left=" + nLeft  + "&top=" + nTop + "&id=" + oImage.id + "a&dataSrc="+ strDataSrc + "&width=" + oImage.width + "&height=" + oImage.height;

				var oHidden = document.getElementById('WhiteBoardState');
				if(oHidden != null)
					strUrl += '&whiteBoard=' + oHidden.value;

				//window.alert(oHidden.value);
				oWhity.src = strUrl;
			}

			if(document.all) 
			{
				oImage.style.pixelLeft = nStartX;
				oImage.style.pixelTop = nStartY;
			}
			else if(document.layers || document.getElementById)
			{
				oImage.style.position = 'relative';
				oImage.style.left = 0;
				oImage.style.top = 0;
			}
		}

		oImage = null;
    }
}

function DeleteImage(nImage)
{
    var oHidden = document.getElementById('WhiteBoardState');
    if(oHidden != null)
    {
        var oFrame = window.frames[1];//PanelWhiteBoard
        if(oFrame != null)
        {
            var oBody = oFrame.document.getElementsByTagName('BODY')[0];
            if(oBody != null)
            {
                var oItems = oBody.getElementsByTagName('IMG');
                if(oItems != null)
                {
                    for(var i=0;i<oItems.length;i++)
                    {
                        var oImage = oItems[i];
                        if(oImage.getAttribute('id') == nImage)
                        {
                            var oWhity = oFrame.document.getElementById('PanelWhiteBoard');
                            if(oWhity != null)
                                oWhity.removeChild(oImage);

                            var oLT = oFrame.document.getElementById('lefttop');
                            if(oLT != null)
                                oLT.style.visibility = 'hidden';
                            var oRT = oFrame.document.getElementById('righttop');
                            if(oRT != null)
                                oRT.style.visibility = 'hidden';
                            var oRB = oFrame.document.getElementById('rightbottom');
                            if(oRB != null)
                                oRB.style.visibility = 'hidden';
                            var oLB = oFrame.document.getElementById('leftbottom');
                            if(oLB != null)
                                oLB.style.visibility = 'hidden';
                            var oWB = document.getElementById('WhiteBoardDetails');
                            if(oWB != null)
                                oWB.style.visibility = 'hidden';
       
                            SaveWhiteBoard();

                            break;
                        }
                    }
                }
            }
        }
    }
}

function SaveWhiteBoard()
{
    var oHidden = document.getElementById('WhiteBoardState');
    if(oHidden != null)
    {
        var oFrame = window.frames[1];
        if(oFrame != null)
        {
            var oBody = oFrame.document.getElementsByTagName('BODY')[0];
            if(oBody != null)
            {
                var oItems = oBody.getElementsByTagName('IMG');
                if(oItems != null)
                {
                    var strImages = '';
                    for(var i=0;i<oItems.length;i++)
                    {
                        var oImage = oItems[i];
                        if(oImage != null)
                        {
                            strImages += oImage.getAttribute('id');
                            var nLeft = oImage.style.left;
                            strImages += '-' + nLeft.replace('px','');
                            var nTop = oImage.style.top;
                            strImages += '-' + nTop.replace('px','');
                            strImages += '-' + oImage.width;
                            strImages += '-' + oImage.height;
                            strImages += ";";
                        }
                    }

                    oHidden.value = strImages;
		    //window.alert(strImages);
                }
            }
        }
    }
}

function DoNavigateFirst()
{
    SaveWhiteBoard();

    var oList = document.getElementById('DropDownListCategory');
    if(oList != null)
    {
        var strCategory = oList.options[oList.selectedIndex].value;
        if(strCategory != null)
            EnjoyImages(strCategory, 0);
    }
}

function DoNavigateLast()
{
    SaveWhiteBoard();

    var oLocator = document.getElementById('PagerLocation');
    if(oLocator != null)
    {
        var strLocator = oLocator.innerText;
        if(strLocator.length > 0)
        {
            var nStartItem = strLocator.substring(0, strLocator.indexOf('-'));
            var nEndItem = strLocator.substring(0, strLocator.indexOf(' '));
            nEndItem = nEndItem.substring(nEndItem.indexOf('-') + 1);
            var nItemCount = strLocator.substring(strLocator.indexOf('of ') + 3);
            nItemCount = nItemCount.substring(0, nItemCount.indexOf(' '));

            var nPageSize = 9;//nEndItem - nStartItem + 1;
            var nPageIndex = Math.ceil(nItemCount/nPageSize);

            nPageIndex = parseInt(nPageIndex) - 1;
            if(nPageIndex < 0)
                nPageIndex = 0;
            
            var oList = document.getElementById('DropDownListCategory');
            if(oList != null)
            {
                var strCategory = oList.options[oList.selectedIndex].value;
                if(strCategory != null)
                    EnjoyImages(strCategory, nPageIndex);
            }
        }
    }
}

function DoNavigateNext()
{
    SaveWhiteBoard();

    var oLocator = document.getElementById('PagerLocation');
    if(oLocator != null)
    {
        var strLocator = oLocator.innerText;
        if(strLocator.length > 0)
        {
            var nStartItem = strLocator.substring(0, strLocator.indexOf('-'));
            nStartItem = nStartItem.substring(strLocator.indexOf(' ') + 1);
            var nEndItem = strLocator.substring(0, strLocator.indexOf(' of'));
            nEndItem = nEndItem.substring(nEndItem.indexOf('-') + 1);
            var nItemCount = strLocator.substring(strLocator.indexOf('of ') + 3);
            nItemCount = nItemCount.substring(0, nItemCount.indexOf(' '));

            var nPageSize = 9;//nEndItem - nStartItem + 1;
            var nPageIndex = nEndItem/nPageSize;
            if(nPageIndex > nItemCount/nPageSize)
                nPageIndex = Math.ceil(nItemCount/nPageSize);
            
            nPageIndex = parseInt(nPageIndex);
            
            var oList = document.getElementById('DropDownListCategory');
            if(oList != null)
            {
                var strCategory = oList.options[oList.selectedIndex].value;
                var oTable = document.getElementById('RightHandTable');
                if(oTable != null)
                {
                    if(strCategory == "My-Favorite-Shops")
                    {
                        oTable.style.visibility = 'visible';
                    }
                    else
                    {
                        oTable.style.visibility = 'hidden';
                    }

                    EnjoyImages(strCategory, nPageIndex);
                }
            }
        }
    }
}

function DoNavigatePrev()
{
    SaveWhiteBoard();

    var oLocator = document.getElementById('PagerLocation');
    if(oLocator != null)
    {
        var strLocator = oLocator.innerText;
        if(strLocator.length > 0)
        {
            var nStartItem = strLocator.substring(0, strLocator.indexOf('-'));
            nStartItem = nStartItem.substring(strLocator.indexOf(' ') + 1);
            var nEndItem = strLocator.substring(0, strLocator.indexOf(' of'));
            nEndItem = nEndItem.substring(nEndItem.indexOf('-') + 1);
            var nItemCount = strLocator.substring(strLocator.indexOf('of ') + 3);
            nItemCount = nItemCount.substring(0, nItemCount.indexOf(' '));

            var nPageSize = 9;//nEndItem - nStartItem + 1;
            var nPageIndex = parseInt(nStartItem/nPageSize) - 1;
            if(nPageIndex<0)
                nPageIndex = 0;
            
            var oList = document.getElementById('DropDownListCategory');
            if(oList != null)
            {
                var strCategory = oList.options[oList.selectedIndex].value;
                var oTable = document.getElementById('RightHandTable');
                if(oTable != null)
                {
                    if(strCategory == "My-Favorite-Shops")
                    {
                        oTable.style.visibility = 'visible';
                    }
                    else
                    {
                        oTable.style.visibility = 'hidden';
                    }

                    EnjoyImages(strCategory, nPageIndex);
                }
            }
        }
    }
}

function EnjoyImages(strCategory, nIndex)
{
    var strImages = ImageReader.GetImagesFromDatabase(strCategory, nIndex);
    if(strImages != null && strImages.value != null)
    {
        var strItemsCount = "";
        var strOnlyImages = strImages.value;
        if(strOnlyImages.indexOf("->") != -1)
        {
            strItemsCount = strOnlyImages.substring(strOnlyImages.indexOf("->") + 2);
            strOnlyImages = strOnlyImages.substring(0, strOnlyImages.indexOf("->"));
        }
        
        var oPagerLocation = document.getElementById('PagerLocation');
        if(oPagerLocation != null)
        {
            var nItemsCount = parseInt(strItemsCount);
            if(nItemsCount <=9)
                oPagerLocation.innerHTML = "<a href=\"javascript:DoNavigateFirst();\">&lt;</a>&nbsp; 1-" + strItemsCount + " of " + strItemsCount + " &nbsp;<a href=\"javascript:DoNavigateLast();\">&gt;</a>";
            else
            {
                var nLastItem = (parseInt(nIndex) + 1) * 9;
                var nFirstItem = (parseInt(nIndex)) * 9 + 1;
                if(nLastItem > nItemsCount)
                    nLastItem = nItemsCount;
                oPagerLocation.innerHTML = "<a href=\"javascript:DoNavigateFirst();\">&lt;</a>&nbsp; " + nFirstItem + "-" + nLastItem + " of " + strItemsCount + " &nbsp;<a href=\"javascript:DoNavigateLast();\">&gt;</a>";
            }
        }

        var oPreviousPageNav = document.getElementById('PreviousPageNav');
        if(oPreviousPageNav != null)
        {
            if(parseInt(nIndex) > 0)
                oPreviousPageNav.innerHTML = "<a href=\"javascript:DoNavigatePrev();\">&lt;&lt; Previous</a><br><a href=\"javascript:DoNavigateFirst();\">&lt&lt; First</a>";
            else
                oPreviousPageNav.innerHTML = "&lt;&lt; Previous<br><a href=\"javascript:DoNavigateFirst();\">&lt&lt; First</a>";
        }
        
        var oNextPageNav = document.getElementById('NextPageNav');
        if(oNextPageNav != null)
        {
            if((parseInt(nIndex) + 1) * 9 < parseInt(strItemsCount))
                oNextPageNav.innerHTML = "<a href=\"javascript:DoNavigateNext();\">Next &gt;&gt;</a><br><a href=\"javascript:DoNavigateLast();\">Last &gt;&gt;</a>";
            else
                oNextPageNav.innerHTML = "Next &gt;&gt;<br><a href=\"javascript:DoNavigateLast();\">Last &gt;&gt;</a>";
        }
       
        var arrImages = strOnlyImages.split('>');
        
        var oItem1 = document.getElementById('ImageItem1');
        var oItem2 = document.getElementById('ImageItem2');
        var oItem3 = document.getElementById('ImageItem3');
        var oItem4 = document.getElementById('ImageItem4');
        var oItem5 = document.getElementById('ImageItem5');
        var oItem6 = document.getElementById('ImageItem6');
        var oItem7 = document.getElementById('ImageItem7');
        var oItem8 = document.getElementById('ImageItem8');
        var oItem9 = document.getElementById('ImageItem9');
        
        oItem1.innerHTML = "&nbsp;";
        oItem2.innerHTML = "&nbsp;";
        oItem3.innerHTML = "&nbsp;";
        oItem4.innerHTML = "&nbsp;";
        oItem5.innerHTML = "&nbsp;";
        oItem6.innerHTML = "&nbsp;";
        oItem7.innerHTML = "&nbsp;";
        oItem8.innerHTML = "&nbsp;";
        oItem9.innerHTML = "&nbsp;";
        
        for(var i=0; i<arrImages.length; i++)
        {
            var strImage = arrImages[i];
            if(strImage != null)
            {
                if(strImage.length > 0)
                {
                    if(i==0)
                        oItem1.innerHTML = strImage + ">";
                    else if(i==1)
                        oItem2.innerHTML = strImage + ">";
                    else if(i==2)
                        oItem3.innerHTML = strImage + ">";
                    else if(i==3)
                        oItem4.innerHTML = strImage + ">";
                    else if(i==4)
                        oItem5.innerHTML = strImage + ">";
                    else if(i==5)
                        oItem6.innerHTML = strImage + ">";
                    else if(i==6)
                        oItem7.innerHTML = strImage + ">";
                    else if(i==7)
                        oItem8.innerHTML = strImage + ">";
                    else if(i==8)
                        oItem9.innerHTML = strImage + ">";
                }
            }
        }
    }
}