//init
$(function()
    {
        //defines
        var baseServerAddr = "http://www.jugenedit.com/";
        var obstaclesServerAddr = baseServerAddr + "obstacles/";

        //shared vars
        var canvas = $("#canvas");
        var obstacles = $("#obstacles");
        var reset = $("#reset");
        var save = $("#save");
        var levelsDiv = $("sidebar-levels");
		var levelID;
        var levelName;
        var levelsCount;


        $("#loaderimage").ajaxStart(function(){
           $(this).css("visibility", "visible");
         });

        $("#loaderimage").ajaxStop(function(){
           $(this).css("visibility", "hidden");
         });


        $("#loginbutton").bind("click",onLoginButtonClick);
        var preloadimg = new Image();
        preloadimg.src = baseServerAddr + "images/ball.png";
        var preloadimg2 = new Image();
        preloadimg2.src = baseServerAddr + "images/playerBall.png";
        $.get(baseServerAddr+"get_obstacles.php", {}, onObstaclePreloadCompleted);
        
        ////////////////////////////////////////////////////////////////////////
        ////////// buttons callbacks
        ////////////////////////////////////////////////////////////////////////
        function onLoginButtonClick()
        {
            //TODO: blah blah
            //$("#sidebar-levels").append("<p>onLoginButtonClick</p>");
            
            //if($("#loginbox").attr("value").length==10)
            //{
                var url = baseServerAddr+"login.php?login="+$("#loginbox").attr("value");
                $.get(url,{},onLoggedIn);
            //}            
        }

        function onNewLevelButton()
        {
            //TODO: blah blah
            //$("#sidebar-buttons").append("<p>onNewLevelButton</p>");
            var url = baseServerAddr+"new_level.php";
            $(".ball", canvas).remove();
            $(".obstacle", canvas).remove();
            $.get(url,{},levelAdded);
        }

        function onSaveButton()
        {
            //foreach balls
			var balls = [];
			$(".ball", canvas).each(function(index, ball){
				balls.push({
					left: parseInt($(ball).css("left")),
					top: parseInt($(ball).css("top"))
				});
			});
			//foreach obstacles
			var obstacles = [];
			$(".obstacle", canvas).each(function(index, obstacle){
				var image = $(obstacle).css("backgroundImage");
				var start = 4 + obstaclesServerAddr.length;
				var end = image.length - start - 1;
				image = image.substr(start, end)
				obstacles.push({
					left: parseInt($(obstacle).css("left")),
					top: parseInt($(obstacle).css("top")),
					width: parseInt($(obstacle).css("width")),
					height: parseInt($(obstacle).css("height")),
					image: image
				});
			});
			//player ball
			var player_ball_canvas = $(".player_ball", canvas);
			var player_ball = {
				left: parseInt(player_ball_canvas.css("left")),
				top: parseInt(player_ball_canvas.css("top"))
			};
			//level options
			var level_options = {
				level_id: levelID,
				level_name: levelName,
				time_limit: 0,
				turn: 0
			};
			//save
			$.post(baseServerAddr+"save_level.php", {balls: JSON.stringify(balls), obstacles: JSON.stringify(obstacles), player_ball: JSON.stringify(player_ball), level_options: JSON.stringify(level_options)}, saveCompleted);
        }
		
        function onResetLevelButton()
        {
            $(".ball", canvas).remove();
            $(".obstacle", canvas).remove();
        }

        function onLevelMoveUpButton(data)
        {
            $.get(baseServerAddr+"move_level.php?to=1&levelid="+data.data.id, onLevelManageCompleted);
        }

        function onLevelMoveDownButton(data)
        {
            $.get(baseServerAddr+"move_level.php?to=2&levelid="+data.data.id, onLevelManageCompleted);
        }

        function onLevelDeleteButton(data)
        {
            $.get(baseServerAddr+"delete_level.php?levelid="+data.data.id, onLevelManageCompleted);
        }
        
        function onLevelSelected(selectedLevelData)
        {
            $(".ball", canvas).remove();
            $(".obstacle", canvas).remove();
            levelID =selectedLevelData.data.levelid;
            levelName =selectedLevelData.data.name;
            //$.get(baseServerAddr+"load_level.php?levelid="+levelID, loadCompleted);
            $.get(baseServerAddr+"get_levels.php",{},onLevelsLoaded);
			//$.get(baseServerAddr+"get_obstacles.php", {}, onObstaclesLoaded);
        }

        function onAddRedBall()
        {
            var image = new Image();
			image.src = baseServerAddr + "images/ball.png";
			renderCanvasBall(image, 0, 0);
        }

        ////////////////////////////////////////////////////////////////////////
        ////////// ajax stuff
        ////////////////////////////////////////////////////////////////////////
        function onLoggedIn(data)
        {
            var obj = JSON.parse(data);
            if(obj)
            {
                levelID=null;
                levelName=null;
                canvas.html("");
                createSidebarButtons();
                $(".ball", canvas).remove();
                $(".obstacle", canvas).remove();
                $.get(baseServerAddr+"get_levels.php",{},onLevelsLoaded);
				$.get(baseServerAddr+"get_obstacles.php", {}, onObstaclesLoaded);

                renderCanvasPlayerBall();
            }
            else
            {
                //TODO: show error there
            }
        }

		function saveCompleted(data)
		{
			alert("Package saved");
		}
        
        function loadCompleted(data)
        {
            //parse data
            if(data.length > 0)
            {

                var entities = data.split("\n");
                for(var i = 0, size = entities.length; i < size; i++)
                {
                    var entity = entities[i];
                    var pos = entity.indexOf(":");
                    var property = entity.substring(0, pos);
                    var value = entity.substring(pos+1);
                    //if name
                    if(property == "name")
                    {
                        $("#level_name").val(value);
                    }
                    //if time
                    else if(property == "time")
                    {
                    }
                    //if turn
                    else if(property == "turn")
                    {
                    }
                    //if player
                    else if(property == "player")
                    {
                        value = value.split(";");
                        $(".player_ball").css({"left": parseInt(value[0]), "top": parseInt(value[1])});
                    }
                    //if shape
                    else if(property == "shape")
                    {
                        value = value.split(";");
                        var image = new Image();
                        image.src = baseServerAddr + "obstacles/" + value[2];
                        renderCanvasObstacle(image, value[0], value[1]);
                    }
                    //if ball
                    else if(property == "ball")
                    {
                        value = value.split(";");
                        var img = new Image();
                        img.src = baseServerAddr + "images/ball.png";
                        
                        renderCanvasBall(img, parseInt(value[0]),parseInt(value[1]));
                        //renderCanvasBall(img, value[0], value[1]);
                    }
                }
            }
        }
        
        function onLevelsLoaded(data)
        {
            var obj = JSON.parse(data);
            $("#sidebar-levels").html("");

            levelsCount = obj.length;
            $(obj).each(function(index, lvlInfo)
            {
                if(levelID==null)
                {
                    levelID=lvlInfo.id;
                    levelName = lvlInfo.name;
                }
                if(lvlInfo.id==levelID)
                {
                    createLevelRow(lvlInfo.name,lvlInfo.id,true);
                    $.get(baseServerAddr+"load_level.php?levelid="+levelID, loadCompleted);
                }
                else
                {
                    createLevelRow(lvlInfo.name,lvlInfo.id,false);
                }
            });
        }
		
		function onObstaclesLoaded(data)
		{
			//foreach obstacle
			var obj = JSON.parse(data);
			obstacles.empty();
			$(obj).each(function(index, obstacle)
            {
				//preload obstacle image
				var image = new Image();
				image.src = obstaclesServerAddr + obstacle;
				//new obstacle DOM element
				var new_obstacle = $('<li class="obstacle"></li>');
				new_obstacle.css({
					"width": image.width+'px',
					"height": image.height+'px',
					//"backgroundImage": "url("+image.src+")",
					"cursor": "pointer",
					"marginTop": (95 - parseInt(image.height/2)) + "px"
				});
                
				//make it clickable
                new_obstacle.append(image);
				new_obstacle.click(function(){
					//render obstacle
					renderCanvasObstacle(image, 0, 0);
				});
				obstacles.append(new_obstacle);
			});
			//make obstacles carousel
            //obstacles.jcarouselLite();
			obstacles.jcarousel();
		}

		function onObstaclePreloadCompleted(data)
		{
			//foreach obstacle
			var obj = JSON.parse(data);
			$(obj).each(function(index, obstacle)
            {
				//preload obstacle image
				var image = new Image();
				image.src = obstaclesServerAddr + obstacle;
			});
		}
        
        function levelAdded(data)
        {
            var obj = JSON.parse(data);
            if(obj)
            {
                canvas.html("");
                $.get(baseServerAddr+"get_levels.php",{},onLevelsLoaded);
				//$.get(baseServerAddr+"get_obstacles.php", {}, onObstaclesLoaded);
				renderCanvasPlayerBall();
            }
        }

        function onLevelManageCompleted(data)
        {
            $(".ball", canvas).remove();
            $(".obstacle", canvas).remove();
            $.get(baseServerAddr+"get_levels.php",{},onLevelsLoaded);
        }
        
        ////////////////////////////////////////////////////////////////////////
        ////////// ui stuff
        ////////////////////////////////////////////////////////////////////////

        function createSidebarButtons()
        {
            //var savebtn = $("<button>").append( $("<img>").attr("src", "./images/newlevelicon.png"));
            var newbtn = $("<img alt='New level'>").attr("src", "./images/newlevelicon.png");
            var savebtn = $("<img alt='Save level'>").attr("src", "./images/saveicon.png");
            var resetbtn = $("<img alt='Reset level'>").attr("src", "./images/reseticon.png");
            var addballbtn = $("<img alt='Add ball'>").attr("src", "./images/ballbutton.png");
            
            newbtn.bind("click", onNewLevelButton);
            savebtn.bind("click", onSaveButton);
            resetbtn.bind("click", onResetLevelButton);
            addballbtn.bind("click", onAddRedBall);

            newbtn.css("margin-left", "25px");
            savebtn.css("margin-left", "25px");
            resetbtn.css("margin-left", "25px");
            addballbtn.css("margin-left", "25px");


            $("#sidebar-buttons").append(addballbtn);
            newbtn.insertAfter(addballbtn);
            savebtn.insertAfter(newbtn);
            resetbtn.insertAfter(savebtn);
        }

        function createLevelRow(levelName,levelId,isCurrent)
        {
            var row = $("<div class='level_selected'></div>");
            var innerdiv = $("<div class='level_selected_text'></div>");
            if(isCurrent)
            {
                innerdiv.append(levelName);
                row.append(innerdiv);
            }
            else
            {
                var levelHref = $("<a href='#xxx'>").html(levelName);
                levelHref.bind("click", {levelid:levelId,name:levelName, sender:levelHref}, onLevelSelected);
                innerdiv.append(levelHref);
                row.append(innerdiv);
            }
                        
            var btUp = $("<img class='bt_moveup' src='images/bt_up.png'/>");
            var btDown = $("<img class='bt_moveup' src='images/bt_down.png'/>");
            
            btUp.bind("click",{id:levelId,name:levelName},onLevelMoveUpButton);
            btDown.bind("click",{id:levelId,name:levelName},onLevelMoveDownButton);
            

            //btUp.css("margin-left","40px");

            row.append(btUp);
            row.append(btDown);
            if(levelsCount>1)
            {
                var btDelete = $("<img class='bt_delete' src='images/bt_delete.png'/>");
                btDelete.bind("click",{id:levelId,name:levelName},onLevelDeleteButton);
                row.append(btDelete);
            }

            $("#sidebar-levels").append(row);
        }

        function renderCanvasObstacle(image, left, top)
		{
			//new canvas obstacle DOM element
			var new_canvas_obstacle = $('<div class="obstacle"></div>');
			new_canvas_obstacle.css({
				"position": "absolute",
				"width": image.width+'px',
				"height": image.height+'px',
				"left": left+'px',
				"top": top+'px',
				"backgroundImage": "url("+image.src+")",
				"cursor": "pointer"
			});
			//make obstacle draggable
			new_canvas_obstacle.draggable({
				ghosting: false,
				containment: canvas
			});
			//make obstacle deletable
			new_canvas_obstacle.bind("dblclick", function(){
				$(this).remove();
			});
			//add to canvas
			canvas.append(new_canvas_obstacle);
		}

		function renderCanvasPlayerBall()
		{
			//preload ball image
			var image = new Image();
			image.src = baseServerAddr + "images/playerBall.png";
			//new canvas ball DOM element
			var new_canvas_ball = $('<div class="player_ball"></div>');
			new_canvas_ball.css({
				"position": "absolute",
				"width": image.width,
				"height": image.height,
				"left": 185,
				"top": 135,
				"backgroundImage": "url("+image.src+")",
				"cursor": "pointer"
			});
			//make ball draggable
			new_canvas_ball.draggable({
				ghosting: false,
				containment: canvas
			});
			//add to canvas
			canvas.append(new_canvas_ball);
		}

		function renderCanvasBall(image, left, top)
		{
			//new canvas ball DOM element
			var new_ball = $('<div class="ball"></div>');
			new_ball.css({
				"position": "absolute",
				"width": image.width,
				"height": image.height,
				"left": left,
				"top": top,
				"backgroundImage": "url("+image.src+")",
				"cursor": "pointer"
			});
			//make ball draggable
			new_ball.draggable({
				ghosting: false,
				containment: canvas
			});
			//make ball deletable
			new_ball.bind("dblclick", function(){
				$(this).remove();
			});
			//add to canvas
			canvas.append(new_ball);
		}
    }
);