define(['jquery', 'underscore', 'backbone', 'text!modules/sync/syncViewTemplate.html', 'modules/base/baseView', 'classes/profile'],
        function ($, _, Backbone, syncViewTemplate, BaseView, Profile) {

            var SyncView = BaseView.extend({
                //initialize template
                template: _.template(syncViewTemplate),
                initialize: function (options) {
                    this.id = "SyncView";
                    SyncView.__super__.initialize.call(this);
                    if (options &&
                            options.tokenFound === 1)
                    {
                        this.updateLoginBtn();
                    }
                    window.localStorage.setItem("tryLogin", null);
                },
                isStayInPage: function () {
                    return false;
                },
                events: {
                    "click #backBtn": "backBtn",
                    "click #fblogin": "fbLogin",
                    "click #gpluslogin": "gplusLogin",
                    "click #fblogout": "fbLogout",
                    "click #gpluslogout": "gplusLogout"
                },
                backBtn: function (e) {
                    e.preventDefault();
                    window.history.back();
                },
                fbLogin: function (e) {
                    var self = this;
                    e.preventDefault();

                    hello('facebook').login();
                },
                gplusLogin: function (e) {
                    var self = this;
                    e.preventDefault();

                    hello('google').login();
                },
                fbLogout: function (e) {
                    var self = this;
                    e.preventDefault();

                    hello('facebook').logout().then(function() {
                        Profile.resetProfile();
                        self.updateLoginBtn();
                    });
                    
                },
                gplusLogout: function (e) {
                    var self = this;
                    e.preventDefault();

                    hello('google').logout().
                    then(function() {
                        Profile.resetProfile();
                        self.updateLoginBtn();
                    });                    
                },
                updateLoginBtn: function ()
                {
                    if (Profile.isConnected()) {
                        if (Profile.isFbConnected()) {
                            this.changeBtn("#fblogout", "inline-block!important");
                            this.changeBtn("#gpluslogout", "none");
                            this.changeBtn("#fblogin", "none");
                            this.changeBtn("#gpluslogin", "none");
                        }

                        if (Profile.isGPlusConnected()) {
                            this.changeBtn("#fblogout", "none");
                            this.changeBtn("#gpluslogout", "inline-block!important");
                            this.changeBtn("#fblogin", "none");
                            this.changeBtn("#gpluslogin", "none");
                        }
                    }
                    else
                    {
                        this.changeBtn("#fblogout", "none");
                        this.changeBtn("#gpluslogout", "none");
                        this.changeBtn("#fblogin", "inline-block!important");
                        this.changeBtn("#gpluslogin", "inline-block!important");
                    }
                },
                changeBtn: function (selector, displayStyle)
                {
                    var ele = this.$el.find(selector)[0];
                    ele.style.display = "";
                    ele.style.cssText = ele.style.cssText + " display: " + displayStyle + ";";
                },
                //render the content into div of view
                render: function () {
                    var self = this;
                    //this.header.title = "pippo";
                    SyncView.__super__.render.call(this);

                    this.header.$el.append("<a id=\"backBtn\" href=\"\" data-role=\"button\" class=\"nav-glyphish-example ui-btn-right ui-btn ui-icon-myHome ui-btn-icon-notext\" data-icon=\"custom\"></a>");

                    this.$el.append(this.header.$el);
                    this.$el.append(this.template({app: myManifest}));
                    this.$el.append(this.footer.$el);
                    this.$el.find("#moreBtn").addClass("ui-btn-active");

                    this.updateLoginBtn();

                    return this;
                }
            });
            return SyncView;
        });