﻿var numberOfPersons = 0;
var activePersonNr = 1;
var allowCoreMovement = true;
var personPositions = new Array();
var transitionDuration = 0;

function positionPerson(nrOfPersons) {
    if (allowTransitions() && !IsIE8Browser()) { transitionDuration = 500; }
    
    numberOfPersons = nrOfPersons;
    var range = 360 / nrOfPersons;
    for (i = 1; i <= nrOfPersons; i++) {
        var degrees = (range * i) - range;
        document.getElementById('person_' + i).style['msTransform'] = 'rotate(' + degrees + 'deg)'; ;
        $("#person_" + i).css({ '-moz-transform': 'rotate(' + degrees + 'deg)' });
        $("#person_" + i).css({ '-o-transform': 'rotate(' + degrees + 'deg)' });
        $("#person_" + i).css({ '-webkit-transform': 'rotate(' + degrees + 'deg)' });
        $("#person_" + i).css({ 'transform': 'rotate(' + degrees + 'deg)' });
        document.getElementById('person_' + i + '_hotspot').style['msTransform'] = 'rotate(' + degrees + 'deg)'; ;
        $("#person_" + i + '_hotspot').css({ '-moz-transform': 'rotate(' + degrees + 'deg)' });
        $("#person_" + i + '_hotspot').css({ '-o-transform': 'rotate(' + degrees + 'deg)' });
        $("#person_" + i + '_hotspot').css({ '-webkit-transform': 'rotate(' + degrees + 'deg)' });
        $("#person_" + i + '_hotspot').css({ 'transform': 'rotate(' + degrees + 'deg)' });
    }

    //make array of persons positions
    for (i = 0; i < nrOfPersons; i++) {
        personPositions[i] = 360- parseFloat((360 / numberOfPersons) * i);
    }


    //clickable
    $(".person_hotspot .hotspot").click(function() {
        if (!IsIE8Browser() && allowCoreMovement) {
            if (activePersonNr != $(this).parent().attr('id').replace("person_", "").replace("_hotspot", "")) {
                prevPersonNr = activePersonNr;
                activePersonNr = $(this).parent().attr('id').replace("person_", "").replace("_hotspot", "");

                var wrapperDegrees = getDegreesFromDiv($("#person_wrapper").attr('id'));
                var personDegrees = getDegreesFromDiv($(this).parent().attr('id'));
                var goToDegrees = 360 - personDegrees;

                //controleren welke kant hij opmoet
                var wheelDirection = "";
                var check = (personDegrees + wrapperDegrees) % 360;
                if (check > 180) { wheelDirection = "CW"; } else { wheelDirection = "CCW"; }

                //huidige tekst weghalen & nieuwe persoons info zetten
                $("#bubble_" + prevPersonNr).fadeOut(transitionDuration);
                $("#bubble_" + activePersonNr).fadeIn(transitionDuration);

                //rad rondraaien
                allowCoreMovement = false;
                $("#person_wrapper").rotate({
                    duration: transitionDuration,
                    direction: wheelDirection,
                    degrees: goToDegrees + "",
                    onComplete: function() {
                        allowCoreMovement = true;
                    }
                });
                $("#person_wrapper_hotspots").rotate({
                    duration: transitionDuration,
                    direction: wheelDirection,
                    degrees: goToDegrees + "",
                    onComplete: function() {
                        allowCoreMovement = true;
                    }
                });
            }
        }
    });
}


function showPersonsInfo(direction) {

    if (allowCoreMovement) {
        
        //text change
        var wheelDirection = "";
        prevPersonNr = activePersonNr;
        if (direction == "prev") {
            activePersonNr = activePersonNr - 1;
            wheelDirection = "CW";
        } else if (direction == "next") {
            activePersonNr = parseFloat(activePersonNr) + 1;
            wheelDirection = "CCW";
        }
        
        //boundries
        if (activePersonNr < 1) { activePersonNr = numberOfPersons; }
        if (activePersonNr > numberOfPersons) { activePersonNr = 1; }

        //alert("prev:" + prevPersonNr + "/now:" + activePersonNr + "/degrees:" + personPositions[activePersonNr - 1]);
        
        $("#person_" + prevPersonNr).addClass("nonActivePerson");
        $("#person_" + activePersonNr).removeClass("nonActivePerson");

        //huidige tekst weghalen & nieuwe persoons info zetten
        $("#bubble_" + prevPersonNr).fadeOut(transitionDuration);
        $("#bubble_" + activePersonNr).fadeIn(transitionDuration);
        //alert(parseFloat((360 / 11) * (activePersonNr-1)) + "px");
        //movement
        if (!IsIE8Browser()) {
            //movement
            allowCoreMovement = false;

            var nrDegrees = "";
            if (wheelDirection == "CW") { nrDegrees = "-="; } else { nrDegrees = "+="; }
            $("#person_wrapper").rotate({
                duration: transitionDuration,
                direction: wheelDirection,
                degrees: personPositions[activePersonNr - 1] + "",
                onComplete: function() {
                    allowCoreMovement = true;
                }
            });
            $("#person_wrapper_hotspots").rotate({
                duration: transitionDuration,
                direction: wheelDirection,
                degrees: personPositions[activePersonNr - 1] + "",
                onComplete: function() {
                    allowCoreMovement = true;
                }
            });
        }
    }
}

function getDegreesFromDiv(elementId) {
    //get the current degrees from the style attribute
    var result = 0;
    try {
        var startSubString = $("#" + elementId).attr('style').indexOf("rotate(") + 7;
        var endSubString;
        if ($("#" + elementId).attr('style').indexOf("rad)") != -1) {
            endSubString = $("#" + elementId).attr('style').indexOf("rad)");
            result = $("#" + elementId).attr('style').substring(startSubString, endSubString);
            result = (result / (2 * Math.PI)) * 360; // Convert radians to degrees
        }
        else {
            endSubString = $("#" + elementId).attr('style').indexOf("deg)");
            result = $("#" + elementId).attr('style').substring(startSubString, endSubString);
        }
        if (result == "" || endSubString == -1) { return 0; }
        else { return parseFloat(result); }
    } catch (err) { return 0; }
}
