IlyaPavlik/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Косынка</title>
<link rel="stylesheet" type="text/css" href="style.css">
	<script type="text/javascript" src="jquery-2.1.1.js"></script>
</head>
	<body>
		<input type="submit" id="button" onclick="startGame()" value="Начать игру!">
		<div id="deck">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>

		<div id="playCard"></div>
		<div id="next" style="display: none" >></div>
	</body>
<script type="text/javascript" src="solitaire.js"></script>
</html>

## solitaire.js
var cardObject;
var targetObject;
var lastIndex;

function DragObject(element, number, typeNumber) {
    element.dragObject = this;

    dragMaster.makeDraggable(element);

    var rememberPosition;
    var mouseOffset;
    var type = typeNumber;
    this.number = number;

    number+=2;

    switch (typeNumber){
        case 0: type = 'пики'; break;
        case 1: type = 'трефы'; break;
        case 2: type = 'червы'; break;
        case 3: type = 'бубны'; break;
        default : break;
    }

    this.onDragStart = function(offset) {
        var s = element.style;
        rememberPosition = {top: s.top, left: s.left, position: s.position};
        s.position = 'absolute';

        mouseOffset = offset
    };

    this.hide = function() {
        element.style.display = 'none'
    };

    this.show = function() {
        element.style.display = ''
    };

    this.onDragMove = function(x, y) {
        element.style.top =  y - mouseOffset.y +'px';
        element.style.left = x - mouseOffset.x +'px';
    };

    this.onDragSuccess = function(dropTarget) { };

    this.onDragFail = function() {
        var s = element.style;
        s.top = rememberPosition.top;
        s.left = rememberPosition.left;
        s.position = rememberPosition.position
    };

    this.onNewPosition = function(x, y) {
        element.style.top =  y +'px';
        element.style.left = x +'px';
    };

    this.toString = function() {
        var strNumber = this.number;
        strNumber += 2;
        switch (strNumber){
            case 11: strNumber = 'В'; break;
            case 12: strNumber = 'Д'; break;
            case 13: strNumber = 'К'; break;
            case 14: strNumber = 'Т'; break;
            default : break;
        }

        return type + ":" + strNumber;
    };

    this.getNumber = function() {
        return Number(number);
    };

    this.getType = function() {
        return Number(typeNumber);
    };

    this.getElement = function() {
        return element;
    };

    this.getDisplay = function() {
        return element.style.display;
    };
}

function DropTarget(element) {

    element.dropTarget = this;
    this.currentType = '';
    this.currentNumber = '';

    this.canAccept = function(dragObject) {
        return true
    };

    this.accept = function(dragObject) {
        this.onLeave();

        if(element.innerHTML != "") {
            if(this.currentType == dragObject.getType()){
                if(this.currentNumber - 1 != dragObject.getNumber()){
                    dragObject.onDragFail();
                    return;
                }
            } else {
                dragObject.onDragFail();
                return;
            }
            this.addCard(dragObject);
        }

        if (dragObject.getNumber() == 14){
            this.addCard(dragObject);
        } else {
            dragObject.onDragFail();
            return false;
        }
    };

    this.addCard = function(dragObject) {
        dragObject.hide();
        element.innerHTML = dragObject.toString();
        this.currentNumber = dragObject.getNumber();
        this.currentType = dragObject.getType();
        dragObject.onNewPosition(getOffsetSum(element).left - 10, getOffsetSum(element).top - 10);

        saveCardsState();
        saveFieldState();

        if(checkFinalGame()){
            if(confirm("Вы выграли!! Начать сначала?")){
                startGame();
            }
        }
    };

    this.onLeave = function() {
        element.className =  ''
    };

    this.onEnter = function() {
        element.className = 'uponMe'
    };

    this.toString = function() {
        var strNumber = this.currentNumber;
        switch (this.currentNumber){
            case 11: strNumber = 'В'; break;
            case 12: strNumber = 'Д'; break;
            case 13: strNumber = 'К'; break;
            case 14: strNumber = 'Т'; break;
            default : break;
        }
        var typeNumber = this.currentType;
        switch (typeNumber){
            case 0: typeNumber = 'пики'; break;
            case 1: typeNumber = 'трефы'; break;
            case 2: typeNumber = 'червы'; break;
            case 3: typeNumber = 'бубны'; break;
            default : break;
        }
        if(typeNumber && strNumber){
            return typeNumber + ":" + strNumber;
        }else{
            return '';
        }

    }

    this.getNumber = function() {
        return this.currentNumber;
    }

    this.getType = function() {
        return this.currentType;
    }
}

function saveCardsState(){
    var objectData = new Array();
    cardObject.forEach(
        function(element, index, array){

            var object = {
                number : element.getNumber(),
                type : element.getType(),
                display : element.getDisplay()
            };
            objectData[objectData.length] = object;
        }
    );
    setCookie('cards', JSON.stringify(objectData), null);
}

function saveFieldState(){
    var objectData = new Array();
    targetObject.forEach(
        function(element, index, array){
            var object = {
                number : element.getNumber(),
                type : element.getType()
            };
            objectData[objectData.length] = object;
        }
    );

    setCookie('field', JSON.stringify(objectData), null);
}

var dragMaster = (function() {

    var dragObject;
    var mouseDownAt;

    var currentDropTarget;


    function mouseDown(e) {
        e = fixEvent(e);
        if (e.which!=1) return;

        mouseDownAt = { x: e.pageX, y: e.pageY, element: this };

        addDocumentEventHandlers();

        return false
    }


    function mouseMove(e){
        e = fixEvent(e);

        if (mouseDownAt) {
            if (Math.abs(mouseDownAt.x-e.pageX)<5 && Math.abs(mouseDownAt.y-e.pageY)<5) {
                return false
            }

            var elem  = mouseDownAt.element;

            dragObject = elem.dragObject;

            var mouseOffset = getMouseOffset(elem, mouseDownAt.x, mouseDownAt.y);
            mouseDownAt = null;

            dragObject.onDragStart(mouseOffset);

        }

        dragObject.onDragMove(e.pageX, e.pageY);

        var newTarget = getCurrentTarget(e);

        if (currentDropTarget != newTarget) {
            if (currentDropTarget) {
                currentDropTarget.onLeave()
            }
            if (newTarget) {
                newTarget.onEnter()
            }
            currentDropTarget = newTarget

        }

        return false
    }


    function mouseUp(){
        if (!dragObject) {
            mouseDownAt = null
        } else {
            if (currentDropTarget) {
                currentDropTarget.accept(dragObject);
                dragObject.onDragSuccess(currentDropTarget)
            } else {
                dragObject.onDragFail()
            }

            dragObject = null
        }

        removeDocumentEventHandlers()
    }

    function getMouseOffset(target, x, y) {
        var docPos  = getOffset(target);
        return {x:x - docPos.left, y:y - docPos.top}
    }


    function getCurrentTarget(e) {

        if (navigator.userAgent.match('MSIE') || navigator.userAgent.match('Gecko')) {
            var x=e.clientX, y=e.clientY
        } else {
            var x=e.pageX, y=e.pageY
        }

        dragObject.hide();
        var elem = document.elementFromPoint(x,y);
        dragObject.show();


        while (elem) {
            if (elem.dropTarget && elem.dropTarget.canAccept(dragObject)) {
                return elem.dropTarget
            }
            elem = elem.parentNode
        }

        return null
    }


    function addDocumentEventHandlers() {
        document.onmousemove = mouseMove;
        document.onmouseup = mouseUp;
        document.ondragstart = document.body.onselectstart = function() {return false}
    }
    function removeDocumentEventHandlers() {
        document.onmousemove = document.onmouseup = document.ondragstart = document.body.onselectstart = null
    }


    return {

        makeDraggable: function(element){
            element.onmousedown = mouseDown
        }
    }
}());

function getOffsetSum(elem) {
    var top=0, left=0;
    while(elem) {
        top = top + parseInt(elem.offsetTop);
        left = left + parseInt(elem.offsetLeft);
        elem = elem.offsetParent
    }

    return {top: top, left: left}
}

function getOffsetRect(elem) {
    var box = elem.getBoundingClientRect();

    var body = document.body;
    var docElem = document.documentElement;

    var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop;
    var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft;
    var clientTop = docElem.clientTop || body.clientTop || 0;
    var clientLeft = docElem.clientLeft || body.clientLeft || 0;
    var top  = box.top +  scrollTop - clientTop;
    var left = box.left + scrollLeft - clientLeft;

    return { top: Math.round(top), left: Math.round(left) }
}

function getOffset(elem) {
    if (elem.getBoundingClientRect) {
        return getOffsetRect(elem)
    } else {
        return getOffsetSum(elem)
    }
}

function fixEvent(e) {
	e = e || window.event;

	if ( e.pageX == null && e.clientX != null ) {
		var html = document.documentElement;
		var body = document.body;
		e.pageX = e.clientX + (html && html.scrollLeft || body && body.scrollLeft || 0) - (html.clientLeft || 0);
		e.pageY = e.clientY + (html && html.scrollTop || body && body.scrollTop || 0) - (html.clientTop || 0);
	}

	if (!e.which && e.button) {
		e.which = e.button & 1 ? 1 : ( e.button & 2 ? 3 : ( e.button & 4 ? 2 : 0 ) )
	}

	return e
}

function shuffle(o){
    for(var j, x, k = o.length; k; j = Math.floor(Math.random() * k), x = o[--k], o[k] = o[j], o[j] = x);
    return o;
}

function startGame(){
    clearBlock();
    setCookie('cards', '', null);
    setCookie('page', '', null);
    setCookie('field', '', null);
    lastIndex = 0;

    initCards();
    initTargets();

    var button = document.getElementById('button');
    button.value = "Начать новую игру";
    button.onclick = function(){
        if(confirm("Начать заного?")){
            startGame();
        }
    };

    var nextButton = document.getElementById('next');
    nextButton.style.display = '';
    nextButton.onclick = function(){
        nextCards();
    };
    nextCards();
}

function initCards(){
    cardObject = new Array();

    var types=4, numbers=13;
    var cards=new Array(types);
    for (var i=0;i<types;i++){
        cards[i]=new Array(numbers);
        for (var j=0;j<numbers;j++){
            cards[i][j]=j;
        }
    }

    for (var i=0; i<types; i++) {
        cards[i] = shuffle(cards[i]);
    }

    var array = shuffle([0, 1, 2, 3]);
    array.forEach(
        function (element, index, array) {
            for (var j = 0; j < numbers; j++) {
                var d = document.createElement('img');
                d.style.width = '150px';
                d.style.height = '200px';
                d.style.margin = '10px 10px';
                d.style.border = '2px double black';
                d.style.position = 'relative';
                cardObject[cardObject.length] = new DragObject(d, cards[element][j], element);
                d.alt = cardObject[cardObject.length-1].toString();
            }
        })
}

function initTargets(){
    targetObject = new Array();
    var dropTarget = document.getElementById('deck').getElementsByTagName('div');
    for(var i=0; i<dropTarget.length; i++) {
        dropTarget[i].innerHTML = '';
        targetObject[targetObject.length] = new DropTarget(dropTarget[i]);
    }
}

function resetGame(){
    clearBlock();
    var cards = JSON.parse(getCookie('cards'));
    var field = JSON.parse(getCookie('field'));
    if(getCookie('page')){
        lastIndex = Number(getCookie('page'));
    }else {
        lastIndex = 0;
    }
    cardObject = new Array();
    cards.forEach(
        function (element, index, array){
            var d = document.createElement('img');
            d.style.width = '150px';
            d.style.height = '200px';
            d.style.margin = '10px 10px';
            d.style.border = '2px double black';
            d.style.position = 'relative';
            d.style.display = element.display;
            cardObject[cardObject.length] = new DragObject(d, Number(element.number-=2), Number(element.type));
            d.alt = cardObject[cardObject.length-1].toString();
        }
    );

    var dropTarget = document.getElementById('deck').getElementsByTagName('div');
    targetObject = new Array();
    field.forEach(
        function(element, index, array) {
            targetObject[targetObject.length] = new DropTarget(dropTarget[index]);
                targetObject[targetObject.length-1].currentNumber = Number(element.number);
                targetObject[targetObject.length-1].currentType = Number(element.type);
            dropTarget[index].innerHTML = targetObject[targetObject.length-1].toString();
        }
    );

    var button = document.getElementById('button');
    button.value = "Начать новую игру";
    button.onclick = function(){
        if(confirm("Начать заного?")){
            startGame();
        }
    };

    var nextButton = document.getElementById('next');
    nextButton.style.display = '';
    nextButton.onclick = function(){
        nextCards();
    };
    nextCards();
}

function nextCards(){
    clearBlock();
    setCookie('page', lastIndex, null);
    if (lastIndex == 0){
        i = 0;
        lastIndex = 5;
    } else {
        i = lastIndex;
        lastIndex += 5;
    }

    for (var j = i; j < lastIndex; j++) {
        if(j < cardObject.length){
            var dragObjects = document.getElementById('playCard');
            dragObjects.appendChild(cardObject[j].getElement());
            move(cardObject[j].getElement());
        } else {
            lastIndex = 0;
        }
    }

}

function checkFinalGame(){
    for(var i=0; i<targetObject.length;i++){
        if(targetObject[i].getNumber() != 2){
            return false;
        }
    }

    return true;
}

function clearBlock(){
    document.getElementById('playCard').innerHTML = '';
}

function setCookie(name, value, options) {
    options = options || {};

    var expires = options.expires;

    if (typeof expires == "number" && expires) {
        var d = new Date();
        d.setTime(d.getTime() + expires*1000);
        expires = options.expires = d;
    }
    if (expires && expires.toUTCString) {
        options.expires = expires.toUTCString();
    }

    value = encodeURIComponent(value);
    var updatedCookie = name + "=" + value;

    for(var propName in options) {
        updatedCookie += "; " + propName;
        var propValue = options[propName];
        if (propValue !== true) {
            updatedCookie += "=" + propValue;
        }
    }

    document.cookie = updatedCookie;
}


function getCookie(cookie_name) {
    var results = document.cookie.match ( '(^|;) ?' + cookie_name + '=([^;]*)(;|$)' );
    if (results){
        return (unescape(results[2]));
    }
    else{
        return null;
    }
}

function move(elem) {
    elem.style.left = -100+'px';
    $(elem).animate({
        transform: "rotate(360deg)",
        left: "0px"
    },100);
}


var cards = getCookie('cards');
var field = getCookie('field');

if(cards && field){
    cards = JSON.parse(cards);
    field = JSON.parse(field);
    document.onload = resetGame();
}

## style.css
#deck div {
	width: 150px;
	height: 200px;
	margin: 10px 10px;
	border: 2px dotted black;
	float:left;
}

#playCard {
	width: 900px;
	height: 220px;
	clear: left;
}

#playCard img {
	width: 150px;
	height: 200px;
	margin: 10px 10px;
	border: 2px double black;
}

#button {
	color: #fff; /* цвет текста */
	text-decoration: none; /* убирать подчёркивание у ссылок */
	user-select: none; /* убирать выделение текста */
	background: rgb(212,75,56); /* фон кнопки */
	padding: .7em 1.5em; /* отступ от текста */
	outline: none; /* убирать контур в Mozilla */
}
#button:hover {
	background: rgb(232,95,76);
}

#button:active {
	background: rgb(152,15,0);
}

#next {
	position: relative;
	z-index: 1;
	display: inline-block;
	width: 1.3em;
	height: 1.3em;
	line-height: 1.3em;
	vertical-align: middle;
	text-align: center;
	text-decoration: none;
	text-shadow: 1px 1px rgba(255,255,255,.3);
	font-size: 300%;
	font-weight: 900;
	color: #000;
	border-radius: 100%;
	background: rgb(105,105,105) linear-gradient(rgb(151,151,151), rgb(105,105,105));
	box-shadow:
	inset 0 -2px 1px rgba(0,0,0,.5),
	inset 0 2px 1px rgba(255,255,255,.9),
	0 4px 4px rgba(0,0,0,.9);
	-moz-user-select: none;
	-o-user-select:none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
#next:after {
	content: "";
	position: absolute;
	z-index: -1;
	top: 12%;
	left: 12%;
	right: 12%;
	bottom: 12%;
	border-radius: 100%;
	background: rgb(232,95,76) linear-gradient(rgb(212,75,56), rgb(152,15,0));
	box-shadow:
	inset 0 2px 1px rgba(0,0,0,.5),
	inset 0 -2px 1px rgba(255,255,255,.3);
}

#next:hover {
	cursor: pointer
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>Косынка</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<script type="text/javascript" src="jquery-2.1.1.js"></script>
	</head>
	<body>
	<input type="submit" id="button" onclick="startGame()" value="Начать игру!">
	<div id="deck">
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	</div>

	<div id="playCard"></div>
	<div id="next" style="display: none" >></div>
	</body>
	<script type="text/javascript" src="solitaire.js"></script>
	</html>
	var cardObject;
	var targetObject;
	var lastIndex;

	function DragObject(element, number, typeNumber) {
	element.dragObject = this;

	dragMaster.makeDraggable(element);

	var rememberPosition;
	var mouseOffset;
	var type = typeNumber;
	this.number = number;

	number+=2;

	switch (typeNumber){
	case 0: type = 'пики'; break;
	case 1: type = 'трефы'; break;
	case 2: type = 'червы'; break;
	case 3: type = 'бубны'; break;
	default : break;
	}

	this.onDragStart = function(offset) {
	var s = element.style;
	rememberPosition = {top: s.top, left: s.left, position: s.position};
	s.position = 'absolute';

	mouseOffset = offset
	};

	this.hide = function() {
	element.style.display = 'none'
	};

	this.show = function() {
	element.style.display = ''
	};

	this.onDragMove = function(x, y) {
	element.style.top = y - mouseOffset.y +'px';
	element.style.left = x - mouseOffset.x +'px';
	};

	this.onDragSuccess = function(dropTarget) { };

	this.onDragFail = function() {
	var s = element.style;
	s.top = rememberPosition.top;
	s.left = rememberPosition.left;
	s.position = rememberPosition.position
	};

	this.onNewPosition = function(x, y) {
	element.style.top = y +'px';
	element.style.left = x +'px';
	};

	this.toString = function() {
	var strNumber = this.number;
	strNumber += 2;
	switch (strNumber){
	case 11: strNumber = 'В'; break;
	case 12: strNumber = 'Д'; break;
	case 13: strNumber = 'К'; break;
	case 14: strNumber = 'Т'; break;
	default : break;
	}

	return type + ":" + strNumber;
	};

	this.getNumber = function() {
	return Number(number);
	};

	this.getType = function() {
	return Number(typeNumber);
	};

	this.getElement = function() {
	return element;
	};

	this.getDisplay = function() {
	return element.style.display;
	};
	}

	function DropTarget(element) {

	element.dropTarget = this;
	this.currentType = '';
	this.currentNumber = '';

	this.canAccept = function(dragObject) {
	return true
	};

	this.accept = function(dragObject) {
	this.onLeave();

	if(element.innerHTML != "") {
	if(this.currentType == dragObject.getType()){
	if(this.currentNumber - 1 != dragObject.getNumber()){
	dragObject.onDragFail();
	return;
	}
	} else {
	dragObject.onDragFail();
	return;
	}
	this.addCard(dragObject);
	}

	if (dragObject.getNumber() == 14){
	this.addCard(dragObject);
	} else {
	dragObject.onDragFail();
	return false;
	}
	};

	this.addCard = function(dragObject) {
	dragObject.hide();
	element.innerHTML = dragObject.toString();
	this.currentNumber = dragObject.getNumber();
	this.currentType = dragObject.getType();
	dragObject.onNewPosition(getOffsetSum(element).left - 10, getOffsetSum(element).top - 10);

	saveCardsState();
	saveFieldState();

	if(checkFinalGame()){
	if(confirm("Вы выграли!! Начать сначала?")){
	startGame();
	}
	}
	};

	this.onLeave = function() {
	element.className = ''
	};

	this.onEnter = function() {
	element.className = 'uponMe'
	};

	this.toString = function() {
	var strNumber = this.currentNumber;
	switch (this.currentNumber){
	case 11: strNumber = 'В'; break;
	case 12: strNumber = 'Д'; break;
	case 13: strNumber = 'К'; break;
	case 14: strNumber = 'Т'; break;
	default : break;
	}
	var typeNumber = this.currentType;
	switch (typeNumber){
	case 0: typeNumber = 'пики'; break;
	case 1: typeNumber = 'трефы'; break;
	case 2: typeNumber = 'червы'; break;
	case 3: typeNumber = 'бубны'; break;
	default : break;
	}
	if(typeNumber && strNumber){
	return typeNumber + ":" + strNumber;
	}else{
	return '';
	}

	}

	this.getNumber = function() {
	return this.currentNumber;
	}

	this.getType = function() {
	return this.currentType;
	}
	}

	function saveCardsState(){
	var objectData = new Array();
	cardObject.forEach(
	function(element, index, array){

	var object = {
	number : element.getNumber(),
	type : element.getType(),
	display : element.getDisplay()
	};
	objectData[objectData.length] = object;
	}
	);
	setCookie('cards', JSON.stringify(objectData), null);
	}

	function saveFieldState(){
	var objectData = new Array();
	targetObject.forEach(
	function(element, index, array){
	var object = {
	number : element.getNumber(),
	type : element.getType()
	};
	objectData[objectData.length] = object;
	}
	);

	setCookie('field', JSON.stringify(objectData), null);
	}

	var dragMaster = (function() {

	var dragObject;
	var mouseDownAt;

	var currentDropTarget;


	function mouseDown(e) {
	e = fixEvent(e);
	if (e.which!=1) return;

	mouseDownAt = { x: e.pageX, y: e.pageY, element: this };

	addDocumentEventHandlers();

	return false
	}


	function mouseMove(e){
	e = fixEvent(e);

	if (mouseDownAt) {
	if (Math.abs(mouseDownAt.x-e.pageX)<5 && Math.abs(mouseDownAt.y-e.pageY)<5) {
	return false
	}

	var elem = mouseDownAt.element;

	dragObject = elem.dragObject;

	var mouseOffset = getMouseOffset(elem, mouseDownAt.x, mouseDownAt.y);
	mouseDownAt = null;

	dragObject.onDragStart(mouseOffset);

	}

	dragObject.onDragMove(e.pageX, e.pageY);

	var newTarget = getCurrentTarget(e);

	if (currentDropTarget != newTarget) {
	if (currentDropTarget) {
	currentDropTarget.onLeave()
	}
	if (newTarget) {
	newTarget.onEnter()
	}
	currentDropTarget = newTarget

	}

	return false
	}


	function mouseUp(){
	if (!dragObject) {
	mouseDownAt = null
	} else {
	if (currentDropTarget) {
	currentDropTarget.accept(dragObject);
	dragObject.onDragSuccess(currentDropTarget)
	} else {
	dragObject.onDragFail()
	}

	dragObject = null
	}

	removeDocumentEventHandlers()
	}

	function getMouseOffset(target, x, y) {
	var docPos = getOffset(target);
	return {x:x - docPos.left, y:y - docPos.top}
	}


	function getCurrentTarget(e) {

	if (navigator.userAgent.match('MSIE') \|\| navigator.userAgent.match('Gecko')) {
	var x=e.clientX, y=e.clientY
	} else {
	var x=e.pageX, y=e.pageY
	}

	dragObject.hide();
	var elem = document.elementFromPoint(x,y);
	dragObject.show();


	while (elem) {
	if (elem.dropTarget && elem.dropTarget.canAccept(dragObject)) {
	return elem.dropTarget
	}
	elem = elem.parentNode
	}

	return null
	}


	function addDocumentEventHandlers() {
	document.onmousemove = mouseMove;
	document.onmouseup = mouseUp;
	document.ondragstart = document.body.onselectstart = function() {return false}
	}
	function removeDocumentEventHandlers() {
	document.onmousemove = document.onmouseup = document.ondragstart = document.body.onselectstart = null
	}


	return {

	makeDraggable: function(element){
	element.onmousedown = mouseDown
	}
	}
	}());

	function getOffsetSum(elem) {
	var top=0, left=0;
	while(elem) {
	top = top + parseInt(elem.offsetTop);
	left = left + parseInt(elem.offsetLeft);
	elem = elem.offsetParent
	}

	return {top: top, left: left}
	}

	function getOffsetRect(elem) {
	var box = elem.getBoundingClientRect();

	var body = document.body;
	var docElem = document.documentElement;

	var scrollTop = window.pageYOffset \|\| docElem.scrollTop \|\| body.scrollTop;
	var scrollLeft = window.pageXOffset \|\| docElem.scrollLeft \|\| body.scrollLeft;
	var clientTop = docElem.clientTop \|\| body.clientTop \|\| 0;
	var clientLeft = docElem.clientLeft \|\| body.clientLeft \|\| 0;
	var top = box.top + scrollTop - clientTop;
	var left = box.left + scrollLeft - clientLeft;

	return { top: Math.round(top), left: Math.round(left) }
	}

	function getOffset(elem) {
	if (elem.getBoundingClientRect) {
	return getOffsetRect(elem)
	} else {
	return getOffsetSum(elem)
	}
	}

	function fixEvent(e) {
	e = e \|\| window.event;

	if ( e.pageX == null && e.clientX != null ) {
	var html = document.documentElement;
	var body = document.body;
	e.pageX = e.clientX + (html && html.scrollLeft \|\| body && body.scrollLeft \|\| 0) - (html.clientLeft \|\| 0);
	e.pageY = e.clientY + (html && html.scrollTop \|\| body && body.scrollTop \|\| 0) - (html.clientTop \|\| 0);
	}

	if (!e.which && e.button) {
	e.which = e.button & 1 ? 1 : ( e.button & 2 ? 3 : ( e.button & 4 ? 2 : 0 ) )
	}

	return e
	}

	function shuffle(o){
	for(var j, x, k = o.length; k; j = Math.floor(Math.random() * k), x = o[--k], o[k] = o[j], o[j] = x);
	return o;
	}

	function startGame(){
	clearBlock();
	setCookie('cards', '', null);
	setCookie('page', '', null);
	setCookie('field', '', null);
	lastIndex = 0;

	initCards();
	initTargets();

	var button = document.getElementById('button');
	button.value = "Начать новую игру";
	button.onclick = function(){
	if(confirm("Начать заного?")){
	startGame();
	}
	};

	var nextButton = document.getElementById('next');
	nextButton.style.display = '';
	nextButton.onclick = function(){
	nextCards();
	};
	nextCards();
	}

	function initCards(){
	cardObject = new Array();

	var types=4, numbers=13;
	var cards=new Array(types);
	for (var i=0;i<types;i++){
	cards[i]=new Array(numbers);
	for (var j=0;j<numbers;j++){
	cards[i][j]=j;
	}
	}

	for (var i=0; i<types; i++) {
	cards[i] = shuffle(cards[i]);
	}

	var array = shuffle([0, 1, 2, 3]);
	array.forEach(
	function (element, index, array) {
	for (var j = 0; j < numbers; j++) {
	var d = document.createElement('img');
	d.style.width = '150px';
	d.style.height = '200px';
	d.style.margin = '10px 10px';
	d.style.border = '2px double black';
	d.style.position = 'relative';
	cardObject[cardObject.length] = new DragObject(d, cards[element][j], element);
	d.alt = cardObject[cardObject.length-1].toString();
	}
	})
	}

	function initTargets(){
	targetObject = new Array();
	var dropTarget = document.getElementById('deck').getElementsByTagName('div');
	for(var i=0; i<dropTarget.length; i++) {
	dropTarget[i].innerHTML = '';
	targetObject[targetObject.length] = new DropTarget(dropTarget[i]);
	}
	}

	function resetGame(){
	clearBlock();
	var cards = JSON.parse(getCookie('cards'));
	var field = JSON.parse(getCookie('field'));
	if(getCookie('page')){
	lastIndex = Number(getCookie('page'));
	}else {
	lastIndex = 0;
	}
	cardObject = new Array();
	cards.forEach(
	function (element, index, array){
	var d = document.createElement('img');
	d.style.width = '150px';
	d.style.height = '200px';
	d.style.margin = '10px 10px';
	d.style.border = '2px double black';
	d.style.position = 'relative';
	d.style.display = element.display;
	cardObject[cardObject.length] = new DragObject(d, Number(element.number-=2), Number(element.type));
	d.alt = cardObject[cardObject.length-1].toString();
	}
	);

	var dropTarget = document.getElementById('deck').getElementsByTagName('div');
	targetObject = new Array();
	field.forEach(
	function(element, index, array) {
	targetObject[targetObject.length] = new DropTarget(dropTarget[index]);
	targetObject[targetObject.length-1].currentNumber = Number(element.number);
	targetObject[targetObject.length-1].currentType = Number(element.type);
	dropTarget[index].innerHTML = targetObject[targetObject.length-1].toString();
	}
	);

	var button = document.getElementById('button');
	button.value = "Начать новую игру";
	button.onclick = function(){
	if(confirm("Начать заного?")){
	startGame();
	}
	};

	var nextButton = document.getElementById('next');
	nextButton.style.display = '';
	nextButton.onclick = function(){
	nextCards();
	};
	nextCards();
	}

	function nextCards(){
	clearBlock();
	setCookie('page', lastIndex, null);
	if (lastIndex == 0){
	i = 0;
	lastIndex = 5;
	} else {
	i = lastIndex;
	lastIndex += 5;
	}

	for (var j = i; j < lastIndex; j++) {
	if(j < cardObject.length){
	var dragObjects = document.getElementById('playCard');
	dragObjects.appendChild(cardObject[j].getElement());
	move(cardObject[j].getElement());
	} else {
	lastIndex = 0;
	}
	}

	}

	function checkFinalGame(){
	for(var i=0; i<targetObject.length;i++){
	if(targetObject[i].getNumber() != 2){
	return false;
	}
	}

	return true;
	}

	function clearBlock(){
	document.getElementById('playCard').innerHTML = '';
	}

	function setCookie(name, value, options) {
	options = options \|\| {};

	var expires = options.expires;

	if (typeof expires == "number" && expires) {
	var d = new Date();
	d.setTime(d.getTime() + expires*1000);
	expires = options.expires = d;
	}
	if (expires && expires.toUTCString) {
	options.expires = expires.toUTCString();
	}

	value = encodeURIComponent(value);
	var updatedCookie = name + "=" + value;

	for(var propName in options) {
	updatedCookie += "; " + propName;
	var propValue = options[propName];
	if (propValue !== true) {
	updatedCookie += "=" + propValue;
	}
	}

	document.cookie = updatedCookie;
	}


	function getCookie(cookie_name) {
	var results = document.cookie.match ( '(^\|;) ?' + cookie_name + '=([^;]*)(;\|$)' );
	if (results){
	return (unescape(results[2]));
	}
	else{
	return null;
	}
	}

	function move(elem) {
	elem.style.left = -100+'px';
	$(elem).animate({
	transform: "rotate(360deg)",
	left: "0px"
	},100);
	}


	var cards = getCookie('cards');
	var field = getCookie('field');

	if(cards && field){
	cards = JSON.parse(cards);
	field = JSON.parse(field);
	document.onload = resetGame();
	}
	#deck div {
	width: 150px;
	height: 200px;
	margin: 10px 10px;
	border: 2px dotted black;
	float:left;
	}

	#playCard {
	width: 900px;
	height: 220px;
	clear: left;
	}

	#playCard img {
	width: 150px;
	height: 200px;
	margin: 10px 10px;
	border: 2px double black;
	}

	#button {
	color: #fff; /* цвет текста */
	text-decoration: none; /* убирать подчёркивание у ссылок */
	user-select: none; /* убирать выделение текста */
	background: rgb(212,75,56); /* фон кнопки */
	padding: .7em 1.5em; /* отступ от текста */
	outline: none; /* убирать контур в Mozilla */
	}
	#button:hover {
	background: rgb(232,95,76);
	}

	#button:active {
	background: rgb(152,15,0);
	}

	#next {
	position: relative;
	z-index: 1;
	display: inline-block;
	width: 1.3em;
	height: 1.3em;
	line-height: 1.3em;
	vertical-align: middle;
	text-align: center;
	text-decoration: none;
	text-shadow: 1px 1px rgba(255,255,255,.3);
	font-size: 300%;
	font-weight: 900;
	color: #000;
	border-radius: 100%;
	background: rgb(105,105,105) linear-gradient(rgb(151,151,151), rgb(105,105,105));
	box-shadow:
	inset 0 -2px 1px rgba(0,0,0,.5),
	inset 0 2px 1px rgba(255,255,255,.9),
	0 4px 4px rgba(0,0,0,.9);
	-moz-user-select: none;
	-o-user-select:none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	}
	#next:after {
	content: "";
	position: absolute;
	z-index: -1;
	top: 12%;
	left: 12%;
	right: 12%;
	bottom: 12%;
	border-radius: 100%;
	background: rgb(232,95,76) linear-gradient(rgb(212,75,56), rgb(152,15,0));
	box-shadow:
	inset 0 2px 1px rgba(0,0,0,.5),
	inset 0 -2px 1px rgba(255,255,255,.3);
	}

	#next:hover {
	cursor: pointer
	}