﻿var tiles, timer, imgsDiv, imgWidth, imgMargin, maxImgs, maxFlips;
var tileNo = 0;
var imgsLoaded = 0;
var tileUrls = [];
var currentSet = "00";

// how long to wait between tile flips
var timerInterval = 1000;

// this tile will flip last
var lastTileNumber = 8;

// tracks how many time the tiles have flipped
var tileFlips = 0;

function randomFromTo(from, to) {
    return Math.floor(Math.random() * (to - from + 1) + from);
};

function preloadImgs() {
    maxImgs = $("div.tile").length - 1;
    maxFlips = (maxImgs + 1) * 5;
    for (var i = 0; i < 3; i++) {
        for (var j = 0; j <= maxImgs; j++) {
            var imgPath = '../pages/images/0' + i + '_0' + ((j < 10) ? ('0' + j) : j) + '.jpg';
            var cacheImage = $(document.createElement('img'));
            cacheImage.attr('src', imgPath).load(function () {
                $('.profile').append($(this));
                imgsLoaded++;
                if (imgsLoaded == maxImgs) { initTimer(); };
            });
        }
    }
}

function tileFlip(no) {
    var newTileNo = no;
    //console.log("flip tile number:" + tileNo);
    var tile = $(tiles[newTileNo]);
    var prevImg = tile.find('img').attr('src');
    var newImg, newUrl;
    if (prevImg.indexOf('00_') > -1) {
        newImg = prevImg.replace('00_', '01_');
        newUrl = tileUrls[1][newTileNo];
        tile.removeClass("00").addClass("01");
    } else if (prevImg.indexOf('01_') > -1) {
        newImg = prevImg.replace('01_', '02_');
        newUrl = tileUrls[2][newTileNo];
        tile.removeClass("01").addClass("02");
    } else {
        newImg = prevImg.replace('02_', '00_');
        newUrl = tileUrls[0][tileNo];
        tile.removeClass("02").addClass("00");
    }
    newUrl = (newUrl != "") ? "http://" + newUrl : newUrl;

	if (tile != undefined) {
        tileNo = newTileNo;

        var tileHtml = (newUrl != "") ? '<a href="' + newUrl + '"><img src="' + newImg + '" width="158" height="163" alt="" /></a>' : '<img src="' + newImg + '" width="158" height="163" alt="" />';
        //var newImg = (prevImg.indexOf('00_') > -1) ? prevImg.replace('00_', '01_') : ( (prevImg.indexOf('01_') > -1) ? prevImg.replace('01_', '02_') : prevImg.replace('02_', '00_') );
        //alert(newImg + "  " + prevImg.indexOf('00_'));
        
        tile.flip({
            direction: 'lr',
            content: tileHtml,
            speed: 200,
            color: '#ffffff'
        })

        // increment the number of flips
        tileFlips++;
        //console.log(tileFlips + " flip tile " + tileNo + " old " + prevImg + " to " + newImg);

        // set timer
        if (tileFlips < maxFlips) {
            clearTimeout(timer);
            timer = setTimeout("getTileNo()", timerInterval);
        }
    }
}

function getTilePosFromImgName( img ) {
	var arr = img.attr("src").split("/");
	return Number(arr[arr.length-1].split(".jpg")[0].split("_")[1]);
}

function getTileStateFromImgName( img ) {
	var arr = img.attr("src").split("/");
	return arr[arr.length-1].split(".jpg")[0].split("_")[0];
}

function getTileNo() {
	var imgSet = $('div.tile.' + currentSet).find("img");
	if(imgSet.length == 0) {
		currentSet = getTileStateFromImgName($(tiles[tileNo]).find("img"));
		imgSet = $('div.tile.' + currentSet).find("img");
	}
	//console.log(currentSet + " - imgSet.length " + imgSet.length);
    var newTileNo;
    if(currentSet == "00" && imgSet.length == 1) {
        newTileNo = lastTileNumber;
    } else if (currentSet == "00" && imgSet.length > 1) {
		newTileNo = randomFromTo(0, imgSet.length - 1);
		var newTilePos = getTilePosFromImgName($(imgSet[newTileNo]));
        while (newTilePos == lastTileNumber) {
        	newTileNo = randomFromTo(0, imgSet.length - 1);
			newTilePos = getTilePosFromImgName($(imgSet[newTileNo]));
        }
        newTileNo = getTilePosFromImgName($(imgSet[newTileNo]));
    } else {
		newTileNo = randomFromTo(0, imgSet.length - 1);
        newTileNo = getTilePosFromImgName($(imgSet[newTileNo]));
		//newTileNo = randomFromTo(0, imgSet.length - 1);
    }
    tileFlip(newTileNo);
}

function initTimer() {
    tileUrls = urls;
    $(".tiles script").remove();
    // get tiles
    tiles = $(".tile");
    // set initial url
    tiles.find('a[href|="http://"]').parent().each(function () { $(this).append($(this).find("img")); $(this).find("a").remove(); });
    // set timer
    clearTimeout(timer);
    timer = setTimeout("getTileNo()", timerInterval);
}

// image slider
function swapImage(img, left) {
    img.remove();

    if (left == true) {
        imgsDiv.prepend(img);
        img.css("margin-left", "-" + imgWidth + "px");
    } else {
        img.css("margin-left", "0px");
        imgsDiv.append(img);
    }
}

function slideImage(img, left) {
    if (left == true) {
        img.animate({ "margin-left": "0px" }, 250);
    } else {
        img.animate({ "margin-left": "-=" + imgWidth + "px" }, 250, function () { swapImage(img, left) });
    }
}

function imgClick() {
    if ($(this).attr("id") == "prev") {
        var img = imgsDiv.find("div").eq(-1);
        swapImage(img, true);
        slideImage(img, true);
    } else {
        var img = imgsDiv.find("div").eq(0);
        slideImage(img);
    }
}

$(document).ready(function () {
	$("div.tile").each(function(){$(this).addClass("00")});
    preloadImgs();

    /*if ($("#peoplehome").length > 0) {
    $("#peoplehome").css({ "overflow": "hidden", "width": "960px", "height": "202px" });
    imgsDiv = $("#peoplehome #slider");
    imgsDiv.hide();

    // set width of image container to
    imgWidth = imgsDiv.find("img").eq(0).outerWidth();
    imgMargin = Number(imgsDiv.find("img").eq(0).css("margin-right").replace("px", ""));
    imgWidth += imgMargin;
    imgsDiv.css({ "width": ((imgWidth * (imgsDiv.find("div").length + 1)) + 20) + 1000 + "px", "margin-left": "24px" });

    // set up tooltips
    $("#slider div").tooltip({position:"top center",offset: [18, 48], effect:"fade"});

    // set up clicks
    $("#peoplehome #prev, #peoplehome #next").mousehold(200, imgClick);
    //$("#main").click(imgClick);
    //$("#main").css("cursor", "pointer");

    imgsDiv.show();
    }*/
});

