move more asynchronous tasks into the url controller; fix bugs with list selection when page loads in item view

static/js/pandora.js

@@ -93,23 +93,26 @@ Ox.load({
                     pandora.user.ui.theme = 'classic';
                 }
 
-                pandora.URL.parse();
                 window.onpopstate = function(event) {
                     pandora.URL.update();
                 };
 
-                Ox.UI.hideLoadingScreen();
+                pandora.URL.parse(function() {
 
-                Ox.Theme(pandora.user.ui.theme);
+                    Ox.UI.hideLoadingScreen();
-                pandora.$ui.appPanel = pandora.ui.appPanel().display();        
 
-                Ox.Request.requests() && pandora.$ui.loadingIcon.start();
+                    Ox.Theme(pandora.user.ui.theme);
-                pandora.$ui.body.ajaxStart(pandora.$ui.loadingIcon.start);
+                    pandora.$ui.appPanel = pandora.ui.appPanel().display();        
-                pandora.$ui.body.ajaxStop(pandora.$ui.loadingIcon.stop);
 
-                pandora.site.sectionButtonsWidth = pandora.$ui.sectionButtons.width() + 8;
+                    Ox.Request.requests() && pandora.$ui.loadingIcon.start();
+                    pandora.$ui.body.ajaxStart(pandora.$ui.loadingIcon.start);
+                    pandora.$ui.body.ajaxStop(pandora.$ui.loadingIcon.stop);
 
-            }, '/static/');
+                    pandora.site.sectionButtonsWidth = pandora.$ui.sectionButtons.width() + 8;
+                    
+                });
+
+            }, '/static/'); // fixme: why does loadResources have an argument after callback????
         }
     });
 

static/js/pandora/Query.js

@@ -227,19 +227,10 @@ pandora.Query = (function() {
             Ox.print(Ox.repeat('-', 120));
             Ox.print('STATE', data);
             Ox.print(Ox.repeat('-', 120));
-            Ox.print('@@@@@', data.list, pandora.user.ui.lists[data.list])
+            pandora.UI.set({list: data.list});
             !pandora.user.ui.lists[data.list] && pandora.UI.set(
                 'lists|' + data.list, pandora.site.user.ui.lists['']
             );
-            ///*
-            // ---- fixme: remove, server sends wrong data
-            !pandora.user.ui.lists[data.list].sort && pandora.UI.set(
-                'lists|' + data.list, pandora.site.user.ui.lists['']
-            );
-            // ----
-            //*/
-            Ox.print('@@@@@', data.lists, pandora.user.ui.lists[data.list])
-            pandora.UI.set({list: data.list});
             pandora.user.ui.find = data.find;
             pandora.user.ui.groupsData = data.groups;
             pandora.user.ui.query = data.query;
@@ -287,13 +278,18 @@ pandora.Query = (function() {
 
         toString: function() {
             //Ox.print('tS', pandora.user.ui.find)
-            var sort = pandora.user.ui.lists[pandora.user.ui.list].sort[0],
+            if (!pandora.user.ui.item) {
-                key = sort.key,
+                var sort = pandora.user.ui.lists[pandora.user.ui.list].sort[0],
-                operator = sort.operator;
+                    key = sort.key,
-            return pandora.user.ui.lists[pandora.user.ui.list].listView + '/?' + Ox.serialize({
+                    operator = sort.operator;
-                find: constructFind(pandora.user.ui.query),
+                return pandora.user.ui.lists[pandora.user.ui.list].listView + '/?' + Ox.serialize({
-                sort: (operator == pandora.getSortOperator(key) ? '' : operator) + key
+                    find: constructFind(pandora.user.ui.query),
-            });
+                    sort: (operator == pandora.getSortOperator(key) ? '' : operator) + key
+                });
+                
+            } else {
+                return pandora.user.ui.item + '/' + pandora.user.ui.itemView;
+            }
         },
 
         updateGroups: function() {

static/js/pandora/UI.js

@@ -13,7 +13,7 @@ pandora.UI = (function() {
             var obj = Ox.makeObject(arguments);
             previousUI = Ox.clone(pandora.user.ui, true);
             Ox.forEach(obj, function(val, key) {
-                Ox.print('key', key, 'val', val);
+                Ox.print('UI.set key', key, 'val', val);
                 var i = 0,
                     keys = key.split('|'),
                     ui = pandora.user.ui;

static/js/pandora/URL.js

@@ -1,12 +1,10 @@
 // vim: et:ts=4:sw=4:sts=4:ft=javascript
 
-
 pandora.URL = (function() {
 
-    var previousUI = {},
+    var previousURL = '',
-        previousURL = '',
         regexps = {
-            '^$': function(pathname, search) {
+            '^$': function(pathname, search, callback) {
                 if (/^\?url=/.test(search)) {
                     document.location = decodeURIComponent(search.substr(5));
                 } else {
@@ -24,22 +22,27 @@ pandora.URL = (function() {
                         });
                     }
                 }
+                callback();
             },
-            '^home$': function(pathname, search) {
+            '^home$': function(pathname, search, callback) {
                 pandora.$ui.home = pandora.ui.home().showScreen();
+                callback();
             },
-            '^(items|edits|texts)$': function(pathname, search) {
+            '^(items|edits|texts)$': function(pathname, search, callback) {
                 pandora.UI.set({
                     section: pathname
                 });
+                callback();
             },
-            '^(about|contact|faq|news|software|terms|tour)$': function(pathname, search) {
+            '^(about|contact|faq|news|software|terms|tour)$': function(pathname, search, callback) {
                 pandora.$ui.siteDialog = pandora.ui.siteDialog(pathname).open();
+                callback();
             },
-            '^help$': function(pathname, search) {
+            '^help$': function(pathname, search, callback) {
                 pandora.$ui.helpDialog = pandora.ui.helpDialog().open();
+                callback();
             },
-            '^(signin|signout|signup)$': function(pathname, search) {
+            '^(signin|signout|signup)$': function(pathname, search, callback) {
                 if ((pathname == 'signout') == (pandora.user.level != 'guest')) {
                     pandora.$ui.accountDialog = (
                         pandora.user.level == 'guest'
@@ -47,21 +50,24 @@ pandora.URL = (function() {
                         : pandora.ui.accountSignoutDialog()
                     ).open();
                 }
+                callback();
             },
-            '^preferences$': function(pathname, search) {
+            '^preferences$': function(pathname, search, callback) {
                 pandora.$ui.preferencesDialog = pandora.ui.preferencesDialog().open();
+                callback();
             },
-            '^(calendar|calendars|clip|clips|flow|grid|list|map|maps|timelines)$': function(pathname, search) {
+            '^(calendar|calendars|clip|clips|flow|grid|list|map|maps|timelines)$': function(pathname, search, callback) {
                 pandora.UI.set({
                     section: 'items',
                     item: ''
                 });
                 pandora.UI.set('lists|' + pandora.user.ui.list + '|listView', pathname);
                 pandora.Query.fromString(search);
+                callback();
             },
-            '^[0-9A-Z]': function(pathname, search) {
+            '.*': function(pathname, search, callback) {
                 var split = pathname.split('/'),
-                    item = split[0],
+                    item = decodeURI(split[0]),
                     points,
                     time = split.length > 1
                         ? /[\d\.:,-]+/.exec(split[split.length - 1])
@@ -74,57 +80,126 @@ pandora.URL = (function() {
                 view = view ? view[0]
                     : time ? pandora.user.ui.videoView
                     : pandora.user.ui.itemView;
-                pandora.UI.set(Ox.extend({
+                pandora.api.get({id: item, keys: ['id']}, function(result) {
-                    section: 'items',
+                    if (result.status.code == 200) {
-                    item: item,
+                        foundItem();
-                    itemView: view
+                    } else {
-                }, ['player', 'timeline'].indexOf(view) > -1 ? {
+                        pandora.api.find({
-                    videoView: view
+                            query: {
-                } : {}));
+                                conditions: [{key: 'title', value: item, operator: ''}],
-                if (time) {
+                                operator: '&'
-                    points = time[0].split(',');
+                            },
-                    if (points.length == 2) {
+                            sort: [{key: 'votes', operator: ''}], // fixme: not all systems have "votes"
-                        points = Ox.flatten([points[0], points[1].split('-')]);
+                            range: [0, 100],
-                        if (points[2] == '') {
+                            keys: ['id', 'title', 'votes']
-                            points[2] = '-1';
+                        }, function(result) {
+                            if (result.data.items.length) {
+                                var re = {
+                                        exact: new RegExp('^' + item + '$', 'i'),
+                                        word: new RegExp('\\b' + item + '\\b', 'i')
+                                    };
+                                item = result.data.items.sort(function(a, b) {
+                                    return (parseInt(b.votes) || 0)
+                                        + re.word.test(b.title) * 1000000
+                                        + re.exact.test(b.title) * 2000000
+                                        - (parseInt(a.votes) || 0)
+                                        - re.word.test(a.title) * 1000000
+                                        - re.exact.test(a.title) * 2000000;
+                                })[0].id;
+                                split[0] = item;
+                                foundItem();
+                            } else {
+                                pandora.UI.set({
+                                    section: 'items',
+                                    item: ''
+                                });
+                                pandora.Query.fromString('?find=' + pathname);
+                                pandora.URL.replace('?find=' + pathname);
+                                callback();
+                            }
+                        });
+                    }
+                });
+                function foundItem() {
+                    pandora.UI.set(Ox.extend({
+                        section: 'items',
+                        item: item,
+                        itemView: view
+                    }, ['player', 'timeline'].indexOf(view) > -1 ? {
+                        videoView: view
+                    } : {}));
+                    if (time) {
+                        points = time[0].split(',');
+                        if (
+                            points.length == 2 
+                            && (points = Ox.flatten([points[0], points[1].split('-')]))[2] == ''
+                        ) {
+                            pandora.api.get({
+                                id: item,
+                                keys: ['duration']
+                            }, function(result) {
+                                points[2] = result.data.duration.toString();
+                                foundTime();
+                            });
+                        } else {
+                            foundTime();
+                        }
+                    } else {
+                        if (!pandora.user.ui.videoPoints[item]) {
+                            pandora.UI.set('videoPoints|' + item, {
+                                'in': 0, out: 0, position: 0
+                            });
+                        }
+                        foundTime();
+                    }
+                    function foundTime() {
+                        if (time) {
+                            // fixme: this is duplicated, see Ox.VideoPlayer() parsePositionInput()
+                            points = points.map(function(point, i) {
+                                var parts = point.split(':').reverse();
+                                while (parts.length > 3) {
+                                    parts.pop();
+                                }
+                                return parts.reduce(function(prev, curr, i) {
+                                    return prev + (parseFloat(curr) || 0) * Math.pow(60, i);
+                                }, 0);
+                            });
+                            pandora.UI.set('videoPoints|' + item, {
+                                'in': points.length == 1 ? 0 : points[points.length - 2],
+                                out: points.length == 1 ? 0 : points[points.length - 1],
+                                position: points[0],
+                            });
+                            points = points.map(function(point) {
+                                return point == -1 ? '' : Ox.formatDuration(point, 3).replace(/\.000$/, '');
+                            });
+                            split[split.length - 1] = points[0] + (
+                                points.length == 1 ? '' : ',' + points[1] + '-' + points[2]
+                            );
+                        }
+                        pandora.URL.replace(split.join('/'));
+                        // on page load, we have to check if the item is in the previously selected list
+                        // if it is not, the movie browser has to be reloaded
+                        if (pandora.user.ui.list) {
+                            pandora.user.ui.query = {
+                                conditions: [{key: 'list', value: pandora.user.ui.list, operator: ''}],
+                                operator: '&'
+                            };
+                            pandora.api.find({
+                                query: pandora.user.ui.query,
+                                positions: [pandora.user.ui.item],
+                                sort: [{key: 'id', operator: ''}]
+                            }, function(result) {
+                                if (Ox.isUndefined(result.data.positions[pandora.user.ui.item])) {
+                                    pandora.UI.set({list: ''});
+                                    pandora.user.ui.query = {conditions:[], operator: '&'};
+                                }
+                                callback();
+                            });
+                        } else {
+                            callback();
                         }
                     }
-                    // fixme: this is duplicated, see Ox.VideoPlayer() parsePositionInput()
-                    points = points.map(function(point, i) {
-                        var parts = point.split(':').reverse();
-                        while (parts.length > 3) {
-                            parts.pop();
-                        }
-                        return parts.reduce(function(prev, curr, i) {
-                            return prev + (parseFloat(curr) || 0) * Math.pow(60, i);
-                        }, 0);
-                    });
-                    pandora.UI.set('videoPoints|' + item, {
-                        'in': points.length == 1 ? 0 : points[points.length - 2],
-                        out: points.length == 1 ? 0 : points[points.length - 1],
-                        position: points[0],
-                    });
-                    points = points.map(function(point) {
-                        return point == -1 ? '' : Ox.formatDuration(point, 3).replace(/\.000$/, '');
-                    });
-                    split[split.length - 1] = points[0] + (
-                        points.length == 1 ? '' : ',' + points[1] + '-' + points[2]
-                    );
-                    pandora.URL.replace(split.join('/'));
-                } else if (!pandora.user.ui.videoPoints[item]) {
-                    pandora.UI.set('videoPoints|' + item, {
-                        'in': 0, out: 0, position: 0
-                    });
                 }
-            },
-            '.*': function(pathname, search) {
-                var query = search || 'find=' + pathname;
-                pandora.UI.set({
-                    section: 'items',
-                    item: ''
-                });
-                pandora.Query.fromString(query);
-                pandora.URL.replace('?' + query);
             }
         };
 
@@ -132,81 +207,13 @@ pandora.URL = (function() {
         previousURL = document.location.pathname + document.location.search;
     }
 
-    return {
+    function updateURL() {
-
+        var previousUI = pandora.UI.getPrevious();
-        parse: function() {
+        Ox.Request.cancel();
-            var pathname = document.location.pathname.substr(1),
+        $('video').each(function() {
-                search = document.location.search.substr(1);
+            $(this).trigger('stop');
-            if (/\/$/.test(pathname)) {
+        });
-                pathname = pathname.substr(0, pathname.length - 1);
+        pandora.URL.parse(function() {
-            }
-            /*
-            var url = document.location.pathname.substr(1)
-                    + document.location.search
-                    + document.location.hash;
-            */
-            Ox.forEach(regexps, function(fn, re) {
-                re = new RegExp(re);
-                if (re.test(pathname)) {
-                    Ox.print('URL re ' + re);
-                    fn(pathname, search);
-                    return false;
-                }
-            });
-            pandora.Query.updateGroups();
-            pandora.user.ui.showHome = false;
-        },
-
-        push: function(title, url) {
-            if (arguments.length == 1) { // fixme: remove later
-                url = title;
-            }
-            if (url[0] != '/') {
-                url = '/' + url;
-            }
-            saveURL();
-            history.pushState({}, pandora.site.site.name + (title ? ' - ' + title : ''), url);
-        },
-
-        pushPrevious: function() {
-            history.pushState({}, '', previousURL);
-        },
-
-        set: function(title, url) {
-            if (arguments.length == 1) { // fixme: remove later
-                url = title;
-            }
-            if (url[0] != '/') {
-                url = '/' + url;
-            }
-            history.pushState({}, pandora.site.site.name + (title ? ' - ' + title : ''), url);
-            this._update();
-        },
-
-        replace: function(title, url) {
-            if (arguments.length == 1) { // fixme: remove later
-                url = title;
-            }
-            if (url[0] != '/') {
-                url = '/' + url;
-            }
-            saveURL();
-            history.replaceState({}, pandora.site.site.name + (title ? ' - ' + title : ''), url);
-        },
-
-        update: function() {
-            this.set(pandora.Query.toString());
-        },
-
-        _update: function() {
-            // fixme: make this method private
-            var previousUI = pandora.UI.getPrevious();
-            Ox.print('now', pandora.user.ui, 'previously', previousUI)
-            Ox.Request.cancel();
-            $('video').each(function() {
-                $(this).trigger('stop');
-            });
-            this.parse();
             if (pandora.user.ui.section != previousUI.section) {
                 pandora.$ui.appPanel.replaceElement(1, pandora.$ui.mainPanel = pandora.ui.mainPanel());
             } else if (!pandora.user.ui.item && !previousUI.item) {
@@ -218,7 +225,6 @@ pandora.URL = (function() {
                 if (list.listView != previousList.listView) {
                     pandora.$ui.mainMenu.checkItem('viewMenu_movies_' + list.listView);
                     pandora.$ui.viewSelect.options({value: list.listView});
-                    Ox.print('is', isClipView, 'was', wasClipView);
                     if (isClipView != wasClipView) {
                         pandora.$ui.mainMenu.replaceMenu('sortMenu', pandora.getSortMenu());
                         pandora.$ui.sortSelect.replaceWith(pandora.$ui.sortSelect = pandora.ui.sortSelect());
@@ -229,14 +235,12 @@ pandora.URL = (function() {
                 }
                 if (!Ox.isEqual(list.sort, previousList.sort)) {
                     pandora.$ui.mainMenu.checkItem('sortMenu_sortmovies_' + list.sort[0].key);
-                    pandora.$ui.mainMenu.checkItem('sortMenu_ordermovies_' + (
+                    pandora.$ui.mainMenu.checkItem('sortMenu_ordermovies_' + ((
-                        list.sort[0].operator == '' ? pandora.getSortOperator(list.sort[0].key)
+                        list.sort[0].operator || pandora.getSortOperator(list.sort[0].key)
-                        : list.sort[0].operator == '+' ? 'ascending' : 'descending'
+                    ) == '+' ? 'ascending' : 'descending'));
-                    ));
                     pandora.$ui.sortSelect.options({value: list.sort[0].key});
                 }
                 pandora.$ui.leftPanel.replaceElement(2, pandora.$ui.info = pandora.ui.info());
-                Ox.print('EQUAL?', pandora.user.ui.query, previousUI.query, Ox.isEqual(pandora.user.ui.query, previousUI.query))
                 if (Ox.isEqual(pandora.user.ui.query, previousUI.query)) {
                     pandora.$ui.contentPanel.replaceElement(1, pandora.$ui.list = pandora.ui.list());
                 } else {
@@ -268,7 +272,71 @@ pandora.URL = (function() {
                     $item.options('position')
                 );
             }
-        }
+        });
+    }
+
+    return {
+
+        parse: function(callback) {
+            var pathname = document.location.pathname.substr(1),
+                search = document.location.search.substr(1);
+            if (/\/$/.test(pathname)) {
+                pathname = pathname.substr(0, pathname.length - 1);
+            }
+            Ox.forEach(regexps, function(fn, re) {
+                re = new RegExp(re);
+                if (re.test(pathname)) {
+                    Ox.print('URL re ' + re);
+                    fn(pathname, search, function() {
+                        pandora.Query.updateGroups();
+                        pandora.user.ui.showHome = false;
+                        callback();
+                    });
+                    return false;
+                }
+            });
+        },
+
+        push: function(title, url) {
+            if (arguments.length == 1) { // fixme: remove later
+                url = title;
+            }
+            if (url[0] != '/') {
+                url = '/' + url;
+            }
+            saveURL();
+            history.pushState({}, pandora.site.site.name + (title ? ' - ' + title : ''), url);
+        },
+
+        pushPrevious: function() {
+            history.pushState({}, '', previousURL);
+        },
+
+        set: function(title, url) {
+            if (arguments.length == 1) { // fixme: remove later
+                url = title;
+            }
+            if (url[0] != '/') {
+                url = '/' + url;
+            }
+            history.pushState({}, pandora.site.site.name + (title ? ' - ' + title : ''), url);
+            updateURL();
+        },
+
+        replace: function(title, url) {
+            if (arguments.length == 1) { // fixme: remove later
+                url = title;
+            }
+            if (url[0] != '/') {
+                url = '/' + url;
+            }
+            saveURL();
+            history.replaceState({}, pandora.site.site.name + (title ? ' - ' + title : ''), url);
+        },
+
+        update: function() {
+            this.set(pandora.Query.toString());
+        },
 
     };
 

static/js/pandora/ui/backButton.js

@@ -9,7 +9,8 @@ pandora.ui.backButton = function() {
     })
     .bindEvent({
         click: function() {
-            pandora.URL.set(pandora.Query.toString());
+            pandora.UI.set({item: null});
+            pandora.URL.update();
         }
     });
     return that;

static/js/pandora/ui/browser.js

@@ -1,6 +1,6 @@
 // vim: et:ts=4:sw=4:sts=4:ft=javascript
 pandora.ui.browser = function() {
-    var sizes, that;
+    var that;
     if (!pandora.user.ui.item) {
         pandora.user.ui.groupsSizes = pandora.getGroupsSizes();
         pandora.$ui.groups = pandora.ui.groups();

static/js/pandora/ui/foldersList.js

@@ -371,17 +371,18 @@ pandora.ui.folderList = function(id) {
                 pandora.$ui.list.triggerEvent('paste', data);
             },
             select: function(data) {
-                //pandora.user.ui.item && pandora.UI.set({item: ''});
                 if (data.ids.length) {
                     Ox.forEach(pandora.$ui.folderList, function($list, id_) {
                         id != id_ && $list.options('selected', []);
                     });
-                    //pandora.UI.set({list: data.ids[0]});
-                    pandora.URL.set('?find=' + (id == 'volumes' ? 'volume' : 'list') + ':' + data.ids[0]);
-                } else {
-                    //pandora.UI.set({list: ''});
-                    pandora.URL.set('');
                 }
+                pandora.URL.set(data.ids.length ? '?find=list:' + data.ids[0] : '');
+                /*
+                pandora.UI.set({
+                    item: '',
+                    list: data.ids.length ? data.ids[0] : ''
+                });
+                */
             },
             submit: function(data) {
                 data_ = {id: data.id};

static/js/pandora/ui/item.js

@@ -11,63 +11,21 @@ pandora.ui.item = function() {
         if (result.status.code == 200) {
             // fixme: probably does not belong here
             document.title = '0xDB - ' + result.data.title;
-            if (pandora.user.ui.videoPoints[result.data.id].out == -1) {
-                pandora.UI.set('videoPoints|' + result.data.id + '|out', result.data.duration);
-                pandora.URL.replace(
-                    document.location.pathname
-                    + Ox.formatDuration(result.data.duration, 3).replace(/\.000$/, '')
-                );
-            }
         }
 
-        if (result.status.code != 200) {
+        /*if (result.status.code != 200) {
-            // fixme: this is quite a hack
+            pandora.$ui.contentPanel.replaceElement(1,
-            var title = decodeURI(pandora.user.ui.item).toLowerCase(),
+                Ox.Element()
-                videoPoints;
+                    .css({marginTop: '32px', fontSize: '12px', textAlign: 'center'})
-            if (pandora.user.ui.item in pandora.user.ui.videoPoints) {
+                    .html(
-                videoPoints = pandora.user.ui.videoPoints[pandora.user.ui.item];
+                        'Sorry, we can\'t find the '
-                pandora.UI.set(['videoPoints', pandora.user.ui.item].join('|'), null);
+                        + pandora.site.itemName.singular.toLowerCase()
-            }
+                        + ' you\'re looking for.'
-            pandora.api.find({
+                    )
-                query: {
+            );
-                    conditions: [{key: 'title', value: title, operator: ''}],
+        }*/
-                    operator: ''
+
-                },
+        if (!result.data.rendered && [
-                sort: [{key: 'votes', operator: '-'}], // fixme: operator '' should work as well
-                range: [0, 100],
-                keys: ['id', 'title', 'votes']
-            }, function(result) {
-                if (result.data.items.length) {
-                    Ox.print(result.data.items)
-                    var re = {
-                            exact: new RegExp('^' + title + '$', 'i'),
-                            word: new RegExp('\\b' + title + '\\b', 'i')
-                        },
-                        id = result.data.items.sort(function(a, b) {
-                            return (parseInt(b.votes) || 0)
-                                + re.word.test(b.title) * 1000000
-                                + re.exact.test(b.title) * 2000000
-                                - (parseInt(a.votes) || 0)
-                                - re.word.test(a.title) * 1000000
-                                - re.exact.test(a.title) * 2000000;
-                        })[0].id;
-                    pandora.user.ui.item = '';
-                    !Ox.isUndefined(videoPoints)
-                        && pandora.UI.set(['videoPoints', id].join('|'), videoPoints);
-                    pandora.URL.set(id);
-                } else {
-                    pandora.$ui.contentPanel.replaceElement(1,
-                        Ox.Element()
-                            .css({marginTop: '32px', fontSize: '12px', textAlign: 'center'})
-                            .html(
-                                'Sorry, we can\'t find the '
-                                + pandora.site.itemName.singular.toLowerCase()
-                                + ' you\'re looking for.'
-                            )
-                    );
-                }                
-            });
-        } else if (!result.data.rendered && [
             'clips', 'map', 'player', 'timeline'
         ].indexOf(pandora.user.ui.itemView)>-1) {
             pandora.$ui.contentPanel.replaceElement(1,