var dimX = 6;
var dimY = 5; 
var N = dimX * dimY;
var emptyX1 = 4;
var emptyY1 = 1;
var emptyX2 = 2;
var emptyY2 = 5;
var needX = 2;
var needY = 5;
var box = 'box9';
var boxAnimationTime = 1000;
var adminmode = false;

$(document).ready(function()
{
	$('body').append('<div id="screen"><a href="#"></a></div>');
	
	$('.fotleft').corner('tr tl');
	$('.fotright').corner('tr tl');
	$('.slider').corner('20px');
	
	$('#photocar').show();
	$('#photocar').jcarousel({scroll: 3});
	
    $('#start, #chip').click(Go);
});

function Go() //starts the game
{
	$('#start').css('background', 'url(/web/images/finish_ru.jpg)');
	$('#votingBox').find("div").hide();
    $('#start, #chip').unbind('click', Go);
    $('.item a').hide();
    $('.jcarousel-next').hide();
    $('.jcarousel-prev').hide();
	$('.item').bind('click', function(){$(this).move()});
	if(!adminmode){
		ShowBubble('rulespopup'); // shows the invitation message
	    $('#screen a').click(HideBubble); // hides infitation message
		$('#start').unbind("click");
		$('#start').click(unGo); // exit the game
	}
	else
		adminmode = true;
}

function unGo() // exit the game
{
	$('.item').unbind('click');
	$('#start').css('background', 'url(/web/images/barabanStart.png)');
	$('#votingBox').find("div").show();
    $('#start').unbind('click', unGo);
    $('#start').click(Go);
	$('#chip').click(Go);
    $('.item a').show();
    $('.jcarousel-next').show();
    $('.jcarousel-prev').show();
}

function ShowBubble(messdiv) // shows infitation
{
    if ($.browser.msie && parseInt($.browser.version) <= 6)
	{
	    $(document).pngFix();
	}
    $('#screen').css('height', getyScroll());
    $('#screen').show();    
    $('#'+messdiv).show();
    
    return false;
}

function HideBubble() // hides invitation
{
    $('#rulespopup, #winpopup').hide();
	$('#screen').hide();
    
    return false;
}

function getyScroll() // calculates screen hight
{
      yScroll = 0;

      if (window.innerHeight && window.scrollMaxY || window.innerWidth && window.scrollMaxX)
       {
        yScroll = window.innerHeight + window.scrollMaxY;
        xScroll = window.innerWidth + window.scrollMaxX;

        var deff = document.documentElement;
        var wff = (deff&&deff.clientWidth) || document.body.clientWidth || window.innerWidth || self.innerWidth;
        var hff = (deff&&deff.clientHeight) || document.body.clientHeight || window.innerHeight || self.innerHeight;

        xScroll -= (window.innerWidth - wff);
        yScroll -= (window.innerHeight - hff);
       } 
      else if (document.body.scrollHeight > document.body.offsetHeight || document.body.scrollWidth > document.body.offsetWidth)
       { // all but Explorer Mac
        yScroll = document.body.scrollHeight;
        xScroll = document.body.scrollWidth;
       } 
      else 
       { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
        yScroll = document.body.offsetHeight;
        xScroll = document.body.offsetWidth;
       }

      return yScroll;
}      

$.fn.extend({
	move: function(){ // trying to move selected banner to all directions
		if(this.doMove('left')) return true;
		if(this.doMove('up')) return true;
		if(this.doMove('right')) return true;
		if(this.doMove('down')) return true;
		return false;
	},
	doMove: function(direction){ // ececute moving
		var x = this.cell('left'); // x cell position
	    var y = this.cell('top'); // y cell position
    	var countX = this.cell('width'); // count cells on X direction for this banner
	    var countY = this.cell('height');
		
		var cssDirection = direction == 'up' || direction == 'down' ? 'top' : 'left';
		var emptyHD = []; // empty cells found
		
		switch(cssDirection){ // finds out an empty cells to move a banner
			case 'top':
				for(var i = 0; i < countX; i++){
					emptyHD.push($('.item').empty(x + i, y + (direction == 'down' ? countY : -1)));
					if(!emptyHD[emptyHD.length - 1]) return false; 
				}
				break;
			case 'left':
				for(var i = 0; i < countY; i++){
					emptyHD.push($('.item').empty(x + (direction == 'right' ? countX : -1), y + i));
					if(!emptyHD[emptyHD.length - 1]) return false;
				}
				break;
		}
		
		for(var i = 0; i < emptyHD.length; i++){ // hide and move all empty cells found
			$("#" + emptyHD[i]).hide();
			$("#" + emptyHD[i]).css(cssDirection, parseInt($("#" + emptyHD[i]).css(cssDirection).replace('px', '')) + 152 * (cssDirection == 'top' ? countY : countX) * (direction == 'down' || direction == 'right' ? -1 : 1) + 'px');
		}

		/* --- animates banner moving --- */
		this.unbind("click");
		eval('var param = {' + cssDirection + ': ' + (parseInt(this.css(cssDirection).replace('px', '')) + 152 * (direction == 'up' || direction == 'left' ? -1 : 1)) + '}');
		this.animate(param, boxAnimationTime, function(){
			for(var i = 0; i < emptyHD.length; i++) $("#" + emptyHD[i]).fadeIn(boxAnimationTime); /* fade in all hided empty cells */ 
			$(this).bind("click", function(){$(this).move()});
			if(!adminmode)
				if($("#chip").cell('top') == $("#start").cell('top') + 1 && $("#chip").cell("left") == $("#start").cell("left")){
					ShowBubble('winpopup');
					unGo();
				}
		});
		/* ---                        --- */
			
		return true;
	},
	cell: function(param){ // returns a cell by the css position
		return Math.round(parseInt(this.css(param).replace('px', '')) / 152);
	},
	getIDbyCell: function(CellX, CellY){ // find element ID on some cell
		ID = false;
		this.each(function(){
			if($(this).cell('left') == CellX && $(this).cell('top') == CellY) ID = $(this).attr('id');
		});
		return ID;
	},
	empty: function(CellX, CellY){ // check if item on given cell is empty
		return /empty.*/.test(ID = this.getIDbyCell(CellX, CellY)) ? ID : false;
	}
});