YUI().use('node', function(Y) {
  var display, index;
  var next, prev;
  var id = ["1", "2", "3"];
  var l = Y.all("iframe").size();
  var nifr = document.createElement("iframe");
  nifr.setAttribute("id", id[l]);
  next = function() {
    display = Y.all("iframe").getStyle("display");
    index = display.indexOf("inline");
    if (index + 1 < display.length) {
      Y.all("iframe").item(index + 1).setStyle("display", "inline").siblings("iframe").setStyle("display", "none");
    } else {
      Y.one("#popup").appendChild(nifr).siblings("iframe").setStyle("display", "none");
    }
    if (index + 2 === id.length) {
      Y.one(".next_button").setStyle("display", "none");
      Y.one(".finish_button").setStyle("display", "inline");
    } else {
      Y.one(".prev_button").setStyle("display", "inline");
    }
  };
  prev = function() {
    display = Y.all("iframe").getStyle("display");
    index = display.indexOf("inline");
    Y.all("iframe").item(index - 1).setStyle("display", "inline").siblings("iframe").setStyle("display", "none");
    Y.one(".next_button").setStyle("display", "inline");
    if (index - 1 === 0) {
      Y.one(".prev_button").setStyle("display", "none");
    } else {
      Y.one(".prev_button").setStyle("display", "inline");
      Y.one(".finish_button").setStyle("display", "none");
    }
  };
  next();
  next();
  prev();
});

YUI().use('json', 'node', function(Y) {
  //function
  var next, prev, data, offset, hasAllRendered, jsonString;
  //jsonstring
  offset = 1;
  hasAllRendered = false;
  jsonString = [{
    id: "0",
    url: "a.html",
    hasRendered: true
  }, {
    id: "1",
    url: "b.html",
    hasRendered: false
  }, {
    id: "2",
    url: "c.html",
    hasRendered: false
  }, {
    id: "3",
    url: "d.html",
    hasRendered: false
  }];

  //next
  next = function() {
    var id, new_iframe;
    id= jsonString[offset].id;
    Y.log(jsonString[offset - 1].hasRendered);
    Y.log("offset:" + offset);
    Y.log(id);
    if (jsonString[offset].hasRendered === true) {
      //next
      Y.all("iframe").item(offset).setStyle("display", "inline").siblings("iframe").setStyle("display", "none");
    } else {
      //create
      new_iframe = document.createElement("iframe");
      new_iframe.setAttribute("id", id);
      Y.one("#popup").appendChild(new_iframe).siblings("iframe").setStyle("display", "none");
    }
    //prev_button hide and show home
    if (offset === jsonString.length - 1) {
      Y.one(".next_button").setStyle("display", "none");
      Y.one(".finish_button").setStyle("display", "inline");
    } else {
      Y.one(".prev_button").setStyle("display", "inline");
    }
    jsonString[offset].hasRendered = true;
    //counter
    offset += 1;
    Y.log("offset_next:" + offset);
  };

  //prev
  prev = function() {
    Y.log(jsonString[offset - 1].hasRendered);
    Y.log("offset:" + offset);
    //prev
    Y.all("iframe").item(offset - 2).setStyle("display", "inline").siblings("iframe").setStyle("display", "none");
    //counter
    offset -= 1;
    Y.log("offset_prev:" + offset);
    //next_button show
    Y.one(".next_button").setStyle("display", "inline");
    if (offset === 1) {
      Y.one(".prev_button").setStyle("display", "none");
    } else {
      Y.one(".prev_button").setStyle("display", "inline");
      Y.one(".finish_button").setStyle("display", "none");
    }
  };

  next();
  next();
  prev();
});

(function () {

    var _log;

    _log = function (msg, type, module) {
        type = type || "info";
        module = module || "iframe-popup";
        if (typeof console !== "undefined") {
            console.log(msg);
        }
    }

    // Constructor
    function IframePopup(config) {

        var that = this,
            i,
            j;

        // Provide the default attribute values.
        that.offset = parseInt(config.offset, 10) || 0;
        that.width = parseInt(config.width, 10) || 500;
        that.height = parseInt(config.height, 10) || 500;
        that.urls = config.urls || null;

        // The urls attribute is required.
        if (!that.urls) {
            _log("The urls attribute is required.", "error");
            return;
        }

        // Private variables.
        that._activeEl = null; // The active showed iframe.
        that._data = []; // The data collection.
        that._el = null; // The module element.
        that._rendered = false; // Whether if the instance has rendered.

        // Get the data collection.
        for (i = 0, j = that.urls.length; i < j; i++) {
            that._data[i] = {
                "id": "iframe-" + i,
                "url": that.urls[i],
                "rendered": false
            };
        }
    }

    IframePopup.prototype = {
        render: function (rootEl) {
            _log("render() is executed.");
            var that = this,
                className,
                data = that._data[that.offset],
                el;

            if (that._rendered) {
                _log("You can only render once.", "error");
                return;
            }

            // Render the UI.
            el = document.createElement("div")
            if (that.offset === 0) {
                el.className = "iframe-popup iframe-popup-first";
            } else if (that.offset === that._data.length - 1) {
                el.className = "iframe-popup iframe-popup-last";
            }
            el.innerHTML = [
                '<div class="mod-content">',
                '   <div class="bd">',
                '       <iframe class="active" src="' + data.url + '" id="' + data.id + '"></iframe>',
                '   </div>',
                '   <div class="ft">',
                '       <a href="javascript:void(0);" id="prev-link">Previous Page</a>',
                '       <a href="javascript:void(0);" id="next-link">Next Page</a>',
                '   </div>',
                '</div>'
            ].join("");
            rootEl = rootEl || document.body;
            rootEl.appendChild(el);
            that._el = el;
            that._activeEl = rootEl.getElementsByTagName("iframe")[0];

            // Bind events.
            document.getElementById("prev-link").onclick = function () {
                that.prev.call(that);
            };
            document.getElementById("next-link").onclick = function () {
                that.next.call(that);
            }
        },
        move: function (isForward) {
            var that = this,
                activeEl, // Previous iframe element.
                bodyEl,   // .bd node.
                boxEl,    // Module.
                data,     // Next iframe data.
                nextEl,   // Next iframe element.
                offset;   // Next offset.

            activeEl = that._activeEl;
            boxEl = that._el;
            offset = (isForward) ? that.offset + 1 : that.offset - 1;
            data = that._data[offset];

            if (!data) {
                return false;
            }

            // Create iframe if it doesn't exist.
            if (!data.rendered) {
                nextEl = document.createElement("iframe");
                nextEl.src = data.url;
                nextEl.id = data.id;
                bodyEl = activeEl.parentNode;
                if (isForward) {
                    nextEl = bodyEl.appendChild(nextEl);
                } else {
                    nextEl = bodyEl.insertBefore(nextEl, activeEl);
                }
                data.rendered = true;
            } else {
                nextEl = document.getElementById(data.id);
            }

            // Exchange the 'active' class.
            activeEl.className = "";
            nextEl.className = "active";

            // Update outbox class.
            if (isForward && offset === that.urls.length - 1) {
                boxEl.className = "iframe-popup iframe-popup-last";
            } else if (!isForward && offset === 0) {
                boxEl.className = "iframe-popup iframe-popup-first";
            } else {
                boxEl.className = "iframe-popup";
            }

            that._activeEl = nextEl;
            that.offset = offset;

            return true;
        },
        next: function () {
            _log("next() is executed.");
            return this.move(true);
        },
        prev: function () {
            _log("prev() is executed.");
            return this.move(false);
        }
    };

    window.IframePopup = IframePopup;

}());

window.popup = new IframePopup({
    width: 500,
    offset: 0,
    urls: [
        "http://lab.josephj.com/2013/iframe-popup/content.php?step=1",
        "http://lab.josephj.com/2013/iframe-popup/content.php?step=2",
        "http://lab.josephj.com/2013/iframe-popup/content.php?step=3",
        "http://lab.josephj.com/2013/iframe-popup/content.php?step=4",
        "http://lab.josephj.com/2013/iframe-popup/content.php?step=5",
        "http://lab.josephj.com/2013/iframe-popup/content.php?step=6"
    ]
}).render();
window.popup.next();
window.popup.next();
window.popup.prev();
window.popup.destroy();