var nutImgs = [];
for (var i=0; i<scriptVars['nutLinks'].length; i++) {
	nutImgs[i] = {
		'name': 'nut' + (i+1),
		'href': scriptVars['nutLinks'][i]
	};
}

var nutGrid = {
	'containerSelect': '.section.third',
	'$nutImgs': [],
	'imgPath': '/images/nutsgrid/',
	'imgExt': 'png',
	'repeat': true,
	'delay': 2000,
	'curIndex': 0
}

$.fn.pause = function(milli,type) {
	milli = milli || 1000;
	type = type || "fx";
	return this.queue(type,function(){
		var self = this;
		setTimeout(function(){
			$.dequeue(self);
		},milli);
	});
};

$.fn.clearQueue = $.fn.unpause = function(type) {
	return this.each(function(){
		type = type || "fx";
		if(this.queue && this.queue[type]) {
			this.queue[type].length = 0;
		}
	});
};


var shuffle = function(array) {
    var tmp, current, top = array.length;

    if(top) while(--top) {
        current = Math.floor(Math.random() * (top + 1));
        tmp = array[current];
        array[current] = array[top];
        array[top] = tmp;
    }

    return array;
};



function generateImgGrid(nutImgs, $container) {
	nutImgs = shuffle(nutImgs);
	var marginTop = 0;
	var marginLeft = 0;
	for (var i = 1; i <= 9; i++) {
		var htmlImg = '<a href="/'+ nutImgs[i-1].href +'"><img class="nut" imgName="'+ nutImgs[i-1].name +'" style="position: absolute; margin: '+ marginTop + 'px 0 0 ' + marginLeft  +'px" src="' + nutGrid.imgPath + nutImgs[i-1].name +'.'+ nutGrid.imgExt +'"></a>';
		$container.append(htmlImg);
		
		// going to next row?
		if (i % 3 === 0) {
			marginTop += 72;
			marginLeft = 0;
		} else {
			marginLeft += 72;
		}
	}
}

nutGrid.flipNextNut = function() {
	for (var j = 0; j < nutGrid.$nutImgs.length; j++) {
		if (nutGrid.$nutImgs.eq(j).attr("imgName") == nutImgs[nutGrid.curIndex].name) {
			$element = nutGrid.$nutImgs.eq(j);
			break;
		}
	}
	
	nutGrid.aniFlip($element, true);
}			

nutGrid.randomFlipAll = function() {
	nutGrid.curIndex = 0;
	nutImgs = shuffle(nutImgs);
	setTimeout(function() {
		nutGrid.flipNextNut();
	}, 2000);
}

// takes image url from source and appends _a to it for flipped state
nutGrid.aniFlip = function($element, flipback) {
	if ($element.hasClass("active")) {
		var newSrc = nutGrid.imgPath + $element.attr("imgName") + "." + nutGrid.imgExt;
		var active = true;
	} else {
		var newSrc = nutGrid.imgPath + scriptVars['locale'] + '-' + $element.attr("imgName") + "_a." + nutGrid.imgExt;
		var active = false;
	}
	$element.animate({
		"width": "0",
		"height": "60px",
		"marginLeft": "+=30px"
	}, 150, '', function() {
		
		
		$(this).attr("src", newSrc).animate({
			"width": "60px",
			"height": "60px",
			"marginLeft": "-=30px"
		}, 150, '', function(){
			if (active === true) {
				$element.removeClass("active");
			} else {
				$element.addClass("active");
			}						
			if (typeof(flipback) != 'undefined' && flipback === true && active === false) {	
				$element.pause(nutGrid.delay).each(function() {
					nutGrid.aniFlip($element);
				});
			} else {
				if ((nutGrid.curIndex+1) < nutImgs.length) {
					nutGrid.curIndex++;
					nutGrid.flipNextNut();
				} else {
					if (typeof(nutGrid.repeat) != 'undefined' && nutGrid.repeat === true) {
						nutGrid.randomFlipAll();
					}
				}
			}
		});					
	});	
}		

$(document).ready(function() {
	nutGrid.$container = $(nutGrid.containerSelect);
	generateImgGrid(nutImgs, nutGrid.$container);
	nutGrid.$nutImgs = nutGrid.$container.find("img.nut");
	nutGrid.randomFlipAll();
});