var kin;
            var message = "";
            var linkText = "";
            var menuHome;
            var menuWebDesign;
            var menuSEO;
            var menuDomainsHosting;
            var menuCustomSoftware
            var menuPortfolio;
            var menuContact;
            var curMenu = "";
            var curMenuWidth = 0;
            var menuDir = "";
            var myRectangle;
            var textAdjustY = 15; //adjust menu text y-start-point

            

            function Rectangle(x, y, width, height, borderWidth) {
                this.x = x;
                this.y = y;
                this.width = width;
                this.height = height;
                this.borderWidth = borderWidth;
            }

            function updateStage() {
                var linearSpeed = 100; // pixels / second
                var linearDistEachFrame = linearSpeed *
                kin.getTimeInterval() /
                1000;

                var currentX = myRectangle.x;

                if (currentX <
                kin.getCanvas().width - myRectangle.width -
                myRectangle.borderWidth / 2) {
                    var newX = currentX + linearDistEachFrame;

                    myRectangle.x = newX;
                }
            }

            function updateMenuWidth() {
                var linearSpeed = 100; // pixels / second
                var linearDistEachFrame = linearSpeed *
                kin.getTimeInterval() /
                1000;

                if (curMenu != "") {
                    if (Math.round(myRectangle.width) > curMenuWidth) {
                        var newWidth = myRectangle.width - linearDistEachFrame;
                        myRectangle.width = newWidth;
                    }

                    if (Math.round(myRectangle.width) < curMenuWidth) {
                        var newWidth = myRectangle.width + linearDistEachFrame;
                        myRectangle.width = newWidth;
                    }
                }
            }

            function updateMenu() {
                var linearSpeed = 500; // pixels / second
                var linearDistEachFrame = linearSpeed * kin.getTimeInterval() / 1000;

                var currentX = myRectangle.x;

                var menuItem;

                switch (curMenu) {
                    case "menuHome":
                    	curMenuWidth = menuHome.width;
                        if (myRectangle.x < menuHome.x) {
                            if (menuDir == "down") {
                                //must have made it
                                myRectangle.x = menuHome.x;
                                menuDir = "";
                                curMenu = "";
                                myRectangle.width = menuHome.width;
                            } else if (menuDir == "") {
                                menuDir = "up";
                            } else {
                                var newX = currentX + linearDistEachFrame;
                                myRectangle.x = newX;
                                if (myRectangle.x >= menuHome.x) {
									//must have made it
	                                myRectangle.x = menuHome.x;
	                                menuDir = "";
	                                curMenu = "";
	                                myRectangle.width = menuHome.width;
								}
                            }
                        } else if (myRectangle.x > menuHome.x) {
                            if (menuDir == "up") {
                                //must have made it
                                myRectangle.x = menuHome.x;
                                menuDir = "";
                                curMenu = "";
                                myRectangle.width = menuHome.width;
                            } else if (menuDir == "") {
                                menuDir = "down";
                            } else {
                                var newX = currentX - linearDistEachFrame;
                                myRectangle.x = newX;
                                if (myRectangle.x <= menuHome.x) {
									//must have made it
	                                myRectangle.x = menuHome.x;
	                                menuDir = "";
	                                curMenu = "";
	                                myRectangle.width = menuHome.width;
								}
                            }
                        } else {
                            curMenu = "";
                        }
                        break;
                    case "menuWebDesign":
                        curMenuWidth = menuWebDesign.width;
                        if (myRectangle.x < menuWebDesign.x) {
                            if (menuDir == "down") {
                                //must have made it
                                myRectangle.x = menuWebDesign.x;
                                menuDir = "";
                                curMenu = "";
                                myRectangle.width = menuWebDesign.width;
                            } else if (menuDir == "" ) {
                                menuDir = "up";
                            } else {
                                var newX = currentX + linearDistEachFrame;
                                myRectangle.x = newX;
                                if (myRectangle.x >= menuWebDesign.x) {
									//must have made it
	                                myRectangle.x = menuWebDesign.x;
	                                menuDir = "";
	                                curMenu = "";
	                                myRectangle.width = menuWebDesign.width;
								}
                            }
                        } else if (myRectangle.x > menuWebDesign.x) {
                            if (menuDir == "up") {
                                //must have made it
                                myRectangle.x = menuWebDesign.x;
                                menuDir = "";
                                curMenu = "";
                                myRectangle.width = menuWebDesign.width;
                            } else if (menuDir == "") {
                                menuDir = "down";
                            } else {
                                var newX = currentX - linearDistEachFrame;
                                myRectangle.x = newX;
                                if (myRectangle.x <= menuWebDesign.x) {
									//must have made it
	                                myRectangle.x = menuWebDesign.x;
	                                menuDir = "";
	                                curMenu = "";
	                                myRectangle.width = menuWebDesign.width;
								}
                            }
                        } else {
                            curMenu = "";
                        }
                        break;
                    case "menuSEO":
                        curMenuWidth = menuSEO.width;
                        if (myRectangle.x < menuSEO.x) {
                            if (menuDir == "down") {
                                //must have made it
                                myRectangle.x = menuSEO.x;
                                menuDir = "";
                                curMenu = "";
                                myRectangle.width = menuSEO.width;
                            } else if (menuDir == "") {
                                menuDir = "up";
                            } else {
                                var newX = currentX + linearDistEachFrame;
                                myRectangle.x = newX;
                                if (myRectangle.x >= menuSEO.x) {
									//must have made it
	                                myRectangle.x = menuSEO.x;
	                                menuDir = "";
	                                curMenu = "";
	                                myRectangle.width = menuSEO.width;
								}
                            }
                        } else if (myRectangle.x > menuSEO.x) {
                            if (menuDir == "up") {
                                //must have made it
                                myRectangle.x = menuSEO.x;
                                menuDir = "";
                                curMenu = "";
                                myRectangle.width = menuSEO.width;
                            } else if (menuDir == "") {
                                menuDir = "down";
                            } else {
                                var newX = currentX - linearDistEachFrame;
                                myRectangle.x = newX;
                                if (myRectangle.x <= menuSEO.x) {
									//must have made it
	                                myRectangle.x = menuSEO.x;
	                                menuDir = "";
	                                curMenu = "";
	                                myRectangle.width = menuSEO.width;
								}
                            }
                        } else {
                            curMenu = "";
                        }
                        break;
                    case "menuDomainsHosting":
                        curMenuWidth = menuDomainsHosting.width;
                        if (myRectangle.x < menuDomainsHosting.x) {
                            if (menuDir == "down") {
                                //must have made it
                                myRectangle.x = menuDomainsHosting.x;
                                menuDir = "";
                                curMenu = "";
                                myRectangle.width = menuDomainsHosting.width;
                            } else if (menuDir == "") {
                                menuDir = "up";
                            } else {
                                var newX = currentX + linearDistEachFrame;
                                myRectangle.x = newX;
                                if (myRectangle.x >= menuDomainsHosting.x) {
									//must have made it
	                                myRectangle.x = menuDomainsHosting.x;
	                                menuDir = "";
	                                curMenu = "";
	                                myRectangle.width = menuDomainsHosting.width;
								}
                            }
                        } else if (myRectangle.x > menuDomainsHosting.x) {
                            if (menuDir == "up") {
                                //must have made it
                                myRectangle.x = menuDomainsHosting.x;
                                menuDir = "";
                                curMenu = "";
                                myRectangle.width = menuDomainsHosting.width;
                            } else if (menuDir == "") {
                                menuDir = "down";
                            } else {
                                var newX = currentX - linearDistEachFrame;
                                myRectangle.x = newX;
                                if (myRectangle.x <= menuDomainsHosting.x) {
									//must have made it
	                                myRectangle.x = menuDomainsHosting.x;
	                                menuDir = "";
	                                curMenu = "";
	                                myRectangle.width = menuDomainsHosting.width;
								}
                            }
                        } else {
                            curMenu = "";
                        }
                        break;
                    case "menuCustomSoftware":
                        curMenuWidth = menuCustomSoftware.width;
                        if (myRectangle.x < menuCustomSoftware.x) {
                            if (menuDir == "down") {
                                //must have made it
                                myRectangle.x = menuCustomSoftware.x;
                                menuDir = "";
                                curMenu = "";
                                myRectangle.width = menuCustomSoftware.width;
                            } else if (menuDir == "") {
                                menuDir = "up";
                            } else {
                                var newX = currentX + linearDistEachFrame;
                                myRectangle.x = newX;
                                if (myRectangle.x >= menuCustomSoftware.x) {
									//must have made it
	                                myRectangle.x = menuCustomSoftware.x;
	                                menuDir = "";
	                                curMenu = "";
	                                myRectangle.width = menuCustomSoftware.width;
								}
                            }
                        } else if (myRectangle.x > menuCustomSoftware.x) {
                            if (menuDir == "up") {
                                //must have made it
                                myRectangle.x = menuCustomSoftware.x;
                                menuDir = "";
                                curMenu = "";
                                myRectangle.width = menuCustomSoftware.width;
                            } else if (menuDir == "") {
                                menuDir = "down";
                            } else {
                                var newX = currentX - linearDistEachFrame;
                                myRectangle.x = newX;
                                if (myRectangle.x <= menuCustomSoftware.x) {
									//must have made it
	                                myRectangle.x = menuCustomSoftware.x;
	                                menuDir = "";
	                                curMenu = "";
	                                myRectangle.width = menuCustomSoftware.width;
								}
                            }
                        } else {
                            curMenu = "";
                        }
                        break;
                    case "menuPortfolio":
                        curMenuWidth = menuPortfolio.width;
                        if (myRectangle.x < menuPortfolio.x) {
                            if (menuDir == "down") {
                                //must have made it
                                myRectangle.x = menuPortfolio.x;
                                menuDir = "";
                                curMenu = "";
                                myRectangle.width = menuPortfolio.width;
                            } else if (menuDir == "") {
                                menuDir = "up";
                            } else {
                                var newX = currentX + linearDistEachFrame;
                                myRectangle.x = newX;
                                if (myRectangle.x >= menuPortfolio.x) {
									//must have made it
	                                myRectangle.x = menuPortfolio.x;
	                                menuDir = "";
	                                curMenu = "";
	                                myRectangle.width = menuPortfolio.width;
								}
                            }
                        } else if (myRectangle.x > menuPortfolio.x) {
                            if (menuDir == "up") {
                                //must have made it
                                myRectangle.x = menuPortfolio.x;
                                menuDir = "";
                                curMenu = "";
                                myRectangle.width = menuPortfolio.width;
                            } else if (menuDir == "") {
                                menuDir = "down";
                            } else {
                                var newX = currentX - linearDistEachFrame;
                                myRectangle.x = newX;
                                if (myRectangle.x <= menuPortfolio.x) {
									//must have made it
	                                myRectangle.x = menuPortfolio.x;
	                                menuDir = "";
	                                curMenu = "";
	                                myRectangle.width = menuPortfolio.width;
								}
                            }
                        } else {
                            curMenu = "";
                        }
                        break;
                    case "menuContact":
                        curMenuWidth = menuContact.width;
                        if (myRectangle.x < menuContact.x) {
                            if (menuDir == "down") {
                                //must have made it
                                myRectangle.x = menuContact.x;
                                menuDir = "";
                                curMenu = "";
                                myRectangle.width = menuContact.width;
                            } else if (menuDir == "") {
                                menuDir = "up";
                            } else {
                                var newX = currentX + linearDistEachFrame;
                                myRectangle.x = newX;
                                if (myRectangle.x >= menuContact.x) {
									//must have made it
	                                myRectangle.x = menuContact.x;
	                                menuDir = "";
	                                curMenu = "";
	                                myRectangle.width = menuContact.width;
								}
                            }
                        } else if (myRectangle.x > menuContact.x) {
                            if (menuDir == "up") {
                                //must have made it
                                myRectangle.x = menuContact.x;
                                menuDir = "";
                                curMenu = "";
                                myRectangle.width = menuContact.width;
                            } else if (menuDir == "") {
                                menuDir = "down";
                            } else {
                                var newX = currentX - linearDistEachFrame;
                                myRectangle.x = newX;
                                if (myRectangle.x <= menuContact.x) {
									//must have made it
	                                myRectangle.x = menuContact.x;
	                                menuDir = "";
	                                curMenu = "";
	                                myRectangle.width = menuContact.width;
								}
                            }
                        } else {
                            curMenu = "";
                        }
                        break;
                    default:
                        break;
                }

                message = "newX: " + newX;
                updateMenuWidth();
            }

            function writeMessage() {
                var context = kin.getContext();
                context.font = "18pt Calibri";
                context.fillStyle = "black";
                context.fillText(message, 10, 125);
            }

            //if the link has been clicked, go to link
            function on_click(e) {     
                if (linkText != '') {
                    window.location = linkText;
                }
            }

            window.onload = function () {
                // instantiate new animation object
                kin = new Kinetic("navMenu", "2d");


                //setup menu elements
                myRectangle = new Rectangle(18, 43, 47, 6, 0);
                menuHome = new Rectangle(18, 20, 48, 30, 2);
                menuWebDesign = new Rectangle(92, 20, 103, 30, 2);
                menuSEO = new Rectangle(215, 20, 35, 30, 2);
                menuDomainsHosting = new Rectangle(275, 20, 167, 30, 2);
                menuCustomSoftware = new Rectangle(464, 20, 165, 30, 2);
                menuPortfolio = new Rectangle(645, 20, 92, 30, 2);
                menuContact = new Rectangle(755, 20, 105, 30, 2);

                // set drawStage method
                kin.setDrawStage(function () {
                    //updateStage();
                    updateMenu();

                    kin.clear();
                    var context = kin.getContext();


                    //menuHome
                    kin.beginRegion();
                    context.beginPath();
                    context.rect(menuHome.x, menuHome.y, menuHome.width, menuHome.height);
                    context.font = "12pt Arial";
                    if(startPos=="menuHome")
                    	context.fillStyle = "#800E10";
                    else
                    	context.fillStyle = "#000000";

                    context.fillText("HOME", menuHome.x, menuHome.y + textAdjustY);
                    kin.addRegionEventListener("onmousemove", function () {
                        if(curMenu != "menuHome"){
	                        curMenu = "menuHome"
	                        curMenuWidth = menuHome.width;
	                        document.body.style.cursor = "pointer";
	                        linkText = "index.html";
                        }
                    });
                    kin.addRegionEventListener("onmouseout", function () {
                        document.body.style.cursor = "";
                        linkText = "";
                    });
                    kin.closeRegion();

                    //menuWebDesign
                    kin.beginRegion();
                    context.beginPath();
                    context.rect(menuWebDesign.x, menuWebDesign.y, menuWebDesign.width, menuWebDesign.height);
                    context.font = "12pt Arial";
                    if(startPos=="menuWebDesign")
                    	context.fillStyle = "#800E10";
                    else
                    	context.fillStyle = "#000000";
                    context.fillText("WEB DESIGN", menuWebDesign.x, menuWebDesign.y + textAdjustY);
                    kin.addRegionEventListener("onmousemove", function () {
                    	if(curMenu != "menuWebDesign"){
	                        curMenu = "menuWebDesign";
	                        curMenuWidth = menuWebDesign.width;
	                        document.body.style.cursor = "pointer";
	                        linkText = "web-design.html";
                        }
                    });
                    kin.addRegionEventListener("onmouseout", function () {
                        document.body.style.cursor = "";
                        linkText = "";
                        menuDir = "";
                    });
                    kin.closeRegion();

                    //menuSEO
                    kin.beginRegion();
                    context.beginPath();
                    context.rect(menuSEO.x, menuSEO.y, menuSEO.width, menuSEO.height);
                    context.font = "12pt Arial";
                    if(startPos=="menuSEO")
                    	context.fillStyle = "#800E10";
                    else
                    	context.fillStyle = "#000000";

                    context.fillText("SEO", menuSEO.x, menuSEO.y + textAdjustY);
                    kin.addRegionEventListener("onmousemove", function () {
                    	if(curMenu != "menuSEO"){
	                        curMenu = "menuSEO"
	                        curMenuWidth = menuSEO.width;
	                        document.body.style.cursor = "pointer";
	                        linkText = "seo.html";
	                    }
                    });
                    kin.addRegionEventListener("onmouseout", function () {
                        document.body.style.cursor = "";
                        linkText = "";
                        menuDir = "";
                    });
                    kin.closeRegion();

                    //menuDomainsHosting
                    kin.beginRegion();
                    context.beginPath();
                    context.rect(menuDomainsHosting.x, menuDomainsHosting.y, menuDomainsHosting.width, menuDomainsHosting.height);
                    context.font = "12pt Arial";
                    if(startPos=="menuDomainsHosting")
                    	context.fillStyle = "#800E10";
                    else
                    	context.fillStyle = "#000000";
                    context.fillText("DOMAINS & HOSTING", menuDomainsHosting.x, menuDomainsHosting.y + textAdjustY);
                    kin.addRegionEventListener("onmousemove", function () {
                        if(curMenu != "menuDomainsHosting"){
	                        curMenu = "menuDomainsHosting"
	                        curMenuWidth = menuDomainsHosting.width;
	                        document.body.style.cursor = "pointer";
	                        linkText = "domains-hosting.html";
                        }
                    });
                    kin.addRegionEventListener("onmouseout", function () {
                        document.body.style.cursor = "";
                        linkText = "";
                        menuDir = "";
                    });
                    kin.closeRegion();

                    //menuCustomSoftware
                    kin.beginRegion();
                    context.beginPath();
                    context.rect(menuCustomSoftware.x, menuCustomSoftware.y, menuCustomSoftware.width, menuCustomSoftware.height);
                    context.font = "12pt Arial";
                    if(startPos=="menuCustomSoftware")
                    	context.fillStyle = "#800E10";
                    else
                    	context.fillStyle = "#000000";
                    context.fillText("CUSTOM SOFTWARE", menuCustomSoftware.x, menuCustomSoftware.y + textAdjustY);
                    kin.addRegionEventListener("onmousemove", function () {
                        if(curMenu != "menuCustomSoftware"){
	                        curMenu = "menuCustomSoftware"
	                        curMenuWidth = menuCustomSoftware.width;
	                        document.body.style.cursor = "pointer";
	                        linkText = "custom-software.html";
	                    }
                    });
                    kin.addRegionEventListener("onmouseout", function () {
                        document.body.style.cursor = "";
                        linkText = "";
                        menuDir = "";
                    });
                    kin.closeRegion();

                    //menuPortfolio
                    kin.beginRegion();
                    context.beginPath();
                    context.rect(menuPortfolio.x, menuPortfolio.y, menuPortfolio.width, menuPortfolio.height);
                    context.font = "12pt Arial";
                    if(startPos=="menuPortfolio")
                    	context.fillStyle = "#800E10";
                    else
                    	context.fillStyle = "#000000";
                    context.fillText("PORTFOLIO", menuPortfolio.x, menuPortfolio.y + textAdjustY);
                    kin.addRegionEventListener("onmousemove", function () {
                    	if(curMenu != "menuPortfolio"){
	                        curMenu = "menuPortfolio"
	                        curMenuWidth = menuPortfolio.width;
	                        document.body.style.cursor = "pointer";
	                        linkText = "portfolio.html";
	                    }
                    });
                    kin.addRegionEventListener("onmouseout", function () {
                        document.body.style.cursor = "";
                        linkText = "";
                        menuDir = "";
                    });
                    kin.closeRegion();

                    //menuContact
                    kin.beginRegion();
                    context.beginPath();
                    context.rect(menuContact.x, menuContact.y, menuContact.width, menuContact.height);
                    context.font = "12pt Arial";
                    if(startPos=="menuContact")
                    	context.fillStyle = "#800E10";
                    else
                    	context.fillStyle = "#000000";
                    context.fillText("CONTACT US", menuContact.x, menuContact.y + textAdjustY);
                    kin.addRegionEventListener("onmousemove", function () {
                    	if(curMenu != "menuContact"){
	                        curMenu = "menuContact";
	                        curMenuWidth = menuContact.width;
	                        document.body.style.cursor = "pointer";
	                        linkText = "contact.html";
	                    }
                    });
                    kin.addRegionEventListener("onmouseout", function () {
                        document.body.style.cursor = "";
                        linkText = "";
                        menuDir = "";
                    });
                    kin.closeRegion();


                    //menu selection
                    kin.beginRegion();
                    context.beginPath();
                    context.rect(myRectangle.x, myRectangle.y, myRectangle.width, myRectangle.height);
                    context.fillStyle = "#800E10";
                    context.fill();
                    //                    context.lineWidth = myRectangle.borderWidth;
                    //                    context.strokeStyle = "black";
                    //                    context.stroke();

                    kin.addRegionEventListener("onmousemove", function () {
                        var mousePos = kin.getMousePos();
                        var mouseX = mousePos.x - 50;
                        var mouseY = mousePos.y - 50;
                        message = "Triangle mouse Position: " + mouseX +
                        "," +
                        mouseY;
                    });
                    kin.closeRegion();

                    // display event
                    //writeMessage();

                });
				curMenu = startPos;
                kin.startAnimation();
            }