diff --git a/registration-system/index.php b/registration-system/index.php
index 338043cb35949362863e26f9a1b017a40be9fdc9..258b29a75ae27a33f50dc54d189a42643641c5f1 100644
--- a/registration-system/index.php
+++ b/registration-system/index.php
@@ -249,9 +249,15 @@ function index_show_formular($fid, $bid = NULL, $bachelor = NULL){
{
echo '</noscript>';
echo '<h2>Anmeldeformular</h2>';
- echo '<div style="margin:0 auto; position:relative; width:900px; height:500px; overflow:hidden"><div id="storybox"></div>';
- echo '<div id="story_umleitung" style="position:absolute; left:0px; bottom:-70px; background:#f0f; cursor:pointer; background:url(view/graphics/story/umleitung.png); width:120px; height: 70px" onclick="story.next(true)"> </div></div>';
- echo '<div style="text-align:center;font-weight:bold"><a style="float:none;margin:0 auto;" href="'.$_SERVER['REQUEST_URI'].'&noscript">Seite funktioniert nicht / zu bunt?</a></div>';
+ echo<<<END
+ <div id="storyhead"></div>
+ <div id="storycanvas">
+ <div id="storybox"></div>
+ <div id="story_umleitung" style="position:absolute; left:0px; bottom:-70px; background:#f0f; cursor:pointer; background:url(view/graphics/story/umleitung.png); width:120px; height: 70px" onclick="story.next(true)"> </div>
+ </div>
+ <div style="text-align:center;font-weight:bold"><a style="float:none;margin:0 auto;"
+END;
+ echo ' href="'.$_SERVER['REQUEST_URI'].'&noscript">Seite funktioniert nicht / zu bunt?</a></div>';
}
}
@@ -396,4 +402,4 @@ function index_show_signupTable_destroyTypes($anabtyp){
if(array_search($anabtyp, $config_reisearten)>=2)
return $config_reisearten_destroyed[array_rand($config_reisearten_destroyed)];
return $anabtyp;
-}
\ No newline at end of file
+}
diff --git a/registration-system/other/story_eat.svg b/registration-system/other/story_eat.svg
index c7103695b16fcb3c9b9975e00af6466cc7e60d3c..4fb14e8ea0ef8fdbe43d525ff30af88510717c80 100644
Binary files a/registration-system/other/story_eat.svg and b/registration-system/other/story_eat.svg differ
diff --git a/registration-system/other/story_travelBegin.svg b/registration-system/other/story_travelBegin.svg
index 5aa98324cef75557caafb32dcc86b1b5a20bd44c..f37331049387300e1ea724664556b79e3948ba1e 100644
Binary files a/registration-system/other/story_travelBegin.svg and b/registration-system/other/story_travelBegin.svg differ
diff --git a/registration-system/view/graphics/story/eat.png b/registration-system/view/graphics/story/eat.png
index cb033a534c879d83d45ea9a2757b6391103a2e56..c71116d83f0ec244a55b2161a8c5849c478697a4 100644
Binary files a/registration-system/view/graphics/story/eat.png and b/registration-system/view/graphics/story/eat.png differ
diff --git a/registration-system/view/graphics/story/ticket.png b/registration-system/view/graphics/story/ticket.png
index 2f6b2107e46cb64704d77818c78a16e398385ba7..32f25357dffe201e3610e5d0ac1d4210bd9948ea 100644
Binary files a/registration-system/view/graphics/story/ticket.png and b/registration-system/view/graphics/story/ticket.png differ
diff --git a/registration-system/view/js/story.js b/registration-system/view/js/story.js
index 490411192afbb80d6f9770895b764476186dee05..5f245c02874ec89503c4ac9c2beb19350175d78d 100644
--- a/registration-system/view/js/story.js
+++ b/registration-system/view/js/story.js
@@ -1,34 +1,17 @@
-var debug = true;
+var debug = false;
var story;
-var form_variables = {};
-function storyImage(filename)
-{
- return $('<img src="view/graphics/story/' + filename + '" alt="" />');
-}
-function storyImageDiv(filename)
-{
- return $('<div style="position:absolute; width:900px; height:500px; background: url(view/graphics/story/'+filename+');"></div>');
- addFormText(bell, "eMail", "mehl", 150, 215);
-}
-
-function addFormText(parentNode, label, fieldName, x, y)
-{
- var form_label = $('<div>'+label+':</div>');
- var form = $('<input name="'+fieldName+'"/>');
- form_label.css({position:'absolute', top:y+'px',left:x+'px'});
- form.css({position:'absolute', top:(y+20)+'px',left:x+'px'});
- parentNode.append(form_label);
- parentNode.append(form);
-}
-
-function Story(_storybox)
+function Story(_storyhead, _storycanvas, _storybox)
{
+ this.storyhead = _storyhead;
+ this.storycanvas = _storycanvas;
this.storybox = _storybox;
this.umleitung = $('#story_umleitung');
this.state = -2;
+ this.form_variables = {};
+
this.basicData = null;
this.travelStart = null;
this.eat = null;
@@ -37,6 +20,8 @@ function Story(_storybox)
}
Story.prototype.next = function(bGoBack)
{
+ var self = this;
+
var previousState = this.state;
if (!bGoBack)
this.state += 1;
@@ -45,19 +30,36 @@ Story.prototype.next = function(bGoBack)
{
case -1:
this.initBeginButton();
+ this.initBasicData();
+ this.storycanvas.animate({height:0}, 0);
break;
case 0:
if (previousState == -1)
{
- this.storybox.children().remove();
+ this.storyhead.children().remove();
+ if (debug)
+ this.storyhead.append('(debug) <div style="cursor:pointer; text-decoration: underline" onclick="story.next()">NEXT</a>');
+
if (debug)
- this.storybox.append('(debug) <div style="cursor:pointer; text-decoration: underline" onclick="story.next()">NEXT</a>');
+ {
+ this.storycanvas.stop(true, true).animate({height:'500px'}, 0);
+ this.initBasicDataAnimation();
+ }
+ else
+ {
+ this.storycanvas.stop(true, true).animate({height:'500px'}, {duration: 200, complete: function()
+ {
+ self.initBasicDataAnimation();
+ }});
+ }
}
- this.initBasicData();
break;
case 1:
this.initTravelStart();
- this.travelStart.animate({left:bGoBack?'900px':'0px'}, 1000);
+ this.travelStart.animate({left:bGoBack?'900px':'0px'}, {duration: 1000, complete: function()
+ {
+ self.initTravelStartAnimation();
+ }});
this.basicData.animate({left:bGoBack?'0px':'-900px'}, 1000);
break;
case 2:
@@ -94,73 +96,180 @@ Story.prototype.next = function(bGoBack)
}
Story.prototype.initBeginButton = function()
{
- this.storybox.append('<div style="cursor:pointer; text-decoration: underline" onclick="story.next()">Anmeldung starten (Story mode)</a>');
+ this.storyhead.append('<div style="cursor:pointer; text-decoration: underline" onclick="story.next()">Anmeldung starten (Story mode)</a>');
+}
+Story.prototype.initTravelStartAnimation = function()
+{
+ this.travelStartTicket.fadeIn(debug ? 0 : 1000);
}
Story.prototype.initTravelStart = function()
{
if (this.travelStart) return;
- this.travelStart = storyImageDiv('travelBegin.png');
+ this.travelStart = this.storyImageDiv('travelBegin.png');
this.travelStart.animate({left:'900px'}, 0);
this.storybox.append(this.travelStart);
+
+ this.travelStartTicket = this.storyImageDiv('ticket.png');
+ this.travelStartTicket.css({left: '560px', top: '100px', width: '329px', height: '161px'});
+ this.travelStart.append(this.travelStartTicket);
+ this.travelStartTicket.fadeOut(0);
+
+ this.addTicketTitle(this.travelStartTicket, "Anreise");
+ this.travelStartTicketButton = this.addTicketButton(this.travelStartTicket, "story.next()");
+ this.travelStartTicketButton.mouseenter(function(event) {
+ $(this).stop(true, true).effect("highlight");
+ });
+
+ this.travelStartTypeButtons = this.addTravelTypeButtons(this.travelStart);
+}
+Story.prototype.addTravelTypeButtons = function(page)
+{
+ var buttons =
+ {
+ car:
+ $('<div style="position: absolute; border: 1px solid; left: 23px; top: 222px; width: 129px; height: 87px; cursor: pointer;"> </div>'),
+ bike:
+ $('<div style="position: absolute; border: 1px solid; left: 177px; top: 366px; width: 90px; height: 73px; cursor: pointer;"> </div>'),
+ oeffi:
+ $('<div style="position: absolute; border: 1px solid; left: 316px; top: 192px; width: 84px; height: 90px; cursor: pointer;"> </div>'),
+ camel:
+ $('<div style="position: absolute; border: 1px solid; left: 461px; top: 114px; width: 78px; height: 71px; cursor: pointer;"> </div>')
+ };
+
+ for (var i in buttons)
+ {
+ var button = buttons[i];
+ page.append(button);
+ button.mouseenter(function(event) {
+ $(this).stop(true, true).effect("highlight");
+ });
+ }
+
+ return buttons;
+}
+Story.prototype.addTicketTitle = function(ticket, title)
+{
+ ticket.append('<div style="position: absolute; left: 55px; top: 15px;">' + title + '</div>');
+}
+Story.prototype.addTicketButton = function(ticket, funcstring)
+{
+ var newButton = $('<div style="position: absolute; left: 249px; top: 125px; width: 27px; height: 27px; cursor: pointer;" onclick="' + funcstring + '"> </div>');
+ ticket.append(newButton);
+ return newButton;
}
Story.prototype.initTravelEnd = function()
{
if (this.travelEnd) return;
- this.travelEnd = storyImageDiv('travelBegin.png');
+ this.travelEnd = this.storyImageDiv('travelBegin.png');
this.travelEnd.animate({left:'-900px'}, 0);
this.storybox.append(this.travelEnd);
}
Story.prototype.initEat = function()
{
if (this.eat) return;
- this.eat = storyImageDiv('eat.png');
+ this.eat = this.storyImageDiv('eat.png');
this.eat.animate({left:'900px'}, 0);
this.storybox.append(this.eat);
+
+ this.foodTypeButtons = this.addFoodTypeButtons(this.eat);
+
+ this.eatContinueButton = $('<div style="position: absolute; left: 799px; top: 412px; width: 32px; height: 27px; cursor: pointer;" onclick="story.next()"> </div>');
+ this.eatContinueButton.mouseenter(function(event) {
+ $(this).stop(true, true).effect("highlight");
+ });
+ this.eat.append(this.eatContinueButton);
+}
+Story.prototype.addFoodTypeButtons = function(page)
+{
+ var buttons =
+ {
+ cow:
+ $('<div style="position: absolute; border: 1px solid; left: 236px; top: 139px; width: 129px; height: 93px; cursor: pointer;"> </div>'),
+ cheese:
+ $('<div style="position: absolute; border: 1px solid; left: 446px; top: 236px; width: 57px; height: 56px; cursor: pointer;"> </div>'),
+ wheat:
+ $('<div style="position: absolute; border: 1px solid; left: 604px; top: 214px; width: 112px; height: 127px; cursor: pointer;"> </div>')
+ };
+
+ for (var i in buttons)
+ {
+ var button = buttons[i];
+ page.append(button);
+ button.mouseenter(function(event) {
+ $(this).stop(true, true).effect("highlight");
+ });
+ }
+
+ return buttons;
}
Story.prototype.initAge = function()
{
if (this.age) return;
- this.age = storyImageDiv('age.png');
+ this.age = this.storyImageDiv('age.png');
this.age.animate({left:'900px'}, 0);
this.storybox.append(this.age);
}
+Story.prototype.initBasicDataAnimation = function()
+{
+ var self = this;
+ setTimeout(function() {
+ self.bd_bell.fadeIn(debug ? 0 : 1200);
+ self.bd_orig_bell.effect("transfer", {to: self.bd_bell}, 800);
+ }, debug ? 0 : 600);
+}
Story.prototype.initBasicData = function()
{
if (this.basicData) return;
- this.basicData = storyImageDiv('begin.png');
+ this.basicData = this.storyImageDiv('begin.png');
this.storybox.append(this.basicData);
- var bell = storyImageDiv('bell.png');
- bell.css({position: 'relative', top: '20px', left: '20px', width: '419px', height: '438px'});
- this.basicData.append(bell);
- if (!debug)
- bell.fadeOut(0);
-
- addFormText(bell, "Vorname", "forname", 150, 60);
- addFormText(bell, "Nachname", "name", 150, 140);
- addFormText(bell, "Anzeigename", "anzeig", 150, 215);
- addFormText(bell, "eMail", "mehl", 150, 290);
- bell.append($('<div style="position:absolute;top:380px;left:120px">Bitte klingeln, wenn fertig.</div>'))
-
- var btn_continue = $('<div style="width:60px;height:67px;position:absolute;top:48px;left:48px;cursor:pointer;" onclick="story.next();" />');
- bell.append(btn_continue);
- btn_continue.mouseenter(function(event) {
- $(this).effect("highlight");
+ this.bd_bell = this.storyImageDiv('bell.png');
+ this.bd_bell.css({position: 'relative', top: '20px', left: '20px', width: '419px', height: '438px'});
+ this.basicData.append(this.bd_bell);
+ this.bd_bell.fadeOut(0);
+
+ this.addFormText(this.bd_bell, "Vorname", "forname", 150, 60);
+ this.addFormText(this.bd_bell, "Nachname", "name", 150, 140);
+ this.addFormText(this.bd_bell, "Anzeigename", "anzeig", 150, 215);
+ this.addFormText(this.bd_bell, "eMail", "mehl", 150, 290);
+ this.bd_bell.append($('<div style="position:absolute;top:380px;left:120px">Bitte klingeln, wenn fertig.</div>'))
+
+ this.bd_btn_continue = $('<div style="width:60px;height:67px;position:absolute;top:48px;left:48px;cursor:pointer;" onclick="story.next();" />');
+ this.bd_bell.append(this.bd_btn_continue);
+ this.bd_btn_continue.mouseenter(function(event) {
+ $(this).stop(true, true).effect("highlight");
});
- var orig_bell = $('<div style="width:3px;height:3px;position:absolute;left:633px;top:193px" />');
- this.basicData.append(orig_bell);
- if (!debug)
- setTimeout(function() {
- bell.fadeIn(1200);
- orig_bell.effect("transfer", {to: bell}, 800);
- }, 600);
+ this.bd_orig_bell = $('<div style="width:3px;height:3px;position:absolute;left:633px;top:193px" />');
+ this.basicData.append(this.bd_orig_bell);
}
Story.prototype.begin = function()
{
this.next();
}
+Story.prototype.storyImage = function(filename)
+{
+ return $('<img src="view/graphics/story/' + filename + '" alt="" />');
+}
+Story.prototype.storyImageDiv = function(filename)
+{
+ return $('<div style="position:absolute; width:900px; height:500px; background: url(view/graphics/story/'+filename+');"></div>');
+ this.addFormText(bell, "eMail", "mehl", 150, 215);
+}
+
+Story.prototype.addFormText = function(parentNode, label, fieldName, x, y)
+{
+ var form_label = $('<div>'+label+':</div>');
+ var form = $('<input name="'+fieldName+'"/>');
+ form_label.css({position:'absolute', top:y+'px',left:x+'px'});
+ form.css({position:'absolute', top:(y+20)+'px',left:x+'px'});
+ parentNode.append(form_label);
+ parentNode.append(form);
+
+ this.form_variables[fieldName] = null;
+}
+
$(function() {
- story = new Story($('#storybox'));
+ story = new Story($('#storyhead'), $('#storycanvas'), $('#storybox'));
story.begin();
});
diff --git a/registration-system/view/style.css b/registration-system/view/style.css
index 83d43060ca839182df41c3ccaf58772d3c302b28..240089648023ea196d4a7b4655e287b45415cfa1 100644
--- a/registration-system/view/style.css
+++ b/registration-system/view/style.css
@@ -119,6 +119,13 @@ div#storybox {
height:500px;
overflow:hidden;
}
+div#storycanvas {
+ margin:0 auto;
+ position:relative;
+ width:900px;
+ height:500px;
+ overflow:hidden;
+}
div#headerbox h2 {
padding-top: 10px;