YUI().use('event', 'node', 'io', 'json', 'stylesheet', 'anim', function(Y) { /* add 'overlay' back */

    var contentObject = {}; //object that contains page and style content
    var oldPageId = null;

    Y.one("#issuesel").on("change", loadpage);
    Y.all(".partlink").on("mouseover", handleOverlay); 
    Y.all(".partlink").on("mouseout", handleOverlay, null, 1);

    function loadpage(e) {
        var uri = "http://www.partpal.com/partpal-in-print/change"; //sets the uri to submit the ajax request to to change issues
        var target = (e.target.item(e.target.get("selectedIndex"))).get("value"); //gets the value of the submit

        if (contentObject.hasOwnProperty(target)) { //if the content object contains the issue information already
            changecontent(target);
        } else { // if the content object does not conain the issue information already
            Y.io(uri + "/" + target, {"on": {
                                          "start": onstart,
                                          "success": loadcontent,
                                          "end": onend
                                         },
                                    "context": this,
                                    "arguments": {
                                        "target": target
                                                }
                                  });
        }
    } // end of loadpage()

    function onstart() {
        var loadercss = "#ppipnav #pageloader { visibility: visible; }";
        sheet = new Y.StyleSheet(loadercss);
    }

    function loadcontent(id, o, arg) {
            try {
                Y.log(o);
                var jdata = Y.JSON.parse(o.responseText);
                var page = jdata["page"];

                var htdata = jdata["htdata"];
                var target = arg["target"];

                 contentObject[target] = ({target:target, page:page, content:htdata});

                 changecontent(target);
            } catch (e) {
         /*       console.log(e); */
                alert("Sorry there has been an error");
                onend();
            }
    } //end of loadcontent()

    function changecontent(target) {
        if (pgv) {
            Y.one('#css' + pgv).remove();
            pgv = null;
        } else {
            Y.one(oldPageId).remove();
        }
      /*  oldPageId = '#css' + contentObject[target]['page'];  */
        Y.one('#content').set('innerHTML', contentObject[target].content); //change the content of the page with what is stored in the object
      /*  Y.one('head').appendChild(Y.Node.create('<link rel="stylesheet" id="css' + contentObject[target]['page'] + '" type="text/css" href="css/ppip/' + contentObject[target]['page'] + '.css" />')); */
        var addcss = Y.Get.css("http://www.partpal.com/css/ppip/" + contentObject[target]['page'] + ".css", {
            onSuccess: function(e) {
                oldPageId = "#" + e.nodes[0].id;
            }
        }); 
    }

    function onend() {
        var loadercss = "#ppipnav #pageloader { visibility: hidden; }";
        sheet = new Y.StyleSheet(loadercss);
    }

    function handleOverlay(node, mouseout) {
        if (mouseout != 1) {
            t = overlayTimer(node).start();
        } else if (mouseout == 1) {
            t.cancel();
        }
    }

    function showOverlay(node) {
        var url = "partpal-in-print/loadoverlay";
        Y.io(url + "/" + node.target._node.id, {"on": {
                               "start": overlayLoader(node).show(),
                               /* "success": overlayLoader(node).hide(), */
                               "end": overlayLoader(node).hide()
                              }
                       });
 /*       var overlay = new Y.Overlay({
            headerContent: "My Overlay Header",
            bodyContent: "My Overlay Body",
            footerContent: "My Footer Content",
            x: node.pageX,
            y: node.pageY,
            zIndex: 100
        }); */
/* Y.log(node);
        overlay.render(); */
    }

    function overlayTimer(node) {
        var n = node;
        return {
            start: function() {
                var ti = Y.later(500, this, showOverlay, n);
                return ti;
            },
            
            stop: function(t) {
                t.cancel();
            }
            
        }
    }

    /*
     * handles the display and removal of the loader in relation to the
     * mouseover event to display the overlay.
     */

    function overlayLoader(node) {
        

        return {
            show: function() {
            var body = '<img src="img/ppip/layout/ajaxspinner.gif" />'

            loader = new Y.Overlay({
                bodyContent: body,
                x: node.pageX + 10,
                y: node.pageY - 30,
                zIndex: 100
            });

            loader.render();
            },
            hide: function() {
                Y.log(node);
              loader.hide();
            }
        }
    }

}); //end of YUI()