var agent = navigator.userAgent.toLowerCase();
var Slide_image;
var Slide_dim;
var Slide_popup;
var Slide_popup_body;
var init = Init();

// Popup text
var Slide2_title = "Outerfacing is a revolutionary new technology for creating UI's for Object-Oriented systems. It eliminates the need to write UI code by enabling objects to visualize themselves and interact with the user directly.";
var Slide9_title = "Object visualizations can be placed within windows created with MFC or other UI development libraries or frameworks. Windows created with MFC or other UI development libraries can be placed within an object visualization.";
var Slide10_title = "Through a process known as instrumentation any object class can be given the ability to be visualized.  Most object classes can be instrumented in a matter of minutes.";
var Slide11_title = "With Outerfacing no specialized UI skills are required because it isn’t necessary for the programmer to write any UI code.";
var Slide12_title = "With O-O technology the focus of the programming effort is to create an object model of the target domain. This model has the same structure and behavior as the targeted domain. The problem is that this model exists in the digital realm and cannot be seen or interacted with by the user. ";
var Slide13_title = "Outerfacing takes an object system from the digital to the visual realm without requiring any UI code to be created by the programmer.";
var Slide14_title = "Outerfacing gives objects within an object system the ability to visualize themselves and to interact with the user. With Outerfacing, what we commonly refer to as the User Interface is actually the object system as seen through an 'outer-face' of UI controls.";
var Slide16_title = "Instrumentation is the process whereby a programmer adds a small amount of functionality to each class in an object system. This enables objects within a system to be visualized and interacted with. (examples shown in green)";
var Slide17_title = "Visualization is the process whereby the Visualization Engine interacts with the instrumented object system to create dynamic UI representations of the objects within the object system.";
var Slide18_title = "Instrumentation is accomplished by adding three declarations to the class definition and a block of statements to the class implementation that define the member variables and functions that can be visualized. It is a simple process that can be performed on a class in a matter of minutes.";
var Slide19_title = "The Instrumented Object System consists of the instrumented object classes and a single statement in the program’s main function that initializes the Visualization Engine. That is all the code that is required to create the UI for an object system!";
var Slide20_title = "The Visualization Engine handles all aspects of the visualization process. In response to a request to create a view of an object it loads the specified view description from the View Repository. It then creates the UI controls specified by the view description and populates them with data from the object. Any graphical resources (e.g. bitmaps or metafiles) used by the view are loaded from the Resource Repository. Once the view is created the Visualization Engine maintains synchronization between the view and the object that it represents.";
var Slide21_title = "The View Repository is where view descriptors are stored. A view descriptor describes all aspects of a view such as the type of UI control to use to represent object, which data members are to be included in the view and the types of UI controls used to represent them, the placement of the UI controls, the fonts and colors to use and the overall behavior of the view.";
var Slide22_title = "The Resource Repository is where graphical resources such as bitmaps and metafiles are stored.";
var Slide23_title = "A view is a visual  representation of an object. It can take the form of a window, button, bitmap, tabbed panel, property page or any of a number of other UI controls. A view can be populated with UI controls representing data members or functions of the visualized object.";
var Slide24_title = "The View Editor provides the means for creating new and editing existing views.";

// Slide graphics 
var IE_Slide3_image = "/graphics/Slide3.gif";
var IE_Slide4_image = "/graphics/Slide4.gif";
var IE_Slide5_image = "/graphics/Slide5.gif";
var IE_Slide6_image = "/graphics/Slide6.gif";
var IE_Slide7_image = "/graphics/Slide7.gif";
var IE_Slide8_image = "/graphics/Slide8.gif";

// Slide graphics 
var Slide3_image = "./graphics/Slide3.gif";
var Slide4_image = "./graphics/Slide4.gif";
var Slide5_image = "./graphics/Slide5.gif";
var Slide6_image = "./graphics/Slide6.gif";
var Slide7_image = "./graphics/Slide7.gif";
var Slide8_image = "./graphics/Slide8.gif";

// Slide dimensions
var Slide2_dim = new Array(300, 125);
var Slide3_dim = new Array(355, 433);
var Slide4_dim = new Array(319, 301);
var Slide5_dim = new Array(493, 373);
var Slide6_dim = new Array(469, 325);
var Slide7_dim = new Array(481, 181);
var Slide8_dim = new Array(451, 385);
var Slide9_dim = new Array(300, 130);
var Slide10_dim = new Array(300, 105);
var Slide11_dim = new Array(300, 70);
var Slide12_dim = new Array(300, 160);
var Slide13_dim = new Array(300, 85);
var Slide14_dim = new Array(300, 140);
var Slide16_dim = new Array(300, 120);
var Slide17_dim = new Array(300, 105);
var Slide18_dim = new Array(300, 160);
var Slide19_dim = new Array(300, 140);
var Slide20_dim = new Array(300, 295);
var Slide21_dim = new Array(300, 200);
var Slide22_dim = new Array(300, 65);
var Slide23_dim = new Array(300, 140);
var Slide24_dim = new Array(300, 45);

function ShowText(obj) {
	var Slide_title;
	
	if (agent.indexOf("msie") != -1) {
		Slide_popup_body.innerHTML = "";
		Slide_popup_body.style.backgroundImage = "";
	}
	
	if (obj.id == "Slide2") {
		Slide_title = Slide2_title;
		Slide_dim = Slide2_dim;
	}
	else if (obj.id == "Slide9") {
		Slide_title = Slide9_title;
		Slide_dim = Slide9_dim;
	}
	else if (obj.id == "Slide10") {
		Slide_title = Slide10_title;
		Slide_dim = Slide10_dim;
	}
	else if (obj.id == "Slide11") {
		Slide_title = Slide11_title;
		Slide_dim = Slide11_dim;
	}
	else if (obj.id == "Slide12") {
		Slide_title = Slide12_title;
		Slide_dim = Slide12_dim;
	}
	else if (obj.id == "Slide13") {
		Slide_title = Slide13_title;
		Slide_dim = Slide13_dim;
	}
	else if (obj.id == "Slide14") {
		Slide_title = Slide14_title;
		Slide_dim = Slide14_dim;
	}
	else if (obj.id == "Slide16") {
		Slide_title = Slide16_title;
		Slide_dim = Slide16_dim;
	}
	else if (obj.id == "Slide17") {
		Slide_title = Slide17_title;
		Slide_dim = Slide17_dim;
	}
	else if (obj.id == "Slide18") {
		Slide_title = Slide18_title;
		Slide_dim = Slide18_dim;
	}
	else if (obj.id == "Slide19") {
		Slide_title = Slide19_title;
		Slide_dim = Slide19_dim;
	}
	else if (obj.id == "Slide20") {
		Slide_title = Slide20_title;
		Slide_dim = Slide20_dim;
	}
	else if (obj.id == "Slide21") {
		Slide_title = Slide21_title;
		Slide_dim = Slide21_dim;
	}
	else if (obj.id == "Slide22") {
		Slide_title = Slide22_title;
		Slide_dim = Slide22_dim;
	}
	else if (obj.id == "Slide23") {
		Slide_title = Slide23_title;
		Slide_dim = Slide23_dim;
	}
	else if (obj.id == "Slide24") {
		Slide_title = Slide24_title;	
		Slide_dim = Slide24_dim;	
	}
		
	// IE 
	if (agent.indexOf("msie") != -1) {
		Slide_popup_body.innerHTML = "<table><tr><td><p style='font-family:arial;font-size:9pt;color:black;text-align:justify'>" + Slide_title + "</p></td></tr></table>";
		Slide_popup_body.attachEvent("onclick", HideSlide);
		Slide_popup.show(event.offsetX, event.offsetY, Slide_dim[0], Slide_dim[1], Slides);
	}
	else { // Netscape and others 
		width = Slide_dim[0];
		height = Slide_dim[1];
		left = window.screenX + (window.innerWidth - width) / 2;
		top = window.screenY + (window.innerHeight - height) / 2;
		var popup = window.open("", "", "left=" + left + ",top=" + top + ",width=" + width + ",height=" + height);
		popup.document.writeln("<html><body bgcolor='FFFFE6'><p style='font-family:arial;font-size:9pt;color:black;text-align:justify'>" + Slide_title + "</p></body></html>");	
	}
}

function Init() {
	if (agent.indexOf("msie") != -1) {
		Slide_popup = window.createPopup();
		Slide_popup_body = Slide_popup.document.body;
		Slide_popup_body.style.backgroundColor = "#FFFFE6";
		Slide_popup_body.style.backgroundRepeat = "no-repeat";
		Slide_popup_body.style.border = "solid black 1px";
	} 
	return true;
}

function ShowSlide(obj) {
	if (agent.indexOf("msie") != -1) {
		Slide_popup_body.innerHTML = "";
		if (obj.id == "Slide3") {
			Slide_image = IE_Slide3_image;
			Slide_dim = Slide3_dim;
		}
		else if (obj.id == "Slide4") {
			Slide_image = IE_Slide4_image;
			Slide_dim = Slide4_dim;
		}
		else if (obj.id == "Slide5") {
			Slide_image = IE_Slide5_image;
			Slide_dim = Slide5_dim;
		}
		else if (obj.id == "Slide6") {
			Slide_image = IE_Slide6_image;
			Slide_dim = Slide6_dim;
		}
		else if (obj.id == "Slide7") {
			Slide_image = IE_Slide7_image;
			Slide_dim = Slide7_dim;
		}
		else if (obj.id == "Slide8") {
			Slide_image = IE_Slide8_image;
			Slide_dim = Slide8_dim;
		}
	}
	else {
		if (obj.id == "Slide3") {
			Slide_image = Slide3_image;
			Slide_dim = Slide3_dim;
		}
		else if (obj.id == "Slide4") {
			Slide_image = Slide4_image;
			Slide_dim = Slide4_dim;
		}
		else if (obj.id == "Slide5") {
			Slide_image = Slide5_image;
			Slide_dim = Slide5_dim;
		}
		else if (obj.id == "Slide6") {
			Slide_image = Slide6_image;
			Slide_dim = Slide6_dim;
		}
		else if (obj.id == "Slide7") {
			Slide_image = Slide7_image;
			Slide_dim = Slide7_dim;
		}
		else if (obj.id == "Slide8") {
			Slide_image = Slide8_image;
			Slide_dim = Slide8_dim;
		}
	}
	if (agent.indexOf("msie") != -1) {
		Slide_popup_body.attachEvent("onclick", HideSlide);
		Slide_popup_body.style.backgroundImage = "url('." + Slide_image + "')";
		Slide_popup.show(event.offsetX, event.offsetY, Slide_dim[0], Slide_dim[1], Slides);
	}
	else {
		width = Slide_dim[0] + 20;
		height = Slide_dim[1] + 20;
		left = window.screenX + (window.innerWidth - width) / 2;
		top = window.screenY + (window.innerHeight - height) / 2;
		var popup = window.open(Slide_image, "", "left=" + left + ",top=" + top + ",width=" + width + ",height=" + height);
	}
}

function HideSlide() {
	Slide_popup.hide();
}