var maxTicket = 10;

var seat = new Array();
var category = new Array();
var sector = new Array();


var xposSmall;
var yposSmall;
var SeatOverviewId, SeatDetailId;
var JsonSeatsReady = false;
var JsonCategoryReady = false;
var JsonSectorsReady = false;
var moveToSeatAction = "off";

var JsonReservedSeatsReady = true;
var reservedseat = new Array();

jq(document).ready(function(){

	/* if not matichin html template leave */
	if ( !jq("#ticketing-freeplace").length ) {
		return;
	}

	var planBigW = jq("#VenueImageWidth").attr("value");
	var planBigH = jq("#VenueImageHeight").attr("value");
	if (jq("span.venue").html() == "Sommerarena")
		{
			planBigW = 1326;
			planBigH = 901;
		}
	var planSmallW = 450;
	//alert ("planBigH:"+planBigH+",planBigW:"+planBigW+",planSmallW:"+planSmallW);
	var planSmallH = parseInt((planBigH/planBigW)*planSmallW);
	var planQuot = planBigW/planSmallW;
	var navigator1W = parseInt(planSmallW/planQuot);
	var navigator1H = parseInt(planSmallH/planQuot);

	jq("#mainWindow").css("height", planSmallH);
	//jq("#loadinginfo").css("height", "100%");
	jq("#plan-and-prices").css("background-position", "0 "+planSmallH+"px");
	jq("#navigator1").css("width", navigator1W);
	jq("#navigator1").css("height", navigator1H);
	//alert (planSmallH);

    // method for UTF-8 decoding
    function utfDecode(utftext) {
        var string = "";
        var i = 0;
        var c = c1 = c2 = 0;

        while ( i < utftext.length ) {

            c = utftext.charCodeAt(i);

            if (c < 128) {
                string += String.fromCharCode(c);
                i++;
            }
            else if((c > 191) && (c < 224)) {
                c2 = utftext.charCodeAt(i+1);
                string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
                i += 2;
            }
            else {
                c2 = utftext.charCodeAt(i+1);
                c3 = utftext.charCodeAt(i+2);
                string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
                i += 3;
            }

        }

        return string;
    }



// Json Aufrufe

    var eventid = jq("#eventid").val();
    var subscriptionid = jq("#subscriptionid").val();
    var venueid = jq("#venueid").val();
	var orderid = jq("#orderid").val();
    var portalid = jq("#portalid").val();
	//for ie caching
	var randomnumber = Math.floor(Math.random()*10000000);

	if (orderid != "") { JsonReservedSeatsReady = false; }

	if (typeof venueid != 'undefined')
	{

    jq.getJSON("/"+portalid+"/getEventSeatsDict?eventid="+eventid+"&rn="+randomnumber,
        function(data){
          seat = data.seats;
		  if (JsonReservedSeatsReady == false)
		  {
			  jq.getJSON("/"+portalid+"/getReservedEventSeatsDict?orderid="+orderid+"&eventid="+eventid+"&rn="+randomnumber,
				function(data)
				{
					if (data.seats.length > 0)
					{
						for (var i = 0; i < data.seats.length; i++)
						{
							reservedseat[i] = seat.length + i;
						}
						seat = seat.concat(data.seats);
					}
					JsonReservedSeatsReady == true;
          			JsonSeatsReady = true;
         			if (JsonCategoryReady && JsonSectorsReady) {drawSeats()};
				});
			}
			else
			{
			 JsonSeatsReady = true;
             if (JsonCategoryReady && JsonSectorsReady) {drawSeats(); }
			}

    });
    jq.getJSON("/"+portalid+"/getEventCategoryListDict?eventid="+eventid,
        function(data){
           jq.each(data.cats, function(i,item){
//jq("#nix").append("<li style='color:"+ item.catcolor +"'>" + item.catname + "|" + item.sectorid + "|" + item.price +"</li>");
           if ((typeof category[item.catid] == 'undefined'))
             { category[item.catid] = new Object();
             category[item.catid].catcolor = item.catcolor;
             category[item.catid].price = item.price;
             category[item.catid].catname = item.catname;
             category[item.catid].catid = item.catid;
             }
           });
          drawPriceList();

          JsonCategoryReady = true;
          if (JsonSeatsReady && JsonSectorsReady) { drawSeats(); }

        });
    jq.getJSON("/"+portalid+"/getSectorsDict?venueID="+venueid,
        function(data){
          // jq.each(data.sectors, function(i,item){jq("#nix").append("<tr><td>" + item.sectorid + "</td><td>" + item.name1 + " " + item.name2 + "</td></tr>");});

          //sector = data.sectors;

           jq.each(data.sectors, function(i,item){
 			 sector[item.sectorid] = new Object();
             sector[item.sectorid].sectorid = item.sectorid;
             sector[item.sectorid].name1 = item.name1;
             sector[item.sectorid].name2 = item.name2;
           });

          JsonSectorsReady= true;
          if (JsonSeatsReady && JsonCategoryReady) { drawSeats(); }

        });

     }

 // 0. Teil: Ticketliste anlegen
 for (var i = 0; i < maxTicket; i++) {
 	jq("#TicketList").append("<li id=\"ticket"+i+"\">&nbsp;</li>");
 }
 // 0.b Teil: Preisliste anlegen

function drawPriceList()
	{
 	for (var i = 1; i < (category.length); i++)
		{
		if ((typeof category[i] != 'undefined'))
			{
		 	jq("#pricelist").append("<li><span class=\"category\">"+category[i].catid+"</span><span class=\"categorycolor\" style=\"background-color: "+category[i].catcolor+"\">&nbsp;</span> <span class=\"price\">&euro; "+category[i].price+"</span></li>");
		 	}
	 	}

 	jq("#pricelist").append("<li class=\"reserved\"><span class=\"categorycolor\" style=\"background-color: #fff\">&nbsp;</span> <span class=\"price\">verkauft</span></li>");

	}
 // 0.c Teil: Loading Info


  toggleLoadingInfo = function (status) {
   if (status == 'on')
   	{
	jq("#loadinginfo").slideDown("slow");
	}
	else
	{
	jq("#loadinginfo").slideUp("slow");
	jq("#hint").show();
	}
  }

  // window.setTimeout("toggleLoadingInfo('off')", 3000);



 // 1. Teil: Sitze zeichnen im Uebersichtsplan und Detailplan

function drawSeats() {

  for (var i = 0; i < seat.length; i++) {

	// Plaetze im kleinen Plan muessen fuer Marker-Rechtecke eingezeichnet werden:
	SeatOverviewId = "SeatOverview" + i;
	jq("#overviewseats").append("<li id=\""+SeatOverviewId+"\"> </li>");
	SeatOverviewId = "#" + SeatOverviewId;
	xposSmall = Math.round((parseInt(seat[i].xpos)) / planQuot) -8;
	yposSmall = Math.round((parseInt(seat[i].ypos)) / planQuot) -8;
	jq(SeatOverviewId).css("left",xposSmall);
	jq(SeatOverviewId).css("top", yposSmall);
	//jq(SeatOverviewId).css("background-color", category[seat[i].catid].catcolor);

	SeatDetailId = "SeatDetail" + i;
	jq("#detailseats").append("<li id=\""+SeatDetailId+"\"> </li>");
	SeatDetailId = "#" + SeatDetailId;
	jq(SeatDetailId).css("left", parseInt(seat[i].xpos)-5);
	jq(SeatDetailId).css("top", parseInt(seat[i].ypos)-5);
	//jq(SeatDetailId).css("background-color","#fff");
	jq(SeatDetailId).css("background-color", category[parseInt(seat[i].catid)].catcolor);
	}


	jq("#detailseats li").click(function () {
		var seatIdFullName = jq(this).attr("id");
		var seatId = parseInt(seatIdFullName.replace(/SeatDetail/,""));
		var seatInTickets = false;

		for (var i = 0; i < Tickets.ticket.length; i++)
			{
			if (Tickets.ticket[i] == seatId) {
				seatInTickets = true;
				break;
			}
		}

		if (seatInTickets == true)
			{
			Tickets.removeTicket(seatId);
			}
			else
			{
			if (Tickets.ticket.length == maxTicket)
				{
				alert ("Maximal "+maxTicket+" Tickets pro Bestellvorgang möglich")
				}
				else
				{
				Tickets.addTicket(seatId);
				}
			}

	});
	jq("#detailseats li").hover(
		function () {
		var seatIdFullName = jq(this).attr("id");
		var seatId = parseInt(seatIdFullName.replace(/SeatDetail/,""));
		jq(this).attr("title", utfDecode(sector[parseInt(seat[seatId].sectorid)].name1)+" "+utfDecode(sector[parseInt(seat[seatId].sectorid)].name2)+", Reihe "+seat[seatId].row+", Platz "+seat[seatId].seatnr);
	 	},
		function () {
		}
	 );

	// draw reserved Tickets
	if (orderid != "")
	 {
		 for (var i = 0; i < reservedseat.length; i++)
		{
			Tickets.addTicket(reservedseat[i]);
		}
	 }

   toggleLoadingInfo('off');
   jq("#navigator1").show();

}

  // 2. Teil: Navigatorrechteck beweglich machen

	jq("#hint").text("Bitte wählen Sie einen Bereich im Saalplan");

	var overviewPosition = jq("#overview");
	var offset = overviewPosition.offset(); // offset is a jquery function
	var navigator1maxxPos = planSmallW - navigator1W;
	var navigator1maxyPos = planSmallH - navigator1H;

	jq("#overview").mousemove(function(e) {
		 var x = Math.round(e.pageX-offset.left-(navigator1W/2));
		 var y = Math.round(e.pageY-offset.top-(navigator1H/2));

		if ( x>=0 && y>=0 && x<navigator1maxxPos && y<navigator1maxyPos) {
			jq("#navigator1").css("left",x);
			jq("#navigator1").css("top",y);
		}

	});


	// 3. Teil: Clickaktion auf Uebersichtsplan (wegblenden, grosses Bild positionieren)

	jq("#overview").click(function (e) {
     	jq(this).hide();
		// toggleLoadingInfo('on');

		var x = - Math.round(((e.pageX-offset.left) * planQuot) - planSmallW/2);
		var y = - Math.round(((e.pageY-offset.top) * planQuot) - planSmallH/2);
		//(alert ("x:"+x+",y:"+y);

		if (x>0) {x=0}
		if (y>0) {y=0}
		if (x< -(planBigW-planSmallW)) {x= -(planBigW-planSmallW)}
		if (y< -(planBigH-planSmallH)) {y= -(planBigH-planSmallH)}

		jq("#detail").css("left",x);
		jq("#detail").css("top",y);
	  jq("#detail").show();
	  jq("#hint").text("Bitte wählen Sie Ihre Plätze");
	  jq("#overviewButton").show();
	  //window.setTimeout("toggleLoadingInfo('off')", 3000);
    });

	jq("#overviewButton").click(function () {
		jq("#detail").hide();
		jq("#overviewButton").hide();
		jq("#overview").show();
		jq("#hint").text("Bitte wählen Sie einen Bereich im Saalplan");
		return false;

	});


	// 4. Teil: Ticketwahl
	// Objekt Tickets hat Array "ticket" mit den gewaehlten Tickets und Methoden addTicket und removeTicket

	var Tickets = new Object();

	Tickets.ticket = new Array();

	Tickets.addTicket = function (seatId) {
		this.ticket[this.ticket.length] = seatId;
		jq("#SeatOverview"+seatId).addClass("marked");
		jq("#SeatDetail"+seatId).addClass("marked");
		drawTicketList ();
		}

	Tickets.removeTicket = function (seatId) {
		if (jQuery.inArray(seatId, reservedseat) == -1)
		{
			for (var i = 0; i < Tickets.ticket.length; i++)
				{
				if (Tickets.ticket[i] == seatId) {
					Tickets.ticket.splice(i, 1);
					}
				}
			jq("#SeatOverview"+seatId).removeClass("marked");
			jq("#SeatDetail"+seatId).removeClass("marked");
			jq("#SeatDetail"+seatId).removeClass("showme");
			drawTicketList ();
		}
		else
		{
			if (confirm("Wollen Sie den Platz wirklich aus dem Warenkorb entfernen?"))
			{
				jq.getJSON("/"+portalid+"/removeSeatJSON?seatid="+seat[seatId].seatid+"&subscriptionid="+subscriptionid+"&eventid="+eventid+"&orderid="+orderid,
        		function(data){
					for (var i = 0; i < Tickets.ticket.length; i++)
					{
					if (Tickets.ticket[i] == seatId) {
						Tickets.ticket.splice(i, 1);
						}
					}
					for (var i = 0; i < reservedseat.length; i++)
					{
					if (reservedseat[i] == seatId) {
						reservedseat.splice(i, 1);
						}
					}

					jq("#SeatOverview"+seatId).removeClass("marked");
					jq("#SeatDetail"+seatId).removeClass("marked");
					jq("#SeatDetail"+seatId).removeClass("showme");
					drawTicketList ();
				});
			}
		}
		}

	Tickets.moveToSeat = function (seatId) {
		moveToSeatAction = "on";
		jq("#overview").hide();
		jq("#detail").show();
		jq("#overviewButton").show();
		var x = Math.round(-seat[seatId].xpos + planSmallW/2 -5);
		var y = Math.round(-seat[seatId].ypos + planSmallH/2 -5);

		if (x>0) {x=0}
		if (y>0) {y=0}
		if (x< -(planBigW-planSmallW)) {x= -(planBigW-planSmallW)}
		if (y< -(planBigH-planSmallH)) {y= -(planBigH-planSmallH)}

		jq("#SeatDetail"+seatId).removeClass("marked");
		jq("#SeatDetail"+seatId).addClass("showme");


		jq("#detail").animate({
		top: y,
		left: x
		}, 1700, function(){
		jq("#SeatDetail"+seatId).removeClass("showme");
		jq("#SeatDetail"+seatId).addClass("marked");
		moveToSeatAction = "off";
		}
		);

		jq("#navigator1").css("left",Math.round((parseInt(seat[seatId].xpos)/3.842)-(117/2)));
		jq("#navigator1").css("top",Math.round((parseInt(seat[seatId].ypos)/3.846)-(64/2)));

		}


	// 5. Teil Ticketliste zeichnen und Werte in hidden feld schreiben, Submit button ein/ausblenden

	drawTicketList = function () {
		jq("#TicketList li").html("&nbsp;"); // delete all entries
		jq("#TicketList li").removeClass("ticket");
		var realSeatid = new Array();
        var url = jq("#url").val();    
		for (var i = 0; i < Tickets.ticket.length; i++) {
		var seatId = Tickets.ticket[i];
		jq("#ticket"+i).addClass("ticket");
		jq("#ticket"+i).html("<span class=\"category\">&nbsp</span><span class=\"seatinfo\" title=\"Sitz zeigen\" id=\"showSeatId"+seatId+"\">"+utfDecode(sector[parseInt(seat[seatId].sectorid)].name1)+" "+utfDecode(sector[parseInt(seat[seatId].sectorid)].name2)+", Reihe "+seat[seatId].row+", Platz "+seat[seatId].seatnr+"</span><a href=\""+url+"\" class=\"delete\" id=\"deleteSeatId"+seatId+"\" title=\"Ticket entfernen\">Entfernen</a>" );
		jq("#ticket"+i+" span.category").css("backgroundColor", category[parseInt(seat[seatId].catid)].catcolor);

		if (jQuery.inArray(seatId, reservedseat) == -1)
		{
			realSeatid[realSeatid.length] = seat[seatId].seatid;
		}

		}

		jq("span.seatinfo").hover(
				function () {
				jq(this).parent("li").addClass("mouseover");
	 			},
				function () {
				jq(this).parent("li").removeClass("mouseover");
				}
		);

		jq("span.seatinfo").click(function () {
			var showSeatIdFullName = jq(this).attr("id");
			var showSeatId = parseInt(showSeatIdFullName.replace(/showSeatId/,""));
			Tickets.moveToSeat(showSeatId);
			});

		jq("a.delete").click(function () {
			if (moveToSeatAction == "off")
			{
			var deleteSeatIdFullName = jq(this).attr("id");
			var deleteSeatId = parseInt(deleteSeatIdFullName.replace(/deleteSeatId/,""));
			Tickets.removeTicket(deleteSeatId);
			return false;
			}
			});

		jq("#ticketfield").attr("value",realSeatid.toString()); // Ticketliste in hidden field schreiben

		if (Tickets.ticket.length == 0)
		 {
		 jq("#submitbutton").removeClass("active");
		 jq("#submitbutton").attr("disabled","disabled");
		 }
		 else
		 {
		 jq("#submitbutton").addClass("active");
		 jq("#submitbutton").attr("disabled","");
		 }


		}

// 6. Teil Submit der Daten, Errorhandling

jq("#submitbutton").click(function () {

    var ticketfield = jq("#ticketfield").val();
    var subscriptionid = jq("#subscriptionid").val();
 
    jq("#spinner2").show();
	jq("#submitbutton").removeClass("active");
	jq("#submitbutton").attr("disabled","disabled");
	if (ticketfield != "")
	{
        jq.getJSON("/"+portalid+"/orderseats?eventid="+eventid+"&subscriptionid="+subscriptionid+"&venueid="+venueid+"&ticketfield="+ticketfield,
        function(data){
          if (data.status == "ok")
          {
          location.href="basket.html";
          }
          else
          {
          jq("#spinner2").hide();
          jq("#error p").html(utfDecode(data.errmsg));
          jq("#error").show();
          jq("#error").click(function () {
			jq("#error").hide();
			jq("#submitbutton").addClass("active");
		    jq("#submitbutton").attr("disabled","");
			});
          }
        });
	}
	else
	{
		location.href="basket.html";
	}
    return false;

});





 });