(function(){

    var CheckArticle = function(){
        this.init.apply(this, arguments);
    };

    CheckArticle.prototype = {

        //記事部分を格納する配列
        targetArticleLists : [],

        //記事のユーザー画像を格納する配列
        articleImgLists : [],

        init : function(){
            this.getClass();
        },

        //記事部分を抽出しあったら配列targetArticleListsに格納しcheckImgメソッドの実行
        getClass:function(){
            var targetLists = [];
            if (document.getElementsByClassName) {
                this.targetArticleLists = document.getElementsByClassName("skinMainArea");
            }else{
                this.targetArticleLists = elementsByClassName("skinMainArea", "body");
            }
            if (this.targetArticleLists.length != 0) {
                this.checkImg();
            }
        },

        //記事の中から画像を抽出し、その中でもユーザー画像を抽出しあったら配列articleImgListsに格納しImageNaviとDarkFrameのクラスを実行
        checkImg: function(){
            var imgLists = [];
            for(var i=0,len=this.targetArticleLists.length;i<len;i++){
                imgLists = this.targetArticleLists[i].getElementsByTagName("img");
                for(var j=0,jlen=imgLists.length;j<jlen;j++){
                    if (imgLists[j].getAttribute("src").split("/")[3] == "user_images") {
                        if (imgLists[j].parentNode.className == "detailOn") {
                            this.articleImgLists.push(imgLists[j]);
                        }
                    }
                }
            }
            if(this.articleImgLists.length!=0){
                var imagenavi = new ImageNavi(this.articleImgLists);
            }
        }
    };


    //ナビを表示するクラス。imglistsプロパティに対象画像の配列を格納
    var ImageNavi = function(articleImgLists){
        this.imglists = articleImgLists;
        this.init.apply(this, arguments);
    };

    ImageNavi.prototype = {

        //ナビ画像をappend済みかどうかのフラグ
        naviFlag : true,

        //ナビを格納するプロパティ
        naviObj : {},

        //ナビの表示位置をプロパティにせって
        naviXOffset : 27,
        naviYOffset : 40,

        init : function(){
            this.bindCheckNaviHandler();
        },

        //ユーザー画像の分だけ、mouseoverにメソッドをバインドし、直後にアンバインド。
        bindCheckNaviHandler : function(){
            var self = this;
            for(var i=0,len=this.imglists.length;i<len;i++){
                var articleImg = this.imglists[i];

                if (articleImg.addEventListener) {
                    articleImg.addEventListener("mouseover",function(){
                        self.checkNaviObj();
                        this.removeEventListener("mouseover",arguments.callee,false);
                    },false);
                }else{
                    if (articleImg.attachEvent) {
                        articleImg.attachEvent("onmouseover",function(){
                            self.checkNaviObj();
                            this.detachEvent("onmouseover",arguments.callee);
                        });
                    }
                }
            }
        },

        //ユーザー画像にmouseover時に実行。ナビ画像をまだappendしていない場合は設置。showNaviメソッドの実行。フラグnaviFlagを変更
        checkNaviObj : function(){
            if(this.naviFlag){
                this.setNaviObj();
            }
            this.naviFlag = false;
        },

        //ナビ画像をbodyの最後にappendしnaviObjオブジェクトに格納。２つのメソッド実行。
        setNaviObj: function(){
            var imglink_div = document.createElement("div");
            imglink_div.id = "naviLink";
            imglink_div.innerHTML = "<img src='http://stat100.ameba.jp/blog/img/user/expansion.png' />";
            var imglink_body = document.body;
            imglink_body.appendChild(imglink_div);
            this.naviObj = imglink_div;
            this.setNaviStyle(this.naviObj);
            this.bindNaviHandler();
        },

        //ナビのスタイル調整メソッド
        setNaviStyle : function(el){
            el.style.display = "block";
            el.style.position = "absolute";
        },

        //画像に対してmouseover,mouseout,mousemoveにメソッドをバインド
        bindNaviHandler : function(){
            var self = this;
            for(var i=0,len=this.imglists.length;i<len;i++){
                var articleImg = this.imglists[i];
                if (articleImg.addEventListener) {
                    articleImg.addEventListener("mouseover", function(){
                        self.showNaviObj()
                    },false);
                    articleImg.addEventListener("mouseout", function(){
                        self.hideNaviObj()
                    },false);
                    articleImg.addEventListener("mousemove", function(e){
                        self.moveNaviObj(e)
                    },false);
                }else{
                    if (articleImg.attachEvent) {
                        articleImg.attachEvent("onmouseover", function(){
                            self.showNaviObj()
                        });
                        articleImg.attachEvent("onmouseout", function(){
                            self.hideNaviObj()
                        });
                        articleImg.attachEvent("onmousemove", function(e){
                            self.moveNaviObj(e)
                        });
                    }
                }
            }
        },

        //ユーザー画像にmouseover時に実行。ナビ画像の表示。
        showNaviObj : function (){
            this.naviObj.style.display = "block";
        },

        //ユーザー画像からmouseout時に実行。ナビ画像の非表示。
        hideNaviObj : function naviOut(){
            this.naviObj.style.display = "none";
        },

        //ユーザー画像でmousemove時に実行。マウスの近くにナビの位置調整。
        moveNaviObj: function(e){
            if(!e){
                e = window.event;
            }
            var naviobj = this.naviObj;
            // Mozilla, NN4, Safari
            if (e.pageY) {
                naviobj.style.top = e.pageY - this.naviYOffset + "px";
                naviobj.style.left = e.pageX - this.naviXOffset + "px";
            }else {
                if (e.clientY) {
                    naviobj.style.top = e.clientY + (document.body.scrollTop || document.documentElement.scrollTop) - this.naviYOffset + "px";
                    naviobj.style.left = e.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft) - this.naviXOffset + "px";
                }
            }
        }
    };



    var checkarticle = new CheckArticle();

    //getElementsByClassNameが使えない場合に利用する関数
    function elementsByClassName(className, tag, root){
        tag = tag || '*';
        if (root) {
            root = getElements(root);
        }
        else {
            root = document;
        }
        var nodes = [], item;
        try { // XPathをサポートしているならこれを使う
            var xp = root.evaluate('.//' + '*' + '[contains(concat(" ", @class, " "), " ' + className + ' ")]', root, null, XPathResult.ANY_TYPE, null);
            for (item = xp.iterateNext(); item; item = xp.iterateNext()) {
                nodes.push(item);
            }
        } 
        catch (e) { // そうでなければ地道にDOM解析
            var cls, items = root.getElementsByTagName('*');
            for (var i = 0, l = items.length; i < l; i++) {
                item = items[i];
                if (item.className) {
                    cls = item.className.split(/¥s+/);
                    for (var j = 0, k = cls.length; j < k; j++) {
                        if (cls[j] == className) {
                            nodes[nodes.length] = item;
                            break;
                        }
                    }
                }
            }
        }
        return nodes.length > 0 ? nodes : null;
    }


    function getElements(el){
        if (el && (el.nodeType || el.item)) { // Node, or NodeList
            return el;
        }
        if (langIsString(el) || !el) { // id or null
            return document.getElementById(el);
        }
        if (el.length !== undefined) { // array-like 
            var c = [];
            for (var i = 0, len = el.length; i < len; ++i) {
                c[c.length] = getElements(el[i]);
            }
            return c;
        }
        return el; // some other object, just pass it back
    }

    function langIsString(lang){
        return typeof lang === 'string';
    }

})();