(function() {
var $ = function(id) { return document.getElementById(id); };
var $C = function(tag) { return document.createElement(tag); };
var setFloat = function(elem, style) {
    if (elem.style.styleFloat) {
        elem.style.styleFloat = style;
    }
    else {
        elem.style.cssFloat = style;
    }
}
var setStyle = function(elem, styles) {
  var elem_style = elem.style;
  for (var property in styles) {
      if (property == "float") {
          setFloat(elem, styles[property]);
      }
      else {
          elem_style[property] = styles[property];
      }
  }
};

// config
var direction_button = { width: 72, height: 28 };
var label_button = { width: 36, height: 28 };
var koma_size = { width: 178, height: 178 };

var Plugin = {
    index: 0,
    jump_url: 'http://4koma.livedoor.com/y1/?utm_source=4koma&utm_medium=plugin&utm_campaign=y1',
    koma_img: [
        "http://image.4koma.livedoor.com/image/grandprix/n/na/nalask/131/178/000.jpg",
        "http://image.4koma.livedoor.com/image/grandprix/n/na/nalask/131/178/001.jpg",
        "http://image.4koma.livedoor.com/image/grandprix/n/na/nalask/131/178/002.jpg",
        "http://image.4koma.livedoor.com/image/grandprix/n/na/nalask/131/178/003.jpg",
        "http://image.4koma.livedoor.com/image/grandprix/n/na/nalask/131/178/004.jpg",
        "http://image.blog.4koma.livedoor.com/image/work/ad/ad00089.jpg"
    ],
    label_img: [
        "http://image.blog.4koma.livedoor.com/image/plugin/180/num_00.gif",
        "http://image.blog.4koma.livedoor.com/image/plugin/180/num_01.gif",
        "http://image.blog.4koma.livedoor.com/image/plugin/180/num_02.gif",
        "http://image.blog.4koma.livedoor.com/image/plugin/180/num_03.gif",
        "http://image.blog.4koma.livedoor.com/image/plugin/180/num_04.gif",
        "http://image.blog.4koma.livedoor.com/image/plugin/180/num_05.gif"
    ],
    next_button_img: {
        normal: "http://image.blog.4koma.livedoor.com/image/plugin/180/btn_next_normal.gif",
        on: "http://image.blog.4koma.livedoor.com/image/plugin/180/btn_next_on.gif",
        off: "http://image.blog.4koma.livedoor.com/image/plugin/180/btn_next_off.gif"
    },
    back_button_img: {
        normal: "http://image.blog.4koma.livedoor.com/image/plugin/180/btn_back_normal.gif",
        on: "http://image.blog.4koma.livedoor.com/image/plugin/180/btn_back_on.gif",
        off: "http://image.blog.4koma.livedoor.com/image/plugin/180/btn_back_off.gif"
    },
    init: function() {
        var koma = Plugin.koma_img;
        for (var i=0,len=koma.length; i<len; i++) {
            var dummy = new Image();
            dummy.src = koma[i];
        }
        var label = Plugin.label_img;
        for (var i=0,len=label.length; i<len; i++) {
            var dummy = new Image();
            dummy.src = label[i];
        }
        var next_button = Plugin.next_button_img;
        for (var i in next_button) {
            var dummy = new Image();
            dummy.src = next_button[i];
        }
        var back_button = Plugin.back_button_img;
        for (var i in back_button) {
            var dummy = new Image();
            dummy.src = back_button[i];
        }
    },
    next: function() {
        switch (Plugin.index) {
            case 0: Plugin.enablePrevButton(); break;
            case 4: Plugin.disableNextButton(); break;
            case 5: Plugin.jump(); return;
        }
        var index = ++Plugin.index;
        Plugin.label.src = Plugin.label_img[index];
        Plugin.koma.src = Plugin.koma_img[index];
    },
    prev: function() {
        switch (Plugin.index) {
            case 0: return;
            case 1: Plugin.disablePrevButton(); break;
            case 5: Plugin.enableNextButton(); break;
        }
        var index = --Plugin.index;
        Plugin.label.src = Plugin.label_img[index];
        Plugin.koma.src = Plugin.koma_img[index];
    },
    jump: function() {
        location.href = Plugin.jump_url;
    },
    enableNextButton: function() {
        var nb = Plugin.next_button;
        nb.src = Plugin.next_button_img.normal;
        nb.width = direction_button.width;
        nb.style.cursor = "pointer";
        nb.onclick = Plugin.next;
        nb.onmouseover = function(){
            nb.src = Plugin.next_button_img.on;
            nb.width = direction_button.width;
        };
        nb.onmouseout = function(){
            nb.src = Plugin.next_button_img.normal;
            nb.width = direction_button.width;
        };
    },
    disableNextButton: function() {
        var nb = Plugin.next_button;
        nb.src = Plugin.next_button_img.off;
        nb.width = direction_button.width;
        nb.style.cursor = "default";
        nb.onmouseover = nb.onmouseout = null;
    },
    enablePrevButton: function() {
        var pb = Plugin.prev_button;
        pb.src = Plugin.back_button_img.normal;
        pb.width = direction_button.width;
        pb.style.cursor = "pointer";
        pb.onclick = Plugin.prev;
        pb.onmouseover = function(){
            pb.src = Plugin.back_button_img.on;
            pb.width = direction_button.width;
        };
        Plugin.prev_button.onmouseout = function(){
            Plugin.prev_button.src = Plugin.back_button_img.normal;
            Plugin.prev_button.width = direction_button.width;
        };
    },
    disablePrevButton: function() {
        var pb = Plugin.prev_button;
        pb.src = Plugin.back_button_img.off;
        pb.width = direction_button.width;
        pb.style.cursor = "default";
        pb.onmouseover = pb.onmouseout = null;
    }
};

Plugin.init();

// koma
var koma = $C('div');
setStyle(koma, {
    margin: "0 0 1px 0",
    width: koma_size.width + 'px',
    height: koma_size.height + 'px',
    border: "1px solid #000"
});
var koma_img = Plugin.koma = $C("img");
koma_img.src = "http://image.4koma.livedoor.com/image/grandprix/n/na/nalask/131/178/000.jpg";
koma_img.width = koma_size.width;
koma_img.height = koma_size.height;
koma_img.style.cursor = "pointer";
koma_img.onclick = Plugin.next;
koma.appendChild(koma_img);

// prev button
var prev_button = Plugin.prev_button = $C("img");
prev_button.width = direction_button.width;
prev_button.height = direction_button.height;
Plugin.disablePrevButton();

// next button
var next_button = Plugin.next_button = $C("img");
next_button.width = direction_button.width;
next_button.height = direction_button.height;
Plugin.enableNextButton();

// label
var label = Plugin.label = $C("img");
label.src = Plugin.label_img[0];
label.width = label_button.width;
label.height = label_button.height;

// wrap in div
var buttons = $C("div");
buttons.style.margin = '0';
buttons.style.padding = '0';
buttons.appendChild(prev_button);
buttons.appendChild(label);
buttons.appendChild(next_button);

// drawing
var plugin_id = "y1_plugin_nalask_131";
document.write('<div id="' + plugin_id + '" style="text-align:center;width:180px;"></div>');
document.write('<div style="clear:both;"></div>');
document.close();

var plugin_area = $(plugin_id);
plugin_area.appendChild(koma);
plugin_area.appendChild(buttons);

})();