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();
});