Degri.MergedThumbs = 0;

Degri.ProjectControl = function(objId)
{
    this.thumbWidth = 224;
    this.thumbHeight = 124;
    this.positions = new Array
    (
        { x:0,      y:0,   navY:265 },
        { x:225,    y:0,   navY:265 },
        { x:450,    y:0,   navY:265 },
        { x:675,    y:0,   navY:265 },
        { x:0,      y:126, navY:295 },
        { x:225,    y:126, navY:295 },
        { x:450,    y:126, navY:295 },
        { x:675,    y:126, navY:295 }
    );
    this.obj = $('#'+objId);
    this.obj.empty();

    this.ItemClick = function(event)
    {
        $("#projectNav").remove();
        $("div.arrowControl").remove();
        event.data.obj.SelectProject(event.data.p);
    };
    
    this.ItemOver = function(event)
    {
        $('#hover').remove();
        var instance = event.data.obj;
        var p = eval('Degri.Projects.p'+event.data.p);
        var i = event.data.p;
        var hover = $("<img id='hover' src='" + p.over + "' alt='" + p.name + "' class='jItem binded' style='z-index:1000; top:" + instance.positions[i-1].y + "px; left:" + instance.positions[i-1].x + "px;'/>");
        hover.bind("click", { p:i, obj:instance }, instance.ItemClick);
        instance.obj.append(hover);
    };
    
    this.ItemLeave = function(event)
    {
        $('#hover').remove();
    };

    // Init
    for(var i=1; i<=8; i++)
    {
        var p = eval('Degri.Projects.p'+i);
        var item = $("<img id='p"+i+"' src='" + p.thumb + "' alt='" + p.name + "' class='jItem binded' style='top:" + this.positions[i-1].y + "px; left:" + this.positions[i-1].x + "px;'/>");
        item.bind("click", { p:i, obj:this }, this.ItemClick);
        item.bind("mouseover", { p:i, obj:this }, this.ItemOver);
        this.obj.bind("mouseleave", { p:i, obj:this }, this.ItemLeave);
        this.obj.append(item);
    }

    this.SelectProject = function(clickedPosition)
    {
        $('#hover').remove();
        Degri.MergedThumbs = 0;
        var proj = eval('Degri.Projects.p'+clickedPosition);
        var clickedProject = $('#p'+clickedPosition);
        clickedProject.css('z-index',1000);
        for(var i=1; i<=8; i++)
        {
            var item = $('#p'+i);
            item.unbind("mouseover");
            item.unbind("mouseleave");
            item.unbind("click");
            $('#desc').remove();
            if(i!=clickedPosition)
            {
                var state =
                {
                    x0:parseInt(item.css('left')),
                    y0:parseInt(item.css('top')),
                    x1:parseInt(clickedProject.css('left')),
                    y1:parseInt(clickedProject.css('top')),
                    k:0,
                    firedProject:clickedPosition,
                    parent:this,
                    finalizer: function(state) { state.parent.SelectFinalize(state); }
                };
                state.k = (state.y1 - state.y0) / (state.x1 - state.x0);
                item.data('state',state);
                item.animator(1,Degri.ProjectControl.MakeMove);
            }
        }
    };
    
    this.ExplodeImages = function(initPosition)
    {
        Degri.MergedThumbs = 0;
        // Init
        var p = eval('Degri.Projects.p'+initPosition);
        for(var i=1; i<=8; i++)
        {
            var item = $("<img id='i"+i+"' src='" + p.images[i-1] + "' alt='" + p.name + "' class='jItem' style='top:" + this.positions[initPosition-1].y + "px; left:" + this.positions[initPosition-1].x + "px;'/>");
            this.obj.append(item);

            if(i!=initPosition)
            {
                var state =
                {
                    x0:parseInt(item.css('left')),
                    y0:parseInt(item.css('top')),
                    x1:parseInt(this.positions[i-1].x),
                    y1:parseInt(this.positions[i-1].y),
                    k:0,
                    firedProject:initPosition,
                    parent:this,
                    itemIndex:i,
                    finalizer: function(state) { state.parent.ExplodeFinalize(state); }
                };
                state.k = (state.y1 - state.y0) / (state.x1 - state.x0);
                item.data('state',state);
                item.animator(1,Degri.ProjectControl.MakeMove);
            }
        }
    };
    
    this.SelectFinalize = function(state)
    {
        state.AnimationObject.css("display","none");
        Degri.MergedThumbs++;
        if(Degri.MergedThumbs==7)
        {
            $("#p"+state.firedProject).css("display","none");
            state.parent.ExplodeImages(state.firedProject);
        }
    }
    
    this.ExplodeFinalize = function(state)
    {
        state.AnimationObject.css("left",this.positions[state.itemIndex-1].x);
        state.AnimationObject.css("top",this.positions[state.itemIndex-1].y);
        Degri.MergedThumbs++;
        if(Degri.MergedThumbs==7)
        {
            state.parent.DrawNavControl(state.firedProject);
        }
    }

    this.DrawNavControl = function(firedProject)
    {
        var project = eval('Degri.Projects.p'+firedProject);
        var navTitle = $("<div id='projectNav' style='top:"+this.positions[firedProject-1].navY+"px;left:"+this.positions[firedProject-1].x+"px;'><b>" + project.name + "</b><i>" + project.description + "</i></div>");
        var upControl = $("<div class='arrowControl' style='top:"+(this.positions[firedProject-1].navY-30)+"px;left:"+(this.positions[firedProject-1].x+103)+"px;'><img src='/img/arr-up.png' alt=''/></div>");
        var downControl = $("<div class='arrowControl' style='top:"+(this.positions[firedProject-1].navY+74)+"px;left:"+(this.positions[firedProject-1].x+103)+"px;'><img src='/img/arr-down.png' alt=''/></div>");
        var rightControl = $("<div class='arrowControl' style='top:"+(this.positions[firedProject-1].navY+27)+"px;left:"+(this.positions[firedProject-1].x+234)+"px;'><img src='/img/arr-right.png' alt=''/></div>");
        var leftControl = $("<div class='arrowControl' style='top:"+(this.positions[firedProject-1].navY+27)+"px;left:"+(this.positions[firedProject-1].x-35)+"px;'><img src='/img/arr-left.png' alt=''/></div>");
        this.obj.append(navTitle);
        if(firedProject > 4)
        {
            upControl.bind("click", { p:firedProject-4, obj:this }, this.ItemClick);
            this.obj.append(upControl);
        }
        if(firedProject < 5)
        {
            downControl.bind("click", { p:firedProject+4, obj:this }, this.ItemClick);
            this.obj.append(downControl);
        }
        if(firedProject % 4 != 0)
        {
            rightControl.bind("click", { p:firedProject+1, obj:this }, this.ItemClick);
            this.obj.append(rightControl);
        }
        if(firedProject != 1 && firedProject != 5)
        {
            leftControl.bind("click", { p:firedProject-1, obj:this }, this.ItemClick);
            this.obj.append(leftControl);
        }
    }

};

Degri.ProjectControl.MakeMove = function(AnimationObject,isEnd)
{
    var state = AnimationObject.data('state');
    var step = 7;
    var Continue = true;

    var newX;
    var curX = parseInt(AnimationObject.css('left'));
    var newY;
    var curY = parseInt(AnimationObject.css('top'));
    if (state.x1 > state.x0)
    {
        newX = curX + step;
        if (state.y1 == state.y0)
        {
            newY = curY;
        }
        else
        {
            newY = Math.round(state.k * (newX - state.x0) + state.y0);
        }
        if (newX > state.x1) Continue = false;
    }
    if (state.x1 < state.x0)
    {
        newX = curX - step;
        if (state.y1 == state.y0)
        {
            newY = curY;
        }
        else
        {
            newY = Math.round(state.k * (newX - state.x0) + state.y0);
        }
        if (newX < state.x1) Continue = false;
    }
    if (state.x1 == state.x0)
    {
        newX = curX;
        if (state.y1 < state.y0)
        {
            newY = curY - step;
            if (newY < state.y1) Continue = false;
        }
        else
        {
            newY = curY + step;
            if (newY > state.y1) Continue = false;
        }
    }

    AnimationObject.css("left", newX);
    AnimationObject.css("top", newY);

    if(!Continue)
    {
        state.AnimationObject = AnimationObject;
        state.finalizer(state);
    }
    
    return Continue;
};