// פונקציה יוצרת מסגרת אנימציה חדשה. ברוב המקרים נעשה שימוש באותה מסגרת אנימציה על
// אלמנטים שונים שוב ושוב. אבל אם יש צורך, יוצרים מסגרת חדשה
function AddNewFlickeringFramesObj(Index)
{
	// יצירת אובייקט אשר מייצג את המסגרת ויכול להכיל עוד נתונים אשר ניתן יהיה
	// לגשת אליהם מכל מקום לאורך תאליך האנימציה
	var Obj = new Object();
	Obj.ID = "FlickeringFrame_"+Index; // אשר ניתן למסגרת שנוצרת id
	Obj.Available = true; // מאפיין הקובע האם ניתן לעשות שימוש במסגרת או שהיא תפוסה
	var NewFlickeringFrame = document.createElement("div"); // יצירת מסגרת חדשה
	document.body.appendChild(NewFlickeringFrame); // קביעת המסגרת במסמך
	// קביעת נתונים עבור המסגרת
	with (NewFlickeringFrame)
	{
		id = Obj.ID;
		style.left = "20px";
		style.top = "20px";
		style.width = "20px";
		style.height = "20px";
		className = "SkeletonFrame";
	}
	// index המסגרת החדשה מוכנסת אל מערך אשר מכיל את המסגרות וקביעת ה
	// של המסגרת כך שיהיה נוח לפנות אליה ID של המערך בשם ה
	FlickeringFramesArr[Obj.ID] = Obj;
	return Obj.ID;
}

// מערך אשר יכיל את מסגרות האנימציה שנוצרות
var FlickeringFramesArr = new Array();

// הפונקציה מכילה ערכים עבור האובייקט המייצג את מסגרת האנימציה
// ושולחת אותו אל תחילת הצגת האנימציה
function CreateFrameAnimationObject(FlickeringTimes, Timeout, FromObjID, ToObjID, DisplaySrc)
{
	var FlickeringFramesID; // משתנה אשר יקבע באיזו מסגרת מהמערך יעשה שימוש

	var i, Counter = 0;
	// מעבר על מערך המסגרות ומציאת מסגרת פנוייה כדי להשתמש בה
	for (i in FlickeringFramesArr) 
	{
		if (FlickeringFramesArr[i].Available) // אם המסגרת פנוייה
		{
			FlickeringFramesID = FlickeringFramesArr[i].ID; // של המסגרת ID מציאת ה
			break;
		}

		Counter ++;
	}
	// אם לא נמצאה אף מסגרת פנוייה, קריאה לפונקציה אשר תיצור מסגרת חדשה
	if (! FlickeringFramesID)
	{
		FlickeringFramesID = AddNewFlickeringFramesObj(Counter);
	}
	
	// השמת ערכים עבור האובייקט של המסגרת ואשר ניתן יהיה לפנות אליהם
	// לכל עורך האנימציה
	var FrameObj = FlickeringFramesArr[FlickeringFramesID];

	FrameObj.Available = false; // המסגרת תפוסה
	FrameObj.FlickeringTimes = FlickeringTimes; // מספר הפעמים בו תוזז המסגרת
	FrameObj.Timeout = Timeout; // פרק הזמן בין תזוזה אחת לשנייה
	FrameObj.FromObjID = FromObjID; // של האלמנט ממנו תתחיל האנימציה id ה
	FrameObj.ToObjID = ToObjID; // של האלמנט אליו תגיע האנימציה id ה
	// קביעה האם בסיומה של הנימציה יש להציג או להסתיר את מסגרת התמונה הבינונית
	FrameObj.DisplaySrc = DisplaySrc; 
	
	
	// הפנייה אל האלמנט ממנו תתחיל האנימציה
	var FromObj = document.getElementById(FromObjID);
	// מציאת מוקומו ומידותיו של האלמנט
	with (new Obj_rectangle(FromObj))
	{
		var Obj1Left = ObjLeft;
		var Obj1Width = ObjWidth;
		var Obj1Top = ObjTop;
		var Obj1Height = ObjHeight;
	}
	
	// הפנייה אל אלמנט מסגרת האנימציה, קביעת מידותיה ומיקומה על פי מיקום
	// ומידות האלמנט אשר ממנה היא תתחיל
	with (document.getElementById(FlickeringFramesID).style)
	{
		left = Obj1Left +"px";
		top = Obj1Top +"px";
		width = Obj1Width +"px";
		height = Obj1Height +"px";
		display = "block";
	}
	// קריאה לפונקציה שתזיז את מסגרת האנימציה
	FrameAnimation(FlickeringFramesID);
}


// הפונקציה מזיזה מסגרת בין שני אלמנטים. הפונקציה קוראת אל עצמה מספר פעמים
// אשר מוגדר באובייקט האנמיציה וכל פעם מזיזה את המסגרת ומשנה לה את הגודל
// כך שהיא מתחילה ממיקומו ומגדלו של האלמנט הראשון ומסיימת את התזוזה במיקומו
// וגדלו של האלמנט השני
function FrameAnimation(FlickeringFramesID, FlickeringTimesDone)
{
	var FrameObj = FlickeringFramesArr[FlickeringFramesID]; // הפנייה אל אובייקט המסגרת
	var FlickeringTimes = FrameObj.FlickeringTimes; // מספר הפעמים שיש להזיז את המסגרת
	var Timeout = FrameObj.Timeout; // משך הזמן בין תזוזות המסגרת
	var FromObjID = FrameObj.FromObjID; // של האלמנט ממנו יש להתחיל את התזוזה id ה
	var ToObjID = FrameObj.ToObjID; // של האלמנט אליו מוזזת המסגרת id ה
	
	// מונה אחורה את מספר הפעמים שנשארו לתזוזת המסגרת FlickeringTimesDone המשתנה
	// בפעם הראשונה ערכו יהיה הערך שנמצא בתוך אובייקט המסגרת ולאחר מכן הוא יכיל
	// את הערך שמתקבל בקריאה לפונקציה
	if (! FlickeringTimesDone){FlickeringTimesDone = FlickeringTimes;}
	else {FromObjID = document.getElementById(FlickeringFramesID).id;}
	
	// הפנייה אל האלמנט אשר ממנו מתחילה האנימציה
	var FromObj = document.getElementById(FromObjID);
	// קבלת נתוני מיקומו ומידותיו של האלמנט
	with (new Obj_rectangle(FromObj))
	{
		var Obj1Left = ObjLeft;
		var Obj1Width = ObjWidth;
		var Obj1Top = ObjTop;
		var Obj1Height = ObjHeight;
	}
	
	// הפנייה אל האלמנט אשר אליו תגיע האנימציה
	var ToObj = document.getElementById(ToObjID);
	// קבלת נתוני מיקומו ומידותיו של האלמנט
	with (new Obj_rectangle(ToObj))
	{
		var Obj2Left = ObjLeft;
		var Obj2Width = ObjWidth;
		var Obj2Top = ObjTop;
		var Obj2Height = ObjHeight;		
	}
	
	var NewLeft = Math.floor((Obj1Left - Obj2Left) / FlickeringTimesDone);
	var NewWidth = Math.floor((Obj1Width - Obj2Width) / FlickeringTimesDone);
	var NewTop = Math.floor((Obj1Top - Obj2Top) / FlickeringTimesDone);
	var NewHeight = Math.floor((Obj1Height - Obj2Height) / FlickeringTimesDone);

	try
	{
		// קביעת מיקומה ומידותיה של מסגרת האנימציה
		with (document.getElementById(FlickeringFramesID).style)
		{
			left = parseInt(left) - NewLeft +"px";
			top = parseInt(top) - NewTop +"px";
			width = parseInt(width) - NewWidth +"px";
			height = parseInt(height) - NewHeight +"px";
		}
	}
	catch(err)
	{
		document.getElementById(FlickeringFramesID).style.display = "none";
	}
	
	// אם מונה הפעמים אשר הוזזה המסגרת גדול מ-1, תיקרה שוב הפונקציה אשר תזיז את המסגרת
	if (FlickeringTimesDone > 1)
	{
		FlickeringTimesDone --;
		setTimeout("FrameAnimation('"+FlickeringFramesID+"', "+FlickeringTimesDone+")", Timeout);
	}
	else
	{
		// אם בסיום האנימציה אין להציג את התמונה האמצעית
		if (FrameObj.DisplaySrc == false)
		{
			// קריאה לפונקציה אשר תסתיר את מסגרת האנימציה לאחר פרק זמן מסויים
			setTimeout("HideFlickeringFrame('"+FlickeringFramesID+"')", 200);
		}
		else
		{
			// הסתרת מידית של מסגרת האנימציה
			document.getElementById("CloseButton").style.display = "none"; 	
			document.getElementById(FlickeringFramesID).style.display = "none";
		}
		// קריאה לפונקציה אשר מנהלת את המשך הקוד לאחר האנימציה
		FlickeringFramesFinished(FlickeringFramesID);
	}
}

// הפונקציה מסתירה את מסגרת האנימציה
function HideFlickeringFrame(FlickeringFramesID)
{
	document.getElementById("CloseButton").style.display = "none"; 	
	document.getElementById(FlickeringFramesID).style.display = "none";
}

// פונקציה אשר מתבצעת בעת סיום פעול האנימצייה
function FlickeringFramesFinished(FlickeringFramesID)
{
	var FrameObj = FlickeringFramesArr[FlickeringFramesID]; // הפנייה אל אובייקט המסגרת
	
	// קריאה אל הפונקציה אשר מציגה או מסתירה את מסגרת התמונה הבינונית
	Hide_Display_MediumImage(FrameObj.DisplaySrc);
	
	// קביעה כי אובייקט מסגרת האנימציה פנוייה לשימוש
	FrameObj.Available = true;
	
	// איפוס הנתונים באובייקט המסגרת
	FrameObj.FlickeringTimes = null;
	FrameObj.Timeout = null;
	FrameObj.FromObjID = null;
	FrameObj.ToObjID = null;
}



// פונקציה אשר מציגה או מסתירה את מסגרת התמונה הבינוית
function Hide_Display_MediumImage(DisplaySrc)
{
	if (! GlobalPicPosition){return;}
	var SmallMiddlePicFrameObj = document.getElementById("SmallMiddlePicFrame"); // תמונה קטנה אמצעית
	var MediumPicFrameObj = document.getElementById("MediumPicFrame"); // מסגרת תמונה בינונית
	var MediumImageObj = document.getElementById("MediumImage"); // תמונה בינונית
	
	// יש להסתיר תמונה בינונית
	if (! DisplaySrc)
	{
		MediumImageObj.src = ""; // סילוק התמונה הבינונית
		MediumPicFrameObj.style.display = "none"; // הסתרת מסגרת התמונה הבינונית
		MediumImageObj.style.display = "none"; // הסתרת התמונה הבינונית
		//document.getElementById("RedBall").style.display = "none"; // הסתרת סמן מיקום התמונה הקטנה
			
		GlobalSmallPicInFocus = null; // ביטול ההפנייה אל התמונה הקטנה שנלחצה
		return;
	}
	// יש להציג תמונה בינונית
	else
	{
		LocateMediumPicFrameLocation(); // קריאה לפונקציה אשר ממקמת את מסגרת התמונה הבינונית
		// קביעת התמונה שתוצג במסגרת הבינונית על סמך מקור התמונה הקטנה
		MediumImageObj.src = GlobalSmallPicInFocus.src.replace("small", "medium");
		//LocatePicArrowLocation(); // קריאה לפונקציה אשר תמקם את סמן כיוון התמונה הקטנה
		LocateCloseButtonLocation();
		return;
	}
}


// פונקציה אשר מהתחלת אנימציית המסגרת בין שני אלמנטים
function StartAnimationFrameMove(Obj, PicPosition)
{
	if (! Obj){return;}
	GlobalPicPosition = PicPosition; // הצבת מיקום התמונה הקטנה במשתנה גלובלי
	if (GlobalSmallPicInFocus) // אם ישנה תמונה קטנה קודמת במשתנה הגלובלי
	{
		if (GlobalSmallPicInFocus.src == Obj.src) // אם התמונה הקודמת זהה לתמונה עלייה נלחץ
		{
			document.getElementById("CloseButton").style.display = "none"; // הסתרת כפתור הסגירה
			GlobalSmallPicInFocus = null; // ביטול ההפנייה לתמונה גלובלית
			document.getElementById("MediumPicFrame").style.display = "none"; // הסתרת מסגרת התמונה הבינונית
			// קריאה לפונקציה אשר תציג את אנימציית המסגרת מכיוון התמונה הבינונית אל הקטנה
			setTimeout("CreateFrameAnimationObject(10, 1, 'MeasurementMediumPicFrame', '"+Obj.parentNode.id+"', false)", 1);
			return;
		}
	}
		
	GlobalSmallPicInFocus = Obj; // הצבת התמונה הקטנה במשתנה הגלובלי
	// קריאה לפונקציה אשר תציג את אנימציית המסגרת מכיוון התמונה הקטנה אל הבינונית
	setTimeout("CreateFrameAnimationObject(10, 1, '"+Obj.parentNode.id+"', 'MeasurementMediumPicFrame', true)", 10);

}


// פונקציה אשר ממקמת את מסגרת התמונה הבינונית על המסך
function LocateMediumPicFrameLocation()
{
	// הפנייה אל מסגרת התמונה הקטנה האמצעית
	var SmallMiddlePicFrameObj = document.getElementById("SmallMiddlePicFrame");
	// הפנייה אל מסגרת התמונה הבינונית
	var MediumPicFrameObj = document.getElementById("MediumPicFrame");
	
	with (new Obj_rectangle(SmallMiddlePicFrameObj)) // קבלת נתוני מיקום המסגרת הקטנה האמצעית
	{
		var Obj1Left = ObjLeft;
		var Obj1Top = ObjTop;
	}
	// הזזת המסגרת האמצעית אל המיקום שלה ביחחס אל מיקום התמונה הקטנה האמצעית
	with (MediumPicFrameObj.style) 
	{
		left = (Obj1Left - 100)+"px";
		top = (Obj1Top - 100)+"px";
		display = "block";
	}
	// בדפדפני אקספלורר, הפעלת פונקצייה נוספת
	//if (isMIE)
	//{
		var MediumImageObj = document.getElementById("MediumImage"); // הפנייה אל התמונה הבינונית
		MediumImageObj.onload = LocateMediumPicLocation; // קריאה לפונקציה בעת טעינתה
	//}
}


// הפונקציה מוצאת את מיקומה של התמונה הבינונית על המסך ומפעילה עלייה הגדרות
// מיקום הבסולוטיות. הדבר מתבצע רק בדפדפני אקספלורר ונועד על מנת לאפשר שימוש
// בפילטר על המסגרת של התמונה בלי שהוא ישפיע על התמונה עצמה
function LocateMediumPicLocation()
{
	// הפנייה אל מסגרת התמונה הבינונית
	var MediumPicFrameObj = document.getElementById("MediumPicFrame"); 
	// מציאת מידות המסגרת
	with (new Obj_rectangle(MediumPicFrameObj))
	{
		var Obj1Width = ObjWidth;
		var Obj1Height = ObjHeight;
		var Obj1Left = ObjLeft;
		var Obj1Top = ObjTop;
	}
	// הפנייה אל אלמנט התמונה הבינונית
	var MediumImageObj = document.getElementById("MediumImage");
	
	MediumImageObj.style.display = "block";
	// מציאת מידות התמונה הבינונית
	with (new Obj_rectangle(MediumImageObj))
	{
		var Obj2Width = ObjWidth;
		var Obj2Height = ObjHeight;
	}
	
	// קביעת המיקום של התמונה על פי חישוב האפרשים בינה לבין המסגרת שלה
	MediumImageObj.style.position = "absolute";
	
	MediumImageObj.style.left = (Obj1Left +((Obj1Width - Obj2Width) / 2))+"px";
	MediumImageObj.style.top = (Obj1Top+((Obj1Height - Obj2Height) / 2))+"px";
}



// הפונקציה ממקמת את סמן הסגירה
function LocateCloseButtonLocation()
{
	// הפנייה אל אלמנט המסגרת של התמונה הבינונית
	var MediumPicFrameObj = document.getElementById("MediumPicFrame");
	// קבלת נתוני המידות והמיקום של המסגרת
	with (new Obj_rectangle(MediumPicFrameObj))
	{
		var Obj1Right = ObjRight;
		var Obj1Top = ObjTop;
	}
	
	// קביעת מיקום הסמן על המסמך
	with (document.getElementById("CloseButton").style)
	{
		display = "block";
		left = (Obj1Right - 25)+"px";
		top = (Obj1Top + 10)+"px";
	}
}




// הפונקציה ממקמת את הסמן אשר מצביע על הכיוון של התמונה הקטנה אשר פתחה את הבינונית
function LocatePicArrowLocation()
{
	// הפנייה אל אלמנט המסגרת של התמונה הבינונית
	var MediumPicFrameObj = document.getElementById("MediumPicFrame");
	// קבלת נתוני המידות והמיקום של המסגרת
	with (new Obj_rectangle(MediumPicFrameObj))
	{
		var Obj1Left = ObjLeft;
		var Obj1Width = ObjWidth;
		var Obj1Right = ObjRight;
		var Obj1Top = ObjTop;
		var Obj1Height = ObjHeight;
		var Obj1Bottom = ObjBottom;
		var Obj1Middle = Obj1Top + (Obj1Height / 2);
		var Obj1Center = Obj1Left + (Obj1Width / 2);
	}
	
	// קביעת המיקומים של הסמן אשר מבוססים על פי מיקומי המסגרת והמשתנה הגלובלי
	// אשר קובע את הכיוון שבו נמצאת התמונה הקטנה אשר פתחה את התמונה הבינונית
	var BallLeft, BallTop;
	switch (GlobalPicPosition)
	{
		case "TL": // top left
			BallLeft = Obj1Left;
			BallTop = Obj1Top;
		break;
		case "TM": // top middle
			BallLeft = (Obj1Center - 12);
			BallTop = Obj1Top;
		break;
		case "TR": // top right
			BallLeft = (Obj1Right - 24);
			BallTop = Obj1Top;
		break;
		case "ML": // middle left
			BallLeft = Obj1Left;
			BallTop = Obj1Top + (Obj1Height / 2) - 12;
		break;
		case "MR": // middle right
			BallLeft = (Obj1Right - 24);
			BallTop = Obj1Top + (Obj1Height / 2) - 12;
		break;
		case "BL": // bottom left
			BallLeft = Obj1Left;
			BallTop = (Obj1Bottom - 24);
		break;
		case "BM": // bottom middle
			BallLeft = (Obj1Center - 12);
			BallTop = (Obj1Bottom - 24);
		break;
		case "BR": // bottom right
			BallLeft = (Obj1Right - 24);
			BallTop = (Obj1Bottom - 24);
		break;
	}
	// קביעת מיקום הסמן על המסמך
	with (document.getElementById("RedBall").style)
	{
		display = "block";
		left = BallLeft+"px";
		top = BallTop+"px";
	}
}


var GlobalSmallFrameInAbsolutePosition;
// פונקציה אשר ממקמת את התמונה הקטנה במיקום הבסולוטי בעת מעבר עכבר עליה
// כך שהיא תוצג מעל לתמונה הבינונית
function AddAbsoluteToSmallPic(Obj, e, Frame)
{
	Frame = document.getElementById(Frame);
	with (new Obj_rectangle(Frame))
	{
		var Obj1Left = ObjLeft;
		var Obj1Top = ObjTop;
	}
	//alert(Obj1Left + " [] " + Obj1Top)
	Frame.style.position = "absolute";
	Frame.style.left = Obj1Left+"px";
	Frame.style.top = Obj1Top+"px";
	Frame.style.zIndex = "11";
}

// פונקציה אשר מסירה את המיקום האבסולוטי מתמונה קטנה בעת הזזת העכבר ממנה
function RemoveAbsoluteToSmallPic(Obj, e, Frame)
{	
	Frame = document.getElementById(Frame);
	GlobalSmallFrameInAbsolutePosition = false;
	Frame.style.position = "static";
}