/*
** Javascript functions used
*/

//function to handle SQ Image MouseOver

function OnMainImageMouseUp()
{
	$("BGDiv").style.display = "block";
}

//function to handle SQ Image MouseOut

function OnMainImageMouseOut()
{
	$("BGDiv").style.display = "none";
}

// Handles Image MouseUp Event on the gif display images
function OnImageMouseUp(e)
{
	var elem   = null;
	var source = null;
	
	e      = Event(e);
	elem   = EventTarget(e);
	source = elem.src;
	
	if(Hflag == true)
	{
		$("messageDiv").style.display = "none";
	}
	Hflag    = false;
	Hmove    = 649;
	
	if(elem.id == "paintImg")
	{
		elem.src = "images/FotoToPaint.gif";
	}
	if(elem.id == "mBgImg")
	{
		elem.src = "images/MagicBackground.gif";
	}
	if(elem.id == "pRestoreImg")
	{
		elem.src = "images/Restore.gif";
	}
	if(elem.id == "pGiftsImg")
	{
		elem.src = "images/PhotoGifts.gif";
	}
	if(elem.id == "sAlbumsImg")
	{
		elem.src = "images/ScrapAlbum.gif";
	}
}

// Handles Image MouseOut Event on gif images
function OnImageMouseOut(e)
{
	var elem   = null;
	var source = null;
	
	e      = Event(e);
	elem   = EventTarget(e);
	source = elem.src;
	
	if(elem.id == "paintImg")
	{
		elem.src = "images/FotoToPaintStill3d.jpg";
	}
	if(elem.id == "mBgImg")
	{
		elem.src = "images/MagicBackgroundStill3d.jpg";
	}
	if(elem.id == "pRestoreImg")
	{
		elem.src = "images/RestoreStill3d.jpg";
	}
	if(elem.id == "pGiftsImg")
	{
		elem.src = "images/PhotoGiftsStill3d.jpg";
	}
	if(elem.id == "sAlbumsImg")
	{
		elem.src = "images/ScrapAlbumStill3d.jpg";
	}
}

// function to handle the click event - checks whether the coordinates are inside menu ...'
function onClickEvent(e)
{
    var target = null;
    var coords = null;
    
    e      = Event(e);
    coords = EventCoord(e);
    
    alert(coords[0]);
    alert(coords[1]);
    target = EventTarget(e);
}

// Handler for the right click event
function onRightClick(e)
{
    var coords = null;
    var srcObj = null;
	
    e      = Event(e);
    coords = EventCoord(e);	
	
	e.target ? srcObj = e.target: srcObj = e.srcElement;
		
	if("fotoImg" == srcObj.id)
	{
		if(e.button && e.button == 2)
        {
			menuEnabled? HideMenu(): DisplayMenu(coords);
        }
		else
		{
			HideMenu();
		}
	}
    else if(!HasParentWithId(srcObj, "cirMenu"))
    {
        HideMenu();
    }
	else if(srcObj.parentNode.id != "cirMenu")
	{
		HideMenu();
	}
    
	return true;
}

// if circular menu is enabled change the menuitem selection based on scroll up and down..
function OnMouseScroll(e)
{
	var delta = 0;
	
	e = Event(e);
	
	// e.wheelDelta(for IE and Opera) and e.detail(Mozilla) gives the needed info
	if(e.wheelDelta)
	{
		delta = e.wheelDelta / 120;  // wheelDelta is a multiple of 120;
		if(window.opera)
		{
			delta = -delta; // delta for opera differs in sign compared to IE
		}
	}
	else if(e.detail)
	{
		delta = -e.detail / 3; // is a multiple of 3 and differs in sign..
	}
	// now the delta is +ve for scroll up and -ve for scroll down..
	// call changeSelection to change the selected menu item if menu is displayed
	if(delta && menuEnabled)
	{
		ChangeSelection(delta,0);
	}
}

// function to hide the context menu (if mouseclick occured within the our coordinates.)
function HideContextMenu()
{
    var e      = null;
    var coords = null;
    
    e      = event;
    coords = EventCoord(e);
    if (coords[0] < 375 && coords[1] > 176 && coords[1] < 618 )
    {
        return false;
    }
    return true;
}

// disable the context menu for the element passed in
function disableContextMenu(element)
{
    element.oncontextmenu = function()
    {
        return false;
    }
}

// function to display the moving hover message to right

var Hmove = -100;
var Vmove = -100;
var Hflag = true;
var Vflag = true;
function moveObjRight(objID)
{
	var obj = null;	
	
	obj     	     =  $(objID);
	obj.style.zIndex = 5;
	Hmove            += 2;
	
	$("messageImage").style.display = "block";
	$(objID).style.display          = "block";
	if(Hmove < 20)
	{
		$("messageImage").src 		   = "images/Message/animated_arrow_right.gif";
		$("messageImage").style.height = "38px";
		$("messageImage").style.width  = "85px";
		$("arrowImgDiv").align         = "right";
		obj.style.left                 =  Hmove + "px";
		window.setTimeout("moveObjRight('" +obj.id+ "');", 0);
	}
	else if(Hmove > 650)
	{
		obj.style.display      = "none";		
		if(Vflag == true)
		{
			$("message").innerHTML         = "Right click on the picture to see the choice of medium..";
			$("message").style.color       = "#FFFFFF";
			$("messageImage").src 		   = "images/Message/animated_arrow_down2.gif";
		    $("messageImage").style.height = "75px";
		    $("messageImage").style.width  = "38px";
			$("arrowImgDiv").align         = "center";
			obj.style.top                  = -100 + "px";
			obj.style.left                 = -100 + "px";
			Vmove 				           = -100;
			window.setTimeout("moveObjDown('" +obj.id+ "');",2000);
		}
		else if(Hflag == true)
		{
			obj.style.left                 = -100 + "px";
			obj.style.top                  = 50 + "px";
			$("message").innerHTML         = "Hover over the blocks <br/>to see an animation sequence";
			$("message").style.color       = "#822B21";
			Hmove                          = -100;
			window.setTimeout("moveObjRight('" +obj.id+ "');", 2000);
		}
	}
	else
	{
		window.setTimeout("moveObjRight('" +obj.id+ "');", 0);
	}
}

// function to display the moving right click message downwards


function moveObjDown(objID)
{
	var obj = null;
	
	obj     	   =  $(objID);
	Vmove          += 2;
	if(Vmove < 200)
	{
		$("messageImage").src 		   = "images/Message/animated_arrow_down2.gif";
		$("messageImage").style.height = "75px";
		$("messageImage").style.width  = "38px";
		$("arrowImgDiv").align         = "center";
		obj.style.display 	           = "block";
		obj.style.top     			   = Vmove + 20 + "px";
		obj.style.left    			   = Vmove - 160 + "px";
		window.setTimeout("moveObjDown('" +obj.id+ "');", 0);
	}
	else if(Vmove > 650)
	{
		$(objID).style.display = "none";
		if(Hflag == true)
		{
			obj.style.left                 = -100 + "px";
			obj.style.top                  = 50 + "px";
			$("message").innerHTML         = "Hover over the blocks <br/>to see an animation sequence";
			$("message").style.color       = "#822B21";
			$("messageImage").src 		   = "images/Message/animated_arrow_right.gif";
		    $("messageImage").style.height = "38px";
		    $("messageImage").style.width  = "85px";
			$("arrowImgDiv").align         = "right";
			Hmove                          = -100;
			window.setTimeout("moveObjRight('" +obj.id+ "');", 2000);
		}
		else if(Vflag == true)
		{
			$("message").innerHTML   = "Right click on the picture to see the choice of medium..";
			$("message").style.color = "#FFFFFF";
			Vmove                    = -100;
			obj.style.top            = -100 + "px";
			obj.style.left           = -100 + "px";
			window.setTimeout("moveObjDown('" +obj.id+ "');",2000);
		}
	}
	else
	{
		window.setTimeout("moveObjDown('" +obj.id+ "');", 0);
	}
}


// ------------------------ CIRCULAR MENU -----------------------------

// global variable to hold the current menu item and menusubitem and the menu Label
var preMenSubItem = "subitem1";
var preMenItem    = "item1";

var menuEnabled = false;     // circular menu enabled or not..

// Initialilztion of the circular menu
function InitMenu()
{
	var xDiff    = 0;
	var y1Diff   = 0;
	var y2Diff   = 0;
	var lDivSize = 65;
	
	var item1Left = lDivSize +  xDiff;
	var item2Left = (2*lDivSize) + (2*xDiff);
	var item2Top  = lDivSize + y1Diff;
	var item3Top  = item2Top + lDivSize + y2Diff;

	$('item1').style.left = $('subitem1').style.left = item1Left + "px";
	$('item1').style.top  = $('subitem1').style.top  = 0 + "px";
	
	$('item2').style.left = $('subitem2').style.left = item2Left + "px";
	$('item2').style.top  = $('subitem2').style.top  = item2Top + "px";
	
	$('item3').style.left = $('subitem3').style.left = item2Left + "px";
	$('item3').style.top  = $('subitem3').style.top  = item2Top + lDivSize + y2Diff + "px";
	
	$('item4').style.left = $('subitem4').style.left = item1Left + "px";
	$('item4').style.top  = $('subitem4').style.top  = item3Top + lDivSize + y1Diff + "px";
	
	$('item5').style.left = $('subitem5').style.left = 0 + "px";
	$('item5').style.top  = $('subitem5').style.top  = item3Top + "px";
	
	$('item6').style.left = $('subitem6').style.left = 0 + "px";
	$('item6').style.top  = $('subitem6').style.top  = item2Top + "px";
}

function HandleItem(CurrMenSubItem, CurrMenItem, CurrText)
{
	// enters this function if mouse is moved over any of the menusubitem.
	if(preMenItem != null && preMenSubItem != null)
	{
		$(preMenItem).style.display    = "none";
		$(preMenSubItem).style.display = "block";
	}
	CurrMenSubItem.style.display = "none";
	$(CurrMenItem).style.display = "block";
	
	preMenItem    = CurrMenItem;
	preMenSubItem = CurrMenSubItem.id;	
}

/*
** Function to display Circular Menu;
** The circular menu will be displayed upon rightclick
*/
function DisplayMenu(coords)
{
	var menuItems = new Array();
	
    menuItems     = $('cirMenu').childNodes;
	Vflag         = false;
	Vmove         = 649;
	$("messageDiv").style.display = "none";
	
	for (itemIndex in menuItems)
	{
		if(menuItems[itemIndex].className == "sdivs")
		{
			menuItems[itemIndex].style.display = "block";
		}
	}
	
	// to position the menu according to the point of click
    coords[0] > 80 ? coords[0] -= 80 : coords[0] = 0;
	
    $('cirMenu').style.left = coords[0] + "px";
    $('cirMenu').style.top  = coords[1] - "130" + "px";
	
	$('cirMenu').style.display     = "block";
	$(preMenItem).style.display    = "block";
	$(preMenSubItem).style.display = "none";
	menuEnabled                    = true;
	//OnMainImageMouseUp();
	
}

// Function to hide the circular menu
function HideMenu()
{
	var menuItems = new Array();
	
    menuItems     = $('cirMenu').childNodes;
	
	for (itemIndex in menuItems)
	{
		if(menuItems[itemIndex].className == "sdivs")
		{
			menuItems[itemIndex].style.display = "none";
		}
	}
	$('cirMenu').style.display  = "none";
	$(preMenItem).style.display = "none";
    menuEnabled                 = false;
}

// changes the background image of the passed in object
function ChangeImage(objectName, srcImg, lblImg)
{
    var obj = null;
	
    obj                          = $(objectName);
    obj.src                      = srcImg;
	$('BGInnerDivNew').innerHTML = lblImg;
    HideMenu(); // to disable the menu
}

// to change the selected menu item
function ChangeSelection(scrollstate, newitem)
{
	var menItemId    = null;
	var menSubItemId = null;
	var nextItemNo   = 0;
	var currItemNo   = 0;
	
	if(scrollstate) // if selection is based on the scroll state of the mouse
	{
		// Anticlockwise movement for up..
		currItemNo = parseInt(preMenItem.charAt(4));
		scrollstate > 0 ? nextItemNo = currItemNo - 1: nextItemNo = currItemNo + 1;
		// next item no should be between 0 and 7;
		if(nextItemNo > 6){nextItemNo = 1};
		if(nextItemNo < 1){nextItemNo = 6};
		
		menItemId    = preMenItem.substr(0,4) + nextItemNo;
		menSubItemId = preMenSubItem.substr(0,7) + nextItemNo;
		
		HandleItem($(menSubItemId), menItemId);
	}
	else // if to select the passed in item
	{
	}
}

// Handles MouseOut Event on links
function HideBannerImage()
{
	
	bannerFlag               = true;
	id                       = null;
	ShowInitialBannerImage(lstBanner);
	if(null != lstBanner)
	{
		$(lstBanner).style.color = "#A83D59";
	}	
}

// global variable to hold different data for banner images
var bannerFlag = true;
var lstBanner  = null;
var id         = null;

//function to show the banner image based on time interval
function ShowBannerImage(bannerTxt)
{
	id = window.setTimeout("ChangeBannerImage('" +bannerTxt+ "',true);",4000);
}

//function to show the banner image of the first link(Photo & Slide Scanning)
function ShowInitialBannerImage(bannerTxt)
{
	id = window.setTimeout("ChangeBannerImage('" +bannerTxt+ "',true);",0);
}

//function to change the banner image
function ChangeBannerImage(txt,bnFlag)
{	
	bannerFlag = bnFlag;
	if(null != lstBanner)
	{
		$(lstBanner).style.color = "#A83D59";
	}
	lstBanner               = txt;
	$(txt).style.color      = "#6E0D27";
	window.clearTimeout(id);
	try
    {		
        switch(txt)
        {
            case "URL_PHOTO_SLIDE":
				$("BannerImg").src     = "images/BannerImages/Photo Slide Banner.jpg";
				$("BannerImg").onclick = function(){GetUrl('URL_PHOTO_SLIDE')};				
				if(bannerFlag)
				{
					ShowBannerImage("URL_PHOTO_EDITOR");
				}				
				break;
            case "URL_PHOTO_EDITOR":
                $("BannerImg").src     = "images/BannerImages/Photo Editor Banner.jpg";
				$("BannerImg").onclick = function(){GetUrl('URL_PHOTO_EDITOR')};
				if(bannerFlag)
				{
					ShowBannerImage("URL_ENLARGEMENTS");
				}				
				break;
            case "URL_ENLARGEMENTS":
                $("BannerImg").src     = "images/BannerImages/Enlargement Banner.jpg";
				$("BannerImg").onclick = function(){GetUrl('URL_ENLARGEMENTS')};
				if(bannerFlag)
				{
					ShowBannerImage("URL_WOVEN_PRODUCTS");
				}				
				break;
            case "URL_WOVEN_PRODUCTS":
				$("BannerImg").src     = "images/BannerImages/Woven Banner.jpg";
				$("BannerImg").onclick = function(){GetUrl('URL_WOVEN_PRODUCTS')};
				if(bannerFlag)
				{
					ShowBannerImage("URL_PHOTO_BOOKS");
				}				
				break;
			case "URL_PHOTO_BOOKS":
                $("BannerImg").src     = "images/BannerImages/Photo Book Banner.jpg";
				$("BannerImg").onclick = function(){GetUrl('URL_PHOTO_BOOKS')};
				if(bannerFlag)
				{
					ShowBannerImage("URL_CUSTOM_FRAMING");
				}				
				break;
			case "URL_CUSTOM_FRAMING":
                $("BannerImg").src     = "images/BannerImages/Frame Banner.jpg";
				$("BannerImg").onclick = function(){GetUrl('URL_CUSTOM_FRAMING')};
				if(bannerFlag)
				{
					ShowBannerImage("URL_PHOTO_CARDS");
				}				
				break;
			case "URL_PHOTO_CARDS":
                $("BannerImg").src     = "images/BannerImages/Photo Card Banner.jpg";
				$("BannerImg").onclick = function(){GetUrl('URL_PHOTO_CARDS')};
				if(bannerFlag)
				{
					ShowBannerImage("URL_MOVIES_DVD");
				}				
				break;
			case "URL_MOVIES_DVD":
                $("BannerImg").src     = "images/BannerImages/Movie to DVD Banner.jpg";
				$("BannerImg").onclick = function(){GetUrl('URL_MOVIES_DVD')};
				if(bannerFlag)
				{
					ShowBannerImage("URL_POSTERS");
				}				
				break;
			case "URL_POSTERS":
                $("BannerImg").src     = "images/BannerImages/Poster Banner.jpg";
				$("BannerImg").onclick = function(){GetUrl('URL_POSTERS')};
				if(bannerFlag)
				{
					ShowBannerImage("URL_VHS_DVD");
				}				
				break;
			case "URL_VHS_DVD":
                $("BannerImg").src     = "images/BannerImages/VHS to DVD Banner.jpg";
				$("BannerImg").onclick = function(){GetUrl('URL_VHS_DVD')};
				if(bannerFlag)
				{
					ShowBannerImage("URL_SCRAPBOOKS_KITS");
				}				
				break;
			case "URL_SCRAPBOOKS_KITS":
                $("BannerImg").src     = "images/BannerImages/Scrapbook Kits Banner.jpg";
				$("BannerImg").onclick = function(){GetUrl('URL_SCRAPBOOKS_KITS')};
				if(bannerFlag)
				{
					ShowBannerImage("URL_PHOTO_SLIDE");
				}				
				break;            
        }			
    }
    catch(e)
    {
    }
}

/* ---------------------------- Common functions ---------------------------- */

// returns the event object 
function Event(e)
{
	if(!e)
	{
		e = event;
	}
	return e;
}

// gets the element which raised the event
function EventTarget(e)
{
	var eTarget = null;
	
	if(e.target)
	{
		eTarget = e.target;	
	}
	else if(e.srcElement)
	{
		eTarget = e.srcElement;
	}
	return eTarget;
}

// returns the DOM object of the element passed in...
function $(element)
{
	return document.getElementById(element);
}


// Add EventHandler
function Listen(object, eventName, eventHandler)
{
	if(object.addEventListener)
	{
		object.addEventListener(eventName, eventHandler, false);
	}
	else if(object.attachEvent)
	{
		object.attachEvent("on"+eventName, eventHandler, false);
	}
}

// get the document Element
function $de()
{
    return document.documentElement;
}

// get the document body
function $b()
{
    return document.body;
}

// function returns the coordinates of the event
function EventCoord(e)
{
    var coord = [-1000,-1000];

    coord[0] = e.clientX + $b().scrollLeft + $de().scrollLeft;
    coord[1] = e.clientY + $b().scrollTop  + $de().scrollTop;

    return coord;
}

function IsChild(ch,p)
{
    var f = false;

    while(!f && p && ch)
    {
        f  = ch == p;
        ch = ch.parentNode;
    }

    return f;
}

function HasParentWithId(ch,id)
{
    var f = false;

    while(!f && ch)
    {
        f  = ch.id == id;
        ch = ch.parentNode;
    }
    return f;
}

// TODO:
function VoidLink(notify)
{
    if(notify)
    {
        alert('//TODO: This feature is to be implemented.');
    }
    return false;
}

// Finds the browser Windows Size.
function GetFrameSize()
{
    var frameWidth  = null;
    var frameHeight = null;
    
    if (self.innerWidth)
	{
		frameWidth  = self.innerWidth;
		frameHeight = self.innerHeight;
	}
	else if (document.documentElement && document.documentElement.clientWidth)
	{
		frameWidth  = document.documentElement.clientWidth;
		frameHeight = document.documentElement.clientHeight;
	}
	else if (document.body)
	{
		frameWidth  = document.body.clientWidth;
		frameHeight = document.body.clientHeight;
	}
	return [frameWidth,frameHeight];
}