Pockie Pirates Crew Compose

by path411

HTML

<div id="Lists"></div>

CSS

html, body {
    background-color:#fafafa;
    color:#333333;
}
.quality {
    width:65px;
    text-align:center;
    padding:2px 1px;
}

a {
    display:block;
}

a:hover {
    background-color:#cccccc;
    cursor:pointer;
}

.quality-Yellow {
    background-color:Yellow;
}
.quality-Yellow + .crew-cards {
    background-color:rgba(255, 255, 0, 0.3);
}
.quality-Purple {
    background-color:Purple;
    color:white;
}
.quality-Purple + .crew-cards {
    background-color:rgba(128, 0, 128, 0.3);
}
.quality-Orange {
    background-color:Orange;
}
.quality-Orange + .crew-cards {
    background-color:rgba(255, 165, 0, 0.3);
}
.quality-Red {
    background-color:Red;
    color:white;
}
.quality-Red + .crew-cards {
    background-color:rgba(240, 137, 137, 0.3);
}

.crew-cards {
    display:none;
    overflow:hidden;
    border-left:2px solid #ffffff;
    xbackground-color:rgba(0,0,0,0.1);
}

.open,
.open * {
    display:block;
}

.card {
    float:left;
    clear:both;
    font-size:10px;
}
.card-name {
    cursor:pointer;
}

.card-name:after {
    content: " " attr(data-open);
}

.hovercard {
    position:absolute;
}

.listview-header {
    font-weight:bold;
    text-decoration:underline;
}

JavaScript

(function() {

    function Main() {
        CreateLists();
        BindEvents();
    }
    
    function BindEvents() {
        var $hovercard = null;
        var hovercrew = null;
        
        var mousemovehandler = null;
        
        $('#Lists')
        .on('click', '.card', OnCrewClick)
        .on('mouseover', '.card', function(e) {
            //hover in
            e.stopPropagation();
            var $this = $(this);
            
            var crew = CREW_DATA
            .filter(function(c) { return c.Name == $this.attr('data-cardname'); })[0];
            if(crew != hovercrew) {
                hovercrew = crew;
                if($hovercard == null) {
                    $hovercard = CreateCard(hovercrew);
                    $('body').append($hovercard);
                    $hovercard.addClass('hovercard')
                }
                else {
                    $hovercard.show();
                    $hovercard.html(CreateCard(hovercrew).html());
                }
                
                $hovercard.css({ left: e.pageX - 80, top: e.pageY + 5 });
            }
        })
        .on('mousemove', function(e) {
            e.stopPropagation();
            if($hovercard != null) {
                $hovercard.hide();
            }            
           
        })
        .on('mousemove', '.card', function(e) {
             e.stopPropagation();
            if($hovercard != null) {
                $hovercard.css({ left: e.pageX - 80, top: e.pageY + 5 });
            }
        })
        .on('click', 'a.breakdown', function() {
            $(this).next().toggleClass('open');
        })
        .on('click', 'a.breakup', function() {
            $(this).next().toggleClass('open');
        })
        .on('click', 'a.listview', function() {
            $(this).next().toggleClass('open');
        })
        .on('click', '.card-name', function() {
            $(this).attr('data-open', function() {
                return...