/* ==== Configure ==== */
var DIALOG_ANIMATE_DURATION = 300;
var DIALOG_TRIGGER = '.login-with-social-network';
var DIALOG_CLOSER = '.social-network-dialog-close';
var DIALOG_SETTING = {
    'initial':{
        id:'social-network-dialog-initial', 
        title:'Welcome to iUniv. Please create account to join!', 
        content:'#social-network-dialog-initial-content', 
        url:''
    }
}


/* ==== DialogManager ==== */
var DialogManager = {};
DialogManager.current = null;
DialogManager.mask = null;
DialogManager.dialogs = {};
DialogManager.open = function(url){
    name = name?name:'main';
    windowParams = {
        id:'popup_main', 
        title:'<span></span>', 
        content:'#social-network-dialog-setting-content',
        url:url
    }
    DialogManager.dialogs[name] = new Dialog(windowParams);
    DialogManager.show(DialogManager.dialogs[name]);
}
DialogManager.close = function(){
    this.hide();
}
DialogManager.show = function(dialog){
    if (this.mask) {
        this.mask.show();
    }
    if (dialog) {
        if (this.current) {
            this.current.hide();
        }
        this.current = dialog;
        this.current.show();
    }
}
DialogManager.hide = function(){
    if (this.mask) {
        this.mask.hide();
    }
    if (this.current) {
        this.current.hide();
    }
}


DialogManager.changeAttributes = function(attrs,dialog){
    dialog=dialog?dialog:'main'
    if(attrs.title)
        DialogManager.dialogs[dialog].setTitle(attrs.title);
    
    if(attrs.height)
        DialogManager.setPosition(attrs.height);
}

DialogManager.setReloadOnClose = function(url){
    $(DIALOG_CLOSER).die('click').live('click', function(e){
        if(url)
            window.location = url;
        else
            window.location.reload();
        $(DIALOG_CLOSER).die('click').live('click', function(e){
            e.preventDefault();
            DialogManager.hide();
        });
    });
}

function scrollTop(){
    $('html, body').animate({
        scrollTop:0
    }, 'slow');
}

DialogManager.setPosition = function(eHeight){
    scrollTop();
    
    e = ('iframe.social-login-frame');
    /*
    if(e.contentDocument){
        eHeight = e.contentDocument.body.offsetHeight + 35;
    } else {
        eHeight = e.contentWindow.document.body.scrollHeight;
    }
    */

    iParent = $(e).parent();

    $(e).animate({
        height:eHeight
    },
    {
        step: function(){
            DialogManager.setDialogPosition(iParent);
        }
    });
}

DialogManager.setDialogPosition = function(d){
    tOffset = 30;
    
    
    var scrollWidth = document.documentElement.scrollWidth;
    var windowHeight = document.documentElement.offsetHeight;
    
    if (navigator.userAgent.match(/iPhone|iPad|Android/)) {
        
        
        var left = Math.max(0, scrollWidth - d.outerWidth())/2;
        var top  = document.body.scrollTop + Math.max(20, windowHeight - d.outerHeight())/2;
        
        d.css('position', 'absolute').css('left', left + 'px');
                
        $('#social-login-mask').css('width',scrollWidth+'px');
        $('#social-login-mask').css('height',windowHeight+'px');
    } else {
        d.css('margin-left', -1*d.outerWidth()/2 + 'px');
    }

    wHeight = $(window).height();
    mTop = d.outerHeight()+10;
    if(wHeight<mTop+tOffset*2){
        mTop = tOffset;
    }else{
        mTop = (wHeight - mTop)/2;
    }
    d.css('top',mTop+'px');
}


/* ==== DialogMask ==== */
var DialogMask ={};
DialogMask.node = null;
DialogMask.show = function(){
    this.node.stop().css('display', 'block').animate({
        opacity:1
    }, DIALOG_ANIMATE_DURATION);
}
DialogMask.hide = function(){
    this.node.stop().animate({
        opacity:0
    }, DIALOG_ANIMATE_DURATION, function(){
        $(this).css('display', 'none');
    });
}

/* ==== Dialog ==== */
function Dialog(setting) {
    this.node = null;
    this.init(setting);
}
Dialog.prototype.init = function(setting){
    var loaderFrame = '<iframe frameborder="0" height="300" width="850" style="border:0; display:block;" name="social-login-frame" class="social-login-frame" src=""></iframe>';
    this.node = $('<div class="social-login-dialog" id="social-login-dialog"><h1 class="social-login-dialog-title"></h1><span class="social-network-dialog-close en_US">&nbsp;</span><div class="social-network-dialog-content"></div>'+loaderFrame+'</div>').prependTo('body');
    this.setId(setting.id);
    this.setTitle(setting.title);

    if(setting.url){
        var iFrameNode = this.node.find('iframe.social-login-frame');
        iFrameNode.attr('src',setting.url);
        iFrameNode.load(function() 
        {
            $(this).fadeTo('slow', 1);
        }); 
    }
    else {
        this.node.find('.social-network-dialog-content').append($(setting.content));
    }
    
    DialogManager.setDialogPosition(this.node);
    this.node.hide().css('opacity', '0');
    
    $(window).resize(function() {
        DialogManager.setDialogPosition($("#social-login-dialog"));
    });
}
Dialog.prototype.show = function(){
    var iFrameNode = this.node.find('iframe.social-login-frame');
    iFrameNode.attr('src', iFrameNode.attr('src'));
    iFrameNode.fadeTo(0, 0.01);

    this.node.stop().css('display', 'block').animate({
        opacity:1
    }, DIALOG_ANIMATE_DURATION);
}
Dialog.prototype.hide = function(){
    this.node.stop().animate({
        opacity:0
    }, DIALOG_ANIMATE_DURATION, function(){
        $(this).css('display', 'none');
    });
    this.node.remove();
}
Dialog.prototype.setId = function(id){
    this.node.attr('id', id);
}
Dialog.prototype.setTitle = function(title){
    var titleNode = this.node.find('.social-login-dialog-title').html(title);
    titleNode.css('margin-left', -1*titleNode.outerWidth()/2 + 'px');
}



/* ==== Tab ==== */
function Tab(node) {
    this.node    = null;
    this.current = null;
    this.init(node);
}
Tab.prototype.init = function(node){
    this.node = node;

    var self = this;
    this.node.find('a').bind('click', function(e){
        e.preventDefault();
        self.select($(this));
    });

    this.select(this.node.find('a').eq(0));
}
Tab.prototype.select = function(node){
    this.node.find('a').each(function(index, node){
        $($(node).attr('href')).hide();
    }).removeClass('current');
    node.addClass('current');
    $(node.attr('href')).show();
}


jQuery(function($){

    /* ==== Main ==== */
    DialogMask.node = $('<div id="social-login-mask"></div>').hide().css('opacity', '0').prependTo('body');
    DialogManager.mask = DialogMask;
    $('.dialog-tab').each(function(index, node){
        new Tab($(node));
    });

    $(DIALOG_CLOSER).live('click', function(e){
        e.preventDefault();
        DialogManager.hide();
    });

});