$(document).ready(function(){

    // スコープ設定
    jQuery.scope = function( target, func ) {
        return function() {
            func.apply(target,arguments);
        }
    };
    var clsViewer = new viewer;
    clsViewer.init();
});

var viewer = function() {

    // ペットデータ
    this.data = {};

    // ページカウント
    this.page = 1,

    // 最大ページ
    this.max = 6,

    // 1ページ当たりの表示数
    this.view = 6,

    // リスト取得メソッド
    this.getList = function() {
    },

    // ページ送りメソッド
    this.next = function() {
        if( this.page < this.max) {
            this.page++;
        }
    },

    // ページ戻しメソッド
    this.prev = function() {
        if( this.page > 1) {
            this.page--;
        }
    },

    // 相対パス
    this.rel_path = '';

    // 詳細ページ配列
    this.detail_info = [];

    this.init = function() {

        $.ajax({
            url: 'pet_list.html',
            complete: $.scope(this, this.handleComplete)
        });
    }

    this.handleComplete = function(request, status) {
        if( request.responseText ) {
            this.data = eval('('+request.responseText+')');
        }

        this.createView();
    }

    this.createView = function() {

        this.clear();

        var arrData = this.data;
        if( !arrData ) {
            return;
        }

        var elCreateViewDiv = $( '#new_pet_list' );
        if( arrData[ this.page ] ) {
            for( var n in arrData[ this.page ] ) {
                var arrDetail = arrData[ this.page ][n];
                if( ( (n+1) % 3 ) == 1 ) {
                    var elRowDiv = $('<div class="select_box clear_fix"></div>');
                }
                if( !( (n+1) % 3 ) ) {
                    var elDiv = $('<div class="pet_box_last">');
                } else {
                    var elDiv = $('<div class="pet_box">');
                }

                // 画像部分
                var elImageDiv = $('<div class="photo_select_box"></div>');
                var elA = $('<a></a>');
                elA.css('cursor', 'pointer');

                var strDetailUrl = './'+arrDetail['id']+'/pet/detail.html?pet='+arrDetail['pet_id'];
                var cldDetailLocation = new detailInfo;
                cldDetailLocation.setUrl( strDetailUrl );
                cldDetailLocation.setShopId( arrDetail['shop_id'] );

                elA.click(
                    $.scope(cldDetailLocation,cldDetailLocation.loactionHref)
                );

                var elImg = $('<img src="rel_path{$item.image_path1}" width="171" height="128" alt="{$item.name|escape}" />');
                var elImg = $('<img />');
                elImg.attr('src', this.rel_path+arrDetail['image_path1']);
                elImg.attr('width', '171');
                elImg.attr('height', '128');
                elImg.attr('alt', arrDetail['name']);

                elA.append( elImg );
                elImageDiv.append( elA );
                elDiv.append( elImageDiv );

                // 情報表示部
                var elDl = $( '<dl class="select clear_fix"></dl>' );
                var elDt = $( '<dt></dt>' );
                var elA = $('<a></a>');
                elA.css('cursor', 'pointer');
                elA.click(
                    $.scope(cldDetailLocation,cldDetailLocation.loactionHref)
                );
                elA.text( arrDetail['name'] );
                elDt.append( elA );
                elDl.append( elDt );

                var elDd = $( '<dd class="clear_fix"></dd>' );
                var elP = $( '<p class="sex"></p>' );
                var elA = $('<a></a>');
                elA.css('cursor', 'pointer');
                elA.click(
                    $.scope(cldDetailLocation,cldDetailLocation.loactionHref)
                );
                var sex = '';
                if( arrDetail['sex'] == '1' ) {
                    sex = '男の子';
                } else if( arrDetail['sex'] == '2' ) {
                    sex = '女の子';
                    elA.attr( 'class', 'female' );
                }

                elA.text( sex );
                elP.append( elA );
                elDd.append( elP );
                elDl.append( elDd );

                elDiv.append( elDl );

                var elP = $( '<p class="cursor"></p>' );
//                var elA = $('<a href="javascript:void(0);"></a>');
                var elA = $('<a></a>');
                elA.css('cursor', 'pointer');
                elA.click($.scope(cldDetailLocation,cldDetailLocation.loactionHref));
                var elImg = $( '<img src="common/images/cursor_r.gif" width="17" height="17" alt="次へ" />' );
                elA.append( elImg );
                elP.append( elA );
                elDd.append( elP );
                elDl.append( elDd );

                elDiv.append( elDl );

                elRowDiv.append( elDiv );
                elCreateViewDiv.append( elRowDiv );
            }

            // ページャー作成
//            this.pager();
            this.pager( arrData );

        } else {

            var elDiv = $( '<div class="select_box"></div>' );
            var elP = $( '<p></p>' ).text( 'ペット情報がありません。' );
            elDiv.append( elP );
            elCreateViewDiv.append( elDiv );
        }
    },

//    this.pager = function() {
    this.pager = function( arr ) {

        var elP = $('#pager_area');

        var pageLimit = this.max;

        // 左ボタン
        if( this.page > 1 ) {

//            var elLeftA = $('<a href="javascript:void(0);" class="font_ie">前</a>');
            var elLeftA = $('<a href="javascript:void(0);" class="clear" ></a>');
            elLeftA.click(
                $.scope(this, this.prevView)
            );
            var elImg = $('<img width="19" height="19" alt="前へ" class="next" />');
            elImg.attr( 'src', 'common/images/pager_l_off.gif');
            elImg.mouseover( function() {
                $(this).attr('src', 'common/images/pager_l_on.gif');
            });
            elImg.mouseout( function() {
                $(this).attr('src', 'common/images/pager_l_off.gif');
            });
            elLeftA.append( elImg );
            elP.append( elLeftA );
        } else {
            var elImg = $('<img width="19" height="19" alt="no page" class="next" />');
            elImg.attr( 'src', 'common/images/pager_l_gray.gif');
            elP.append( elImg );
        }

        // 数字ボタン
        for( var i=1; i<=this.max; ++i ) {
            // 存在しないページの数字ボタンを生成するのを阻止
            if( !arr[i] ) {
                pageLimit = i-1;
                break;
            }
            var elNumSpan = $( '<span class="base03"></span>' ).text(i);

            if( this.page != i ) {
                var elAroundSpan = $('<span class="base02"></span>');
                var elNumA = $('<a class="font"></a>');
                elNumA.css('cursor', 'pointer');
                elNumA.mouseover( function() {
                    $(this).css('color', '#FFF');
                    $(this).css('background-color', '#EB5E00');
                });
                elNumA.mouseout( function() {
                    $(this).css('color', '#EB5E00');
                    $(this).css('background-color', '#FFF');
                });

                var clsPagerInfo = new pagerInfo();
                clsPagerInfo.setNum(i);
                clsPagerInfo.setViewer(this);
                elNumA.click(
                    $.scope(clsPagerInfo, clsPagerInfo.execute)
                );

                elNumA.append(elNumSpan);
                elAroundSpan.append(elNumA);
                elP.append(elAroundSpan);
            } else {
                var elNonLinkSpan = $('<span class="base04"></span>');
                elNonLinkSpan.append( elNumSpan );
                elP.append( elNonLinkSpan );
            }
        }

        // 右ボタン
//        if( this.page < 6 ) {
        if( this.page < pageLimit ) {
//            var elRightA = $('<a href="javascript:void(0);" class="font_ie base02">次</a>');
            var elRightA = $('<a href="javascript:void(0);" class="clear base02"></a>');
            var elImg = $('<img width="19" height="19" alt="前へ" class="next" />');
            elImg.attr( 'src', 'common/images/pager_r_off.gif');
            elImg.mouseover( function() {
                $(this).attr('src', 'common/images/pager_r_on.gif');
            });
            elImg.mouseout( function() {
                $(this).attr('src', 'common/images/pager_r_off.gif');
            });
            elRightA.append( elImg );

            elRightA.click(
                $.scope(this, this.nextView)
            );
            elP.append( elRightA );
        } else {
            var elImg = $('<img width="19" height="19" alt="no page" class="next ml_5" />');
            elImg.attr( 'src', 'common/images/pager_r_gray.gif');
            elP.append( elImg );
        }
    },

    this.prevView = function() {

        this.prev();
        this.createView();
    },

    this.nextView = function() {

        this.next();
        this.createView();
    },

    this.clear = function() {
        var arrDiv = $('#new_pet_list > div');

        for(var i=0; i<arrDiv.length; ++i) {

            $(arrDiv[i]).remove();
        }

        var arrEl = $('#pager_area > *');
        for(var i=0; i<arrEl.length; ++i) {

            $(arrEl[i]).remove();
        }
    }

}

function detailInfo() {

    this.url = '',

    this.shop_id = '',

    this.loactionHref = function() {

        var strActionPath = this.getUrl();
        var nShopId = this.getShopId();

        var elForm = $('#pet_detail');
        elForm[0].action = strActionPath;
        $('#shop_id').val(nShopId);

        elForm[0].submit();

        return false;

    },

    this.setUrl = function( strUrl ) {
        this.url = strUrl;
    },

    this.getUrl = function() {
        return this.url;
    },

    this.setShopId = function( nShopId ) {
        this.shop_id = nShopId;
    },

    this.getShopId = function() {
        return this.shop_id;
    }
}

function pagerInfo() {

    this.num = 1,

    this.viewer = null;

    this.setViewer = function( objViewer ) {
        this.viewer = objViewer;
    },

    this.getViewer = function() {
        return this.viewer;
    },

    this.setNum = function( nNum ) {
        this.num = nNum;
    },

    this.getNum = function() {
        return this.num;
    },

    this.execute = function() {

        this.viewer.page = this.getNum();
        this.viewer.createView();
    }

}