class Card{
    
    constructor(id, src){
        this.id = id;
        this.src = src;
        this.revealed = true;
        this.createDomElement();
    }
    
    static SortDomElements(){
        function byIndex(a, b){
            return $(a).data("index") - $(b).data("index");
        }
        for (let c of cards){
            $(c.dom).data("index", cards.indexOf(c));
        }
        let list = $("#table img").get();
        list.sort(byIndex);
        $("#table").append(list);
    }
    
    static getById(id){
        for (let c of cards){
            if (c.id === id) return c;
        }
    }
    
    static hideTime(){
        return 300;
    }
    
    reveal(){
        if (this.revealed) return;
        let card = this;
        this.dom.delay(Card.hideTime() / 2).queue(function(next){
            $(this).attr("src", card.src);
            next();
        });
        this.dom.css("transform", "rotateY(0deg)");
        this.revealed = true;
    }
    
    hide(){
        if (!this.revealed) return;
        this.dom.delay(Card.hideTime() / 2).queue(function(next){
            $(this).attr("src", hidden);
            next();
        });
        this.dom.css("transform", "rotateY(180deg)");
        this.revealed = false;
    }
    
    savePosition(){
        let x = this.dom.position().left;
        let y = this.dom.position().top;
        this.dom.css({
            "left": x,
            "top": y
        });
        this.pos = {left: x, top: y};
    }
    
    moveToPosition(type, staple){
        let card = this;
        this.dom.css("position", "absolute");
        this.moving = true;
        this.dom.animate({
            left: this.pos.left,
            top: this.pos.top
        }, 750, function(){
            card.moving = false;
            if (type === "collect") {
                card.appendToStaple(staple);
            }
            for (let c of cards) if (c.moving) return;
            if (type === "collect"){

            } else {
                for (let c of cards) c.dom.css("position", "static");
                Card.SortDomElements();
                game.shuffled = true;
            }
        });
    }
    
    appendToStaple(staple){
        this.dom.remove();
        this.dom.css({
            "position": "",
            "top": "",
            "left": ""
        });
        this.dom.attr("class", "card card_on_staple");
        staple.append(this.dom);
    }
    
    createDomElement(){
        this.dom = $("<img></img>");
        this.dom.data("card", this);
        this.dom.attr({
            "class": "card_on_table card",
            "id": this.id,
            "src": this.revealed ? this.src : hidden
        });
        this.dom.click(() => cardClicked(this));
        let card = this;
        this.dom.hover(() => card.debugShow(), () => card.debugHide());
        $("#table").append(this.dom);
    }
    
    equals(other){
        return this.src === other.src;
    }
    
    debugShow(){
        if (this.revealed || !debug) return;
        this.dom.attr("src", this.src);
    }
    
    debugHide(){
        if (this.revealed || !debug) return;
        this.dom.attr("src", hidden);
    }
    
}