﻿{
    id: "jssort101",
    type: "thumbnail",
    name: "thumbnail skin 101",
    note: "<!-- Note: v:0 = id; v:1 = itemWidth; v:2 = itemHeight; v:3 = borderWidth -->",
    css: ''
        + '\r\n.jssort101 .p {position: absolute;top:0;left:0;box-sizing:border-box;background:#000;}'
        + '\r\n.jssort101 .p .cv {position:relative;top:0;left:0;width:100%;height:100%;border:2px solid #000;box-sizing:border-box;z-index:1;}'
        + '\r\n.jssort101 .a {fill:none;stroke:#fff;stroke-width:400;stroke-miterlimit:10;visibility:hidden;}'
        + '\r\n.jssort101 .p:hover .cv, .jssort101 .p.pdn .cv {border:none;border-color:transparent;}'
        + '\r\n.jssort101 .p:hover{padding:2px;}'
        + '\r\n.jssort101 .p:hover .cv {background-color:rgba(0,0,0,6);opacity:.35;}'
        + '\r\n.jssort101 .p:hover.pdn{padding:0;}'
        + '\r\n.jssort101 .p:hover.pdn .cv {border:2px solid #fff;background:none;opacity:.35;}'
        + '\r\n.jssort101 .pav .cv {border-color:#fff;opacity:.35;}'
        + '\r\n.jssort101 .pav .a, .jssort101 .p:hover .a {visibility:visible;}'
        + '\r\n.jssort101 .t {position:absolute;top:0;left:0;width:100%;height:100%;border:none;opacity:.6;}'
        + '\r\n.jssort101 .pav .t, .jssort101 .p:hover .t{opacity:1;}',
    html: ''
        + '\r\n<div data-u="thumbnavigator" class="jssort101" style="position:absolute;left:0px;bottom:0px;">'
        + '\r\n    <div data-u="slides">'
        + '\r\n        <div data-u="prototype" class="p" style="width:{{v:1}}px;height:{{v:2}}px;">'
        + '\r\n            <div data-u="thumbnailtemplate" class="t"></div>'
        + '\r\n            <svg viewBox="0 0 16000 16000" class="cv">'
        + '\r\n                <circle class="a" cx="8000" cy="8000" r="3238.1"/>'
        + '\r\n                <line class="a" x1="6190.5" y1="8000" x2="9809.5" y2="8000"/>'
        + '\r\n                <line class="a" x1="8000" y1="9809.5" x2="8000" y2="6190.5"/>'
        + '\r\n            </svg>'
        + '\r\n        </div>'
        + '\r\n    </div>'
        + '\r\n</div>',
    itemHtml: ''
        + '\r\n<img data-u="thumb" data-tsize="{w:{{v:1}},h:{{v:2}}}" src="{{i:0}}" />'
        + '\r\n',
    defaultValue: {
        itemWidth: 190,
        itemHeight: 84,
        itemSpacingX: 5,
        itemSpacingY: 5,
        cntrBgColor: "#000",
        cntrHeight: 100,
        cntrAutoCenter: 1,
        bhvScalePos: .75
    }
}