orbit-basic/app/assets/javascripts/desktop/orbitdesktop.js

// JavaScript Document
//harry bomrah
//Inititialize function will initialize desktop

//callback-method will be called after desktop controlled ajax call
//container=true is the area where the view will be loaded
//load = true is used to load the submenu item by default
//response-type = "json"|"script"|"xml|html" default is json 
//autocomplete = "url" this will automatically convert textarea or input to autocomplete.
//autocomplete-format = "--:[text,email]" first one is seperator which will be put on between every field.
//ajax-remote="get/delete/post/false" this will automatically bind the <a> with remote ajax call. By default if the resposne is html, it ll be inserted in container=true, false option will not make any calls and also stop page refresh
// content-holder = "jquery dom", the returned html of server will be put inside the dom mentioned in content-holder of a tag. this can be used in a tags as attributes
//confirm-message ="Some message", this will prompt user with a confirm box and show the message before ajax call is made.
//"toggle-onclick" = "classes to get toggle" this will toggle classes on toggle when a tags are clicked.
//"delete-item" = "true" this will remove its respective item from the list.
//"pagination-link" = "url" this url will be used for pagination.. this will override last link url.
//"pagination-var" = "variable to send paramater with url for pagination" this will enable pagination with this attribute for that view.


//for forms
//form-type = "ajax_form" will turn form to ajax submit
//notification = string will display after the form is succesfully submitted
//response-type = "json"|"script"|"xml|html" default is json 

//for layout tinyscrollbar
//content-layout="datalist|column|simple" datalist is for data list from database.. column is usually for forms and some other pages.. simple is without any columns, the page will be displayed as it is.. base width will be considered the default width for tinyscrollbar  
//base-width="300" this is the basic width of each column and in case of simple layout it ll be the final width
//per-column="5" this option is only for datalist layout.. this ll specify number of enteries per column.. default is 4
//column="true" this option is only for column layout... the columns will be formed on this column=true attribute and it should be a div
//item=true this attribute should be present in the li tag. li with this attribute are considered as a separate item.

//enableLanguageSelect( dom ) children <a> will be binded with language, data-lang = string ex "en"|"zh_tw" will toggle all data-langunage throughout the page
//enableSharing( dom ) children <a> will be binded with share, data-mode = string ex "public"|"private" will change the mode for all the selected items. the dom with class should have data-link = url data-var = vaiable_name, default will be mode


$.extend($.expr[':'], {
  'containsi': function (elem, i, match, array) {
    return (elem.textContent || elem.innerText || '').toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
  }
});
$.fn.sort = function(c) {
  return this.pushStack([].sort.apply(this, arguments), []);
};
var sortAscending = function(a, b) {
  return $(a).find("h1").text() > $(b).find("h1").text() ? 1 : -1;
};
var sortDescending = function(a, b) {
  return $(a).find("h1").text() < $(b).find("h1").text() ? 1 : -1;
};

Array.prototype.indexOfObject = function(object){
    for(i = 0;i < this.length; i++){
      if(this[i] === object)
        break;
    }
    return i;
}

jQuery.ajax = (function(_ajax){
    
    var protocol = location.protocol,
        hostname = location.hostname,
        exRegex = RegExp(protocol + '//' + hostname),
        YQL = 'http' + (/^https/.test(protocol)?'s':'') + '://query.yahooapis.com/v1/public/yql?callback=?',
        query = 'select * from html where url="{URL}" and xpath="*"';
    
    function isExternal(url) {
        return !exRegex.test(url) && /:\/\//.test(url);
    }
    
    return function(o) {
        
        var url = o.url;
        
        if ( /get/i.test(o.type) && !/json/i.test(o.dataType) && isExternal(url) ) {
            
            // Manipulate options so that JSONP-x request is made to YQL
            
            o.url = YQL;
            o.dataType = 'json';
            
            o.data = {
                q: query.replace(
                    '{URL}',
                    url + (o.data ?
                        (/\?/.test(url) ? '&' : '?') + jQuery.param(o.data)
                    : '')
                ),
                format: 'xml'
            };
            
            // Since it's a JSONP request
            // complete === success
            if (!o.success && o.complete) {
                o.success = o.complete;
                delete o.complete;
            }
            
            o.success = (function(_success){
                return function(data) {
                    
                    if (_success) {
                        // Fake XHR callback.
                        _success.call(this, {
                            responseText: (data.results[0] || '')
                                // YQL screws with <script>s
                                // Get rid of them
                                .replace(/<script[^>]+?\/>|<script(.|\s)*?\/script>/gi, '')
                        }, 'success');
                    }
                    
                };
            })(o.success);
            
        }
        
        return _ajax.apply(this, arguments);
        
    };
    
})(jQuery.ajax);


var orbitDesktop = function(dom){
  orbitDesktopAPI.apply(this);
  // o = this;
  this.contentHolder = dom;
  this.themesettings = "";
  this.theme = null;
  this.transitionTime = 1000;
  this.currenthtml = "home";
  this.currentface = "home";
  this.desktopData = {};
  this.tp = "";
  this.sectionList;
  this.data_method;
  this.gridvar = null;
  this.lastlink= null;
  this.tinyscrollbar = null;
  this.locationdata = {};
  this.initialize = function(){

    var theme = o.theme;
    var custom = false;
    o.getlocation();
    o.minimizeBarManager();
    $.getJSON("/desktop/get_desktop_settings",{"get":"desktop","desktopid":o.desktopId},function(desktopSettings){
      if(desktopSettings){
        if(desktopSettings.theme=="custom"){
          custom = true;
        }
        theme = desktopSettings.theme;
        o.theme = theme;
        loadTheme(desktopSettings.customtheme,desktopSettings.wallpaper);
      }else{loadTheme();}
    });
    var loadTheme = function(customtheme,customwallpaper){   //This function will load the theme from database
      $.getJSON("/desktop_themes/settings",{"id":theme},function(ts){
        o.themesettings = ts;
        $('head').append( $('<link rel="stylesheet" id="dyn_css" type="text/css" />').attr('href', o.themesettings.css));
        if(custom){
          $("head").find("#dyn_css").remove();
          $("head").append(customtheme);
        }
        $(document).ready(function(){
          o.loadWallpaper(customwallpaper);
          o.bindDesktopEvents();
          o.loadIconCache();
          var custom_load = window.location.hash;
          if(!custom_load){
            $(o.contentHolder).empty().load("/desktop/desktop_container",function(){
              o.desktopData["d_desktop"] = "";
              o.initializeDesktop("d_desktop","",false);
            })
          }else{
            o.customPage(custom_load);
          }
        });
      })
    };
  };
  this.customPage = function(customload){
    customload = customload.replace("#","");
    if(customload.search("-") != -1){
      customload = customload.split("-");
      o.menu_item($(".docklist a[custom-load="+customload[0]+"]"),true,customload[1]);
    }else{
      o.menu_item($(".docklist a[custom-load="+customload+"]"),true);
    }
  };
  this.changeTheme = function(theme){  // this function is used for changing theme
    o.theme = theme;
    $.getJSON("/desktop_themes/settings",{"id":theme},function(ts){
      o.themesettings = ts;
      $('head').find("#dyn_css").remove();
      $('head').append( $('<link rel="stylesheet" id="dyn_css" type="text/css" />').attr('href', o.themesettings.css));
      o.loadWallpaper();
      o.loadIconCache();
    })
  };

  this.getlocation = function(){
    var locationSuccess = function(pos){
      o.locationdata.lat = pos.coords.latitude;
      o.locationdata.lng = pos.coords.longitude;
      $.getJSON("http://maps.googleapis.com/maps/api/geocode/json?latlng="+o.locationdata.lat+","+o.locationdata.lng+"&sensor=true",function(data){
        $.each(data.results[0].address_components,function(i,val){
          o.locationdata[val.types[0]] = val.long_name;
        });
        o.locationdata.formatted_address = data.results[0].formatted_address;
      });
    }

    var locationError = function(){
      o.notify("Unable to find your location!","alert");
    }

    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(locationSuccess,locationError);
    }
    else{
       o.notify("Your browser does not support Geolocation!","alert");
    }

  }

  this.bindDesktopEvents = function(){  //this function will bind the global handlers to thd desktop, for example doc
    $(".docklist a").click(function(){
      if( !$( this ).parent().hasClass( 'disable' ) )
          o.menu_item($(this));
      return false;
    });

    
    $('body').on({
      click: function(){
        if(!$(this).hasClass('active')){
          o.sub_menu_item($(this));
        }
        return false;
      },
      mouseenter: function(){
        if(!$(this).hasClass('active')){
          $(this).switchClass('admtxt','thmc1 thmtxt',0);
        }
      },
      mouseleave: function(){
        var t = $(this).hasClass('active') ? '' : 'thmc1 thmtxt';
        $(this).switchClass(t,'admtxt',0);
      }
    },'*[content-type=menu] a');

    $("body").on("submit","form[form-type=ajax_form]",function(){
      var callback_method = $(this).attr("callback-method"),
          dt = ($(this).attr("response-type") == null ? "json" : $(this).attr("response-type")),
          notification = $(this).attr("notification");
      var options = {
        dataType : dt,
        resetForm : false,
        success: function(responseText, statusText, xhr, $form){
          if(typeof callback_method != "undefined"){
            if(callback_method != ""){
              window.o[o.data_method][callback_method](responseText,statusText,xhr,$form);
            }
          }
          if(typeof notification == "string")
              o.notify(notification,"success");
        },
        error: function(){
          o.notify("Please try again later!","imp");
        }
      }
      $(this).ajaxSubmit(options);
      return false;
    });

    $("body").on("click","*[ajax-remote]",function(){
      var $e = $(this),
          t = $e.attr("ajax-remote"),
          classes_to_toggle = $e.attr("toggle-onclick"),
          responsetype = $e.attr('response-type') ? $e.attr('response-type') : "html",
          exe = $e.attr("callback-method"); // (typeof $e.attr("callback-method") == "function"? $e.attr("callback-method") : "");
      if(classes_to_toggle){
        $e.toggleClass(classes_to_toggle);
      }
      if(t == "false"){
        if(exe){
          window.o[o.data_method][exe](null,$e);
        }
        return false;
      }
      var ca = $e.attr("content-holder");
      var a = function(){
        $.ajax({
            type : t,
            dataType : responsetype,
            url : $e.attr("href"),
            success : function(data){
              if(typeof data == "string"){
                if(ca)
                  $(ca).html(data);
                else{
                  o.layout_data(data);
                  // $("div[container=true]").html(data);
                }
              }

              if(exe)
                window.o[o.data_method][exe](data,$e);
              if(t == "delete"){
                if($e.attr("delete-item")=="true"){
                  var li_to_delete = $e.parentsUntil("li[item=true]").find("li[item=true]");
                  li_to_delete.slideUp();
                }
              }
            }
        });
      }
      if($e.attr("confirm-message")){
        o.confirm({
          buttons : ["Yes","No"],
          highlighted : 2,
          message : $e.attr("confirm-message")
        },function(value){
          if(value){
            a();
          }
        })
      }else{
        a();
      }
      return false;
    });

    $(window).resize(function(){
      $('.tinycanvas').tinyscrollbar_update('relative'); 
      if($("body").find("div.app_frame").length > 0){
        $("body").find("div.app_frame").each(function(){
          var app_holder_height = $(this).height() - 60;
          var app_holder_width = $(this).width();
          $(this).find("div.app_holder").height(app_holder_height);
          $(this).find("div.app_holder iframe").attr({"height":app_holder_height,"width":app_holder_width});
        });
      }
    });

    var $widget_fn = $('.widget_fn'),$fn_des = $('.fn_des');
    $widget_fn.hover(function(){
      var fn_name = $(this).find('img').attr('alt'),nth = $(this).parents('.d_cate').index(),des_left = $('.dock_child').eq(nth).width();
      $(this).addClass('thmc1');
      $fn_des.text(fn_name).css({'top':nth * 60,'left': des_left + 60}).stop(true, true).fadeIn();
    },function(){
      $(this).removeClass('thmc1');
      $fn_des.stop(true, true).fadeOut();
    });

    var split = function( val ) {
        return val.split( /,\s*/ );
    }
    var extractLast = function( term ) {
        return split( term ).pop();
    }
  };

  this.layout_data = function(h){
    var $e;  
    var column_container,layout, base_width , no_of_entries = 0, pagination_link , pagination_variable, gutter, total_width;   
    o.paging = true;
    gutter = (!isNaN(gutter)) ? gutter : 12;
    this.layout_data.generate_layout_html = function(l){
      $e = $("<div></div>");
      $e.html(l);
      column_container = $e.find("div.overview"),
      layout = column_container.attr("content-layout"),
      base_width = parseInt(column_container.attr("base-width")),
      no_of_entries,total_columns = 0,
      pagination_link = column_container.attr("pagination-link"),
      pagination_variable = column_container.attr("pagination-var");   
      var temp_div = $("<div></div>");
      var entries = [];
      switch (layout){
        case "simple":
          total_columns++;
          temp_div.append(column_container.html());
          total_width = "auto";
        break;
        case "datalist":
          no_of_entries = (typeof column_container.attr("per-column") != "undefined"? parseInt(column_container.attr("per-column")) : 4);
          var height_percentage = 100/no_of_entries;
          entries = column_container.find("li[item=true]"),x = 0;
          if(entries.length != 0){
            entries.each(function(i,li){
              if(x == 0){
                column = $("<div class='column type_datalist' style='width:"+base_width+"px;margin-right:"+gutter+"px;padding-right:"+gutter+"px;'><ul></ul></div");
                total_columns++;
              }
              $(li).wrapInner('<div class="inner"/>').addClass("datalist_item").height(height_percentage+"%");
              column.find("ul").eq(0).append(li);
              x++;
              if(x == no_of_entries){
                x = 0;
                temp_div.append(column);
              }
            })
            if(x != 0){
              temp_div.append(column);
            }
          }
          total_width = (!isNaN(base_width)) ? (base_width + gutter*2 +1) * total_columns : null;
        break;
        case "column":
         var column,x = 0;
          entries = column_container.find("div[column=true]");
          if(entries.length!=0){
            entries.each(function(i,ul){
             column = $("<div class='column type_column' style='width:"+base_width+"px;margin-right:"+gutter+"px;padding-right:"+gutter+"px;'></div");
              total_columns++;
              column.append(ul);
              x++;
              temp_div.append(column);
            })
            total_width = (!isNaN(base_width)) ? (base_width + gutter*2 +1) * total_columns : null;
          }
        break;
        default:
        break;
      }
      // total_width = (!isNaN(base_width) ? ( base_width + 12 ) * total_columns : null);
      return {
        "markup":temp_div.html(),
        "width":total_width,
        "total":entries.length
      };
    }
    var check_container = $("<div></div>").html(h).find("div[container=true]");
    if(check_container.length > 0){
      $("div[container=true]")
        .html(check_container.html())
        .find("div.overview")
        .wrap('<div class="tinycanvas"><div class="viewport"></div></div>');
    }else{
      $("div[container=true]")
        .html(h)
        .find("div.overview")
        .wrap('<div class="tinycanvas"><div class="viewport"></div></div>');
    }
    $("div[container=true]")
      .find("div.tinycanvas")
      .prepend('<div class="scrollbar sb_h"><div class="track"><div class="thumb thmc2"><div class="end"></div></div></div></div>');
    var f = o.layout_data.generate_layout_html(h)
    $("div[container=true] div.overview").html(f.markup);
    var settings = {main : ".tinycanvas"};
    var tsettings = {};

    var ist = function(){
      $('#holder').css('height', $('#container').height() - 72);
      $('.tinycanvas').css('height', $('#holder').height() - 36);
      var dom = $("*[isotope=true]").isotope({
         layoutMode: 'fitColumns',
         onLayout: function($elems, instance){
          $elems.width(base_width);
          setTimeout(function(){
            dom.isotope('reLayout',function(){
              $("div[container=true] div.overview").width(dom.width());
              o.tinyscrollbar.tinyscrollbar_update("relative");
            })
          },500);
         }
      });
      

      $(window).resize(function(){
        if($("*[isotope=true]").length > 0){
          $('#holder').css('height', $('#container').height() - 72);
          $('.tinycanvas').css('height', $('#panel_r').height() - 36);
          $(".isotope").isotope('reLayout',function(){
            $("div[container=true] div.overview").width($(".isotope").width());
            o.tinyscrollbar.tinyscrollbar_update("relative");
          });
        }
      });
      $('.s_grid_h_full').parent().css('height','100%');
     
      return dom;
    }

    if($("*[isotope=true]").length > 0){
      var dom = ist();
      f.width = dom.width();
    }

    if(f.width){
      settings.fill = f.width;
    }
    if(pagination_variable){
      var page_no = 1;
      tsettings.onMove = function(e){
        if(e < 50){
          if(!pagination_link)
            pagination_link = o.lastlink;
          if(o.paging){
            page_no++;
            o.paging = false;
            o.pagination(pagination_link,pagination_variable,page_no);
          }
        }
      }
    }

  
    // call other functions here
    o.tinyscrollbar_ext(settings,tsettings);
    o.simple_drop_down();
    o.autocomplete();
    o.use_select2();
    o.check_simple_layout();
  }

  this.paging = true;
  this.pagination = function(link,variable,page_no){
    var retvalue = null;
    $.ajax({
      url : link + "?"+variable + "=" + page_no,
      type : "get",
      success : function(html){
        var f = o.layout_data.generate_layout_html(html);
        if($("*[isotope=true]").length > 0){
          var $ul = $(f.markup),
              elems = $ul.children("li[item=true]");
          if(elems.length > 1)
            o.paging = true;
          else
            o.paging = false;
          $(".isotope").append(elems).isotope("appended",elems,function(){
            $(".isotope").isotope("reLayout",function(){
              $("div[container=true] div.overview").width($(".isotope").width()+50);
              o.tinyscrollbar.tinyscrollbar_update("relative");
            })
          });
        }else{
          if(f.total > 0){
            $("div[container=true] .overview").append(f.markup);
            if(f.width){
              var w = $("div[container=true] .overview").width();
              $("div[container=true] .overview").width(w+f.width);
            }
            o.tinyscrollbar.tinyscrollbar_update("relative");
            o.paging = true;
          } else {
            o.paging = false;
          }
        }
      }
    });
  }

  this.insert_new_column = function(index){
    var column_container = $("div[container=true] .overview"),layout = column_container.attr("content-layout"),base_width = parseInt(column_container.attr("base-width")),column;
    var i = (index == 0? 0 : index-1);
    var previous_column = column_container.find(".column").eq(i);
    if(previous_column.length == 0)return false;
    switch(layout){
      case "datalist":
        column = $("<div class='column type_column' style='width:"+base_width+"px'></div");
      break;
      case "column":
        column = $("<div class='column type_column' style='width:"+base_width+"px'></div");
      break;
      default:
        return false;
      break;
    }
    if(index == 0){
      column.insertBefore(previous_column)
    }else{
      column.insertAfter(previous_column);
    }
    var total_columns = column_container.find(".column").length;
    o.tinyscrollbar_ext({
      main : ".tinycanvas",
      fill : base_width * total_columns
    })
    return column;
  }

  this.remove_column = function(index){
    var column_container = $("div[container=true] .overview"),layout = column_container.attr("content-layout"),column = column_container.find(".column").eq(index),base_width = parseInt(column_container.attr("base-width"));
    if(column.length == 0)return false;
    switch(layout){
      case "datalist":
      case "column":
      break;
      default:
        return false;
      break;
    }
    column.remove();
    var total_columns = column_container.find(".column").length;
    o.tinyscrollbar_ext({
      main : ".tinycanvas",
      fill : base_width * total_columns
    })
    return column;
  }

  this.menu_item = function(dom,customload,submenuitem){
    if(!customload)customload=false;
    var target = dom.attr("id"),
        url = dom.attr("href"),
        submenu_pass = ( dom.attr("sub-menu") == "false" ? false : true);
    if(!url)return false;
  
    o.data_method = dom.attr("callback-method");
    if(o.currenthtml!=target){
      if(o.desktopData[o.currentface] == "undefined"){
        o.desktopData[o.currentface] = "";
      }
      o.desktopData[o.currentface] = $(o.contentHolder).html();
      if(customload){
        $(o.contentHolder).html("<div id='content'></div>");
      }
      $("#content > #holder").toggle("drop",{ easing: "easeInOutQuint" },o.transitionTime,function(){
        o.currenthtml = target;
        o.currentface = target;
        var cache = false;
        if(!o.desktopData[o.currentface]){
          $(o.contentHolder).empty().load(url,function(data){
            if(typeof o.data_method != "undefined"){
              if(o.data_method != ""){
                window.o[o.data_method](target,url,cache);
              }
            }
            if( submenu_pass ){
              try {
                if(!customload){
                  o.sub_menu_item($(o.contentHolder).find("*[content-type=menu] a[load=true]"),data);
                } else {
                  if(submenuitem){
                    o.sub_menu_item($(o.contentHolder).find("*[content-type=menu] a[custom-load="+submenuitem+"]"));
                  } else {
                    o.sub_menu_item($(o.contentHolder).find("*[content-type=menu] a[load=true]"),data);
                  }
                }
              } catch(EX){}
            }
            header_ani();
         });
        }else{
          $(o.contentHolder).html(o.desktopData[o.currentface]);
          if( submenu_pass ){
            try{
              if(!customload){
                o.sub_menu_item($(o.contentHolder).find("*[content-type=menu] a[load=true]"),o.desktopData[o.currentface]);
              }else{
                if(submenuitem)
                    o.sub_menu_item($(o.contentHolder).find("*[content-type=menu] a[custom-load="+submenuitem+"]"),o.desktopData[o.currentface]);
                  else
                    o.sub_menu_item($(o.contentHolder).find("*[content-type=menu] a[load=true]"),o.desktopData[o.currentface]);
                }
              }catch(EX){}
            }

          // cache = (o.lastlink == "/desktop/app_manager" ? false : true);
          if(typeof o.data_method != "undefined"){
             if(o.data_method != ""){
              window.o[o.data_method](target,url,cache);
             }
          }
          header_ani();
        }
      });
      $('#header')
        .delay(600)
        .effect('drop',{
          easing: 'easeInOutQuint',
          direction: 'down'
        },300);
    }
  
    var header_ani = function(){
      $('#header').hide().toggle('drop',{easing: 'easeInOutQuint', direction:'down'});
      $('#header > *').each(function(i){
        $(this).hide().delay(i*100).fadeIn(600,'easeInOutQuint');
      });
    }
     o.lastlink = url;
  }
  this.sub_menu_item = function(dom,data){
    var sub_data_method = dom.attr('callback-method');
    if(sub_data_method){
      o.lastlink = dom.attr("href");
      $.ajax({
        url : dom.attr("href"),
        type : "get",
        success : function(data){
          o.layout_data(data);
          if(typeof o.data_method != "undefined"){
            if(o.data_method != ""){
              if(typeof sub_data_method != "undefined"){
                if(sub_data_method != ""){
                  window.o[o.data_method][sub_data_method]();
                }
              }
            }
          }
        }
      })
      o.highlight_sub_menu_item(dom);
    } else {
      o.lastlink = dom.attr("href");
      $.ajax({
        url : dom.attr("href"),
        type : "get",
        success : function(data){
          o.layout_data(data);
        }
      })
    }
    if(dom.length == 0)
      o.layout_data(data);
    // $('*[content-type=menu] a').removeClass('thmc1 thmtxt active');
    // dom.addClass('thmc1 thmtxt active');
    }

  this.initializeDesktop = function(target,url,cache){ //this is for initializing main desktops that are sections and tiles
    target = (!target) ? 'desktop' : target;
    var bindHandlers = function(){ // this function will bind all the handlers in the desktop
        var dragged = null,draggable,lastpos = [];
        /* Hotfix - Part 1 */
        // var items = $(".gridster ul li");
        // items.detach();

        o.gridvar = $(".grid ul").find("> li ")
        .mousedown(function(e){
          !draggable;
           dragged = $(this);
           lastpos = [];
           $(".grid ul li").each(function(){
            lastpos.push({"col":$(this).attr("data-col"),"row":$(this).attr("data-row")});
           });
          })
        .end()
        .gridster({
          max_rows: 4,
          shift_larger_widgets_down: false,
          widget_margins: [6, 6],
          widget_base_dimensions: [120, 120],
          serialize_params: function($w, wgd) { return { col: wgd.col, row: wgd.row, id: $w.data("id") } },
          draggable : { 
            start: function(event, ui){
              dragged.addClass("noClick");
            },
            stop: function(event, ui){
              // for (var i = 1; i <= 30; i++) {
              //   // var celement = $(".grid ul .widget[data-col="+i+"]:last");
              //   $(".grid ul .widget[data-col="+i+"]").each(function(){
              //     var pos = $(this).position();
              //     if(pos && (pos.top + $(this).height() + 6) > 550){
              //       revertbacktiles();                       
              //     }
              //   });
              // }
              $('.tinycanvas').tinyscrollbar_update('relative');
              var newpos = o.gridvar.serialize();
              $.post("/desktop/newpositions",{"newpositions":newpos});
            }
          }
        })
        .data('gridster');

        /* Hotfix - Part 2 */
        // $.each(items , function (i, e) {
        //   var item = $(this);
        //   var columns = parseInt(item.attr("data-sizex"));
        //   var rows = parseInt(item.attr("data-sizey"));
        //   var col = parseInt(item.attr("data-col"));
        //   var row = parseInt(item.attr("data-row"));
        //   o.gridvar.add_widget(item, columns, rows, col, row);
        // });

        var revertbacktiles = function(){
          lastpos.push({"col":"","row":""});
          $(".grid ul li").each(function(i){
              $(this).attr({"data-col":lastpos[i].col,"data-row":lastpos[i].row});
          });
        }
        var remove_empty_columns = function(){
          for (var i = 1; i <= 30; i++) {
            // var celement = $(".grid ul .widget[data-col="+i+"]:last");
            $(".grid ul .widget[data-col="+i+"]").each(function(){
              
            });
            break;
          }
        }
        $(".app[data-category=app]").click(function(){
          if(!$(this).hasClass("noClick")){
            var url = $(this).find("a").data("url");
            var app = $(this);
            o.appWindow({
              "appid" : app.data("id"),
              "title" : app.data("title"),
              "url" : url
            })
          }
          dragged.removeClass("noClick");

        });
        o.appname_substr('.gridster li');
        o.simple_drop_down();
        o.tinyscrollbar_ext({
          main: '.tinycanvas'
        });
    } 
    var loadTiles = function(id){  //This will load tiles for a specific desktop .. id of section has to be passed here to load tiles
      $("#desktop #group_wrapper").empty();  
      $.getJSON("/desktop/getgroups",{sectionid:id},function(tiles){
        // tiles.sort(o.sortJSON("position",true,parseInt)); 
        var tilecolors = (o.themesettings.tilecolor ? o.themesettings.tilecolor : ["thmc1","thmc2","thmc3","thmc4"]) ;
        var totaltiles_in_a_row = 4;
        var opacity = ["op07","op08","op09",""];
        var row = 0, col = 1, x = 1, y = 1, total_x = 0, prev_y = 0; 
        var $group = $('<div class="grid gridster"></div>');
        var $ul = $('<ul></ul>');
        
        $.each(tiles,function(i,tile){
          var shape = tile.shape.split(" ");
          // if(tile.title == "Weather")console.log("Big - row : " + tile.row + ", col : "+ tile.column);
          // if(tile.title == "Google Scholar")console.log("Scholar - row : " + tile.row + ", col : "+ tile.column);

          // if(total_x % 2 != 0)
          //   row = row - y;
          // if(i == 7)tile.row = null;
          if(tile.row){
            row = tile.row;
            col = tile.column;
            x = parseInt(shape[0].substr(1,1));
            y = parseInt(shape[1].substr(1,1));
          }else{
            x = parseInt(shape[0].substr(1,1));
            if(total_x % 2 == 0){
              row = row + y;  
            }else if(x == 1){
              col++;
            }
            y = parseInt(shape[1].substr(1,1));
            total_x = total_x + ( x * y );
            prev_y = y;
            if(total_x > 8){
              row = 1;
              total_x = 0;
              col++;
            }
          }
          var tilecolor = tilecolors[Math.floor(Math.random()*tilecolors.length)];
          var op = opacity[Math.floor(Math.random()*opacity.length)];
          var f = (tile.fullsize?"fullsize":null);
          
          if(tile.data_category == "app"){
            $li =  $('<li data-id="'+tile.id+'" class="app" data-row="'+row+'" data-col="'+col+'" data-sizex="'+x+'" data-sizey="'+y+'" data-title="'+tile.title+'" data-category="'+tile.data_category+'" data-content="'+tile.data_content+'"><span class="tile '+tilecolor+' '+op+'"></span><a href="'+tile.data_content+'" class="appicon"  onclick="return false;" data-url="'+tile.link+'"><img src="'+tile.icon+'" alt="" ></a><h1 class="appname thmtxt">'+tile.title+'</h1></li>');
          } else {
            $li =  $('<li data-id="'+tile.id+'" class="widget '+f+'" data-row="'+row+'" data-col="'+col+'" data-sizex="'+x+'" data-sizey="'+y+'" data-category="'+tile.data_category+'" data-content="'+tile.data_content+'" js-link="'+tile.js[0].url+'" css-link="'+tile.css.url+'"><span class="tile '+tilecolor+' '+op+'"></span><div class="appholder"></div><h1 class="appname thmtxt">'+tile.title+'</h1></li>');
          }

          
          
          $ul.append($li);
        });
        $group.append($ul);
        $("#desktop #group_wrapper").append($group);
       
        bindHandlers();
        o.initializeWidgets();
      });
    }
    var loadSectionList = function(){  //This will load the section list from the db
      $.getJSON("/desktop/getsectionlist",{desktopid:o.desktopId},function(sectionlist){
        o.sectionList = sectionlist;
        $.each(sectionlist,function(i,section){
          var tempstyle="";
          if(i==0){
            tempstyle = "style='display:none;'";
            $("#desktop #section_heading").text(section.name);
          }
          $("#desktop #section_list").append($('<li class="section_name" '+tempstyle+'><a class="admtxt hp hh1" onclick="return false;" href="'+section._id+'" >'+section.name+'</a></li>'));
        });
        bindSecondaryHandlers();
        o.simple_drop_down();
      })
    } 
    var bindSecondaryHandlers = function(){ //This is the secondary bind handler function which is used to bind events which are repeatative  
      $("#desktop #section_list .section_name").click(function(){
        $("#desktop .section_name").show();
        $(this).hide();
        $("#desktop #section_heading").text($(this).text());
        o.sectionId = $(this).find("a").attr("href");
        loadTiles(o.sectionId);
      });
    }
    if(cache){
      bindHandlers();
      o.initializeWidgets();
      $("#desktop #section_list").empty();
      $.each(o.sectionList,function(i,section){
        var tempstyle="";
        if(section._id==o.sectionId){
          tempstyle = "style='display:none;'";
          $("#desktop #section_heading").text(section.name);
        }
        $("#desktop #section_list").append($('<li class="section_name" '+tempstyle+'><a class="admtxt hp hh1" onclick="return false;" href="'+section._id+'" >'+section.name+'</a></li>'));
      });
      bindSecondaryHandlers();
      o.simple_drop_down();
    }else{
      loadSectionList();
      loadTiles(o.sectionId);
    }
  }

  this.tempFunc = function(th){
    $.post("desktop/twitter",function(){});
  };

  this.initializeAppManager = function(target,url,cache){   //this is application search ie is app manager initialization
    var searchArray, allApps;

    var bindHandlers = function(){ // bind handler for app manager page
      // var gn = $('.g_col').length,
      //     gw = $('.g_col').outerWidth(true);
      // $("#app_manager #group_wrapper").css("width",gn*gw);
      // $("div#app_manager .group_search").css("width",$(window).width()-200);
      //for textbox search
      var $elements = $("#app_manager .element"),
          $result = $("#app_manager .search_result"),
          $appinfo = $("#app_info"),
          $applist = $("#app_list"),
          $apptitle = $appinfo.find(".app_info_name"),
          $appicon = $appinfo.find(".app_info_icon"),
          $appinfolist = $appinfo.find(".app_info_list"),
          $canvas = $result.parents('.overview'),
          current_width = $canvas.css('width');

      $("#app_manager #searchbox")
        .focus(function(){
          $(this).val("");
        })
        .keyup(function(e){
          var query = $(this).val();
          if(query){
            $appinfo.hide().attr('style','');
            $result.empty().show();
            $applist.hide();

            // searchArray = $elements.filter(":containsi("+$(this).val()+")").clone(1,1);
            // searchArray = $('#app_list').find('[data-title*="'+query+'"]').clone(1,1);
            searchArray = $elements.filter(function(){
              var matcher = new RegExp(query, "i");
              return matcher.test( $(this).attr('data-title') );
            }).clone(1,1);
            
            if(searchArray.length > 0){
              // searchArray.each(function(){
              //   $(this).hide("fold","fast");
              // })
              // $("#app_manager #seperator").show();
              var i = 0, c = 1; // c for numbers of columns
              var $column;
              searchArray.each(function(){
                i++;
                if(i == 1){
                  $column = $('<div class="g_col g_col_w1"></div>');
                }
                $column.append($(this));
                $(this).show();
                if(i == 4){
                  $result.append($column);
                  i = 0;
                  c++;
                }
              });
              if(i != 0){
                $result.append($column);
                c*=132;
                searchArray
                  .eq(0)
                  .parents('.overview')
                  .animate({
                    'width': c
                  },0, function(){
                    $(this)
                      .parents('.tinycanvas')
                      .tinyscrollbar_update();
                  });
              }
            } else {
              var $no_result = $('<div class="w2 h1 thmtxt thmc2 vp hp message"><span class="tile"></span>No result for <b></b></div>');
              $no_result
                .find('b')
                .text('"'+$(this).val()+'"')
                .end()
                .show()
                .appendTo($result);
              $canvas.animate({
                'width':252
              }, 0, function(){
                $(this)
                  .parents('.tinycanvas')
                  .tinyscrollbar_update();
              });
            }
          } else if( query == "" ) {
            info_close();
            $result.empty();
            $applist.show();
            $canvas.css('width',current_width);
          }
        })
        .blur(function(){
          if($(this).val()==""){
            $(this).val("Search");
          }
        });

      //for Alphabet sorting
      $("#app_manager #alphabet_sort_btn").click(function(){
        switch ($(this).attr("href")){
          case "ascending":
            $(this).attr("href","descending").find(".thmtxt").text("Alphabet [Z-A]");
            allApps = $("div#app_manager .element").sort(sortAscending);
            break;
          case "descending":
            $(this).attr("href","ascending").find(".thmtxt").text("Alphabet [A-Z]");
            allApps = $("#app_manager .element").sort(sortDescending);
            break;
        }
        $("#app_manager #app_list").empty();
        var count = 0, colindex = 0;
        $('#app_list').append('<div class="g_col g_col_w1 col'+ colindex +'"/>');
        $.each(allApps,function(i,app){
          count++;
          if( count > 4 ){
            count = 1, colindex+=1;
            $('#app_list').append('<div class="g_col g_col_w1 col'+ colindex +'"/>');
            $('.g_col.col'+ colindex).append(app);
          } else {
            $('.g_col.col'+ colindex).append(app);
          }
        });
        elementSetting();
        return false;
      });

      var elementSetting = function(){// for element setting load
        $elements.click(function(){
          var $e = $(this);
          $apptitle.text($e.data("title"));
          $appicon.attr("src",$e.find("img").attr("src"));
          $appinfolist.find("[info=app_version]").text($e.data("version"));
          var dt = new Date($e.data("update"));
          $appinfolist.find("[info=app_last_update]").text(dt.toUTCString());
          $appinfolist.find("[info=app_author]").text($e.data("author"));
          $appinfo
            .find(".app_info_header")
            .attr('style','')
            .css({
              "background-color": $e.data("background"),
              "color": $e.data("text-color")
            });
          var sections = elementSettingsData[$e.data("id")].sections;

          var sectionids = new Array();
          $.each(sections,function(i,sec){
            sectionids.push(sec.id);
          })

          $appinfolist.find("[info=app_section_activation]").empty();
          $.each(o.sectionList,function(i,sec){

            var present = $.inArray(sec._id,sectionids);
            if(present == -1){
              $sectionswitch = $('<div class="s_grid_row"><label class="s_grid s_grid_3">'+ sec.name +'</label><div class="s_grid s_grid_6 s_switch"><div class="s_switch_status" status-off="Off" status-on="On">Off</div><label class="s_switch_switcher admbg2"><input type="checkbox" data-widget="'+ $e.data("id") +'" data-section="'+ sec._id +'" data-type="'+$e.data("type")+'"><span class="s_switch_toggle"></span></label></div></div>');
            }else{
              $sectionswitch = $('<div class="s_grid_row"><label class="s_grid s_grid_3">'+ sec.name +'</label><div class="s_grid s_grid_6 s_switch"><div class="s_switch_status" status-on="On" status-off="Off">On</div><label class="s_switch_switcher thmc2"><input type="checkbox" checked="checked" data-widget="'+ $e.data("id") +'" data-section="'+ sec._id +'" data-type="'+$e.data("type")+'"><span class="s_switch_toggle"></span></label></div></div>');
            }
             $appinfolist.find("[info=app_section_activation]").append($sectionswitch);
          });
          info_open();
          o.simple_switch(function(dom){
            var options = {
              "status" : dom.is(":checked"),
              "id" : dom.data("widget"),
              "section_id" : dom.data("section"),
              "type" : dom.data("type")
            }
            var sectionDetails = o.sectionList.filter(function(o){return(o._id == dom.data("section"))})[0];
            $.ajax({
              url : "/desktop/appactivation",
              type : "post",
              datatype : "json",
              data : options,
              success : function(data){
                if(data.success == "true"){
                  if(dom.is(":checked")){ 
                    elementSettingsData[$e.data("id")].sections.push({"id" : dom.data("section"),"name":sectionDetails.name});
                    o.notify("Added to " + sectionDetails.name,"success");
                  }else{
                    var index = elementSettingsData[$e.data("id")].sections.indexOfObject(elementSettingsData[$e.data("id")].sections.filter(function(a){return a.id == dom.data("section")})[0]);
                    elementSettingsData[$e.data("id")].sections.splice(index,1);
                    o.notify("Removed from " + sectionDetails.name,"success");
                  }
                }
              }
            });
          });
          return false;
        });
      }

      $appinfo.find("a.panel_close").click(function(){
        info_close();
        return false;
      });

      var info_open = function(){
        if($appinfo.is(":hidden")){
          $('.overview').stop().animate({'width': '+=480'},0 , function(){
            // $('.tinycanvas').tinyscrollbar_update('relative');
          });
          $appinfo
            .css({
              'margin-left': -480
            }).fadeIn(200)
            .animate({
              'margin-left': 0
            }, 500, 'easeInOutQuint');
        } 
      }

      var info_close = function(){
        if( $appinfo.is(":visible") ){
          $appinfo
            .stop()
            .animate({
              'margin-left': -480
            },500 , 'easeInOutQuint', function(){
              $('.overview').animate({'width': '-=480'}, 0, function(){
                // $('.tinycanvas').tinyscrollbar_update();
              });
              $(this).fadeOut(300).attr("style","");
            });
        } 
      }
      $(window).on('keydown', function(){
        if($('#searchbox').val() == 'Search'){
          $('#searchbox').focus();
        }
      });
      elementSetting();
      o.appname_substr('#group_wrapper .element');
      o.check_simple_layout();
    }
    var elementSettingsData = {};
    var loadApps = function(){ //this load apps for sorting and searching
      $('#app_info').attr('style','');
      $('.search_result').hide().text("");
      $('#app_list').empty().show();
      $.getJSON("/desktop/getapplistforManager",{desktopid:o.desktopId},function(apps){
        var count = 0,
            colindex = 0,
            apps_sum = apps.length,
            col_sum;

        col_sum = (apps_sum - (apps_sum % 4)) / 4 + 1;
        
        $('#app_list')
          .css('width',col_sum * 132)
          .append('<div class="g_col g_col_w1 col'+ colindex +'"/>');

        $.each(apps,function(i,app){
          var $app;
          count++;
          elementSettingsData[app.id] = {"sections" : app.sections};
          $app = $('<div class="element w1 h1 thmc2" data-type="'+app.data_category+'" data-title="'+app.title+'" data-author="'+app.author+'" data-version="'+app.version+'" data-update="'+app.last_update+'" data-id="'+app.id+'" data-text-color="'+app.text_color+'" data-background="'+app.background+'" ><span class="tile thmc2"></span><a href="'+app.id+'" class="appicon"><img src="'+app.icon+'" alt="" onclick="return false;"></a><h1 class="appname thmtxt">'+app.title+'</h1></div>');
          if( count > 4 ){
            count = 1, colindex+=1;
            $('#app_list').append('<div class="g_col g_col_w1 col'+ colindex +'"/>');
            $('.g_col.col'+ colindex).append($app);
          } else {
            $('.g_col.col'+ colindex).append($app);
          }
        });
        bindHandlers();
      });
    }
    // if(cache){
    //   bindHandlers();
    // } else {
      loadApps();
    // }
  };
  

  this.initializeSettings = function(target,url,cache){ //this is to initialize setting page

    this.initializeSettings.account = function(data){}
    this.initializeSettings.passwordUpdate = function(data){
      if(data.success){
        o.notify(data.msg,"success");
      }else{
        o.notify(data.msg,"alert");
      }
    }

    this.initializeSettings.sections = function(){ // this load section page in setting page 
      var bindHandlers = function(){ // binding handlers in section page
        
        $("#name_save_btn").click(function(){
          var desktopnm = new Array;
          $("#desktop_names input").each(function(){
            desktopnm.push($(this).val());
          })
          $.post("/desktop/save_desktop_settings",{"save":"desktopnames","desktopid":o.desktopId,"desktopnms":desktopnm},function(result,status){
            if(result[0].success=="true"){
              o.notify("Names Saved!!","success",2);
            }else
            o.notify("Name saving failed!!","imp",2);
          })
          $.each(o.sectionList,function(i,sec){
            sec.name = desktopnm[i];
          })
        })
      }

      $.getJSON("/desktop/get_desktop_settings",{"get":"sectionnames","desktopid":o.desktopId},function(sectionnames){
        $("#desktop_names input").each(function(i){
          $(this).val(sectionnames[i]);
        })
        bindHandlers();
      })


    }
    this.initializeSettings.themes = function(){ // this opens themes page in setting page
      var bindHandlers = function(){ // binding handlers in themes page
        // live change theme
        $(".theme_list > .ssl_item").click(function(){
          o.changeTheme($(this).attr("id"));
          // $(".theme_list > li").removeClass('thmc1').data('clicked',null).find('.theme_name').removeClass('thmtxt');
          // $(this).addClass('thmc1').data('clicked',true).find('.theme_name').addClass('thmtxt');
          $.post("/desktop/save_desktop_settings",{"save":"theme","desktopid":o.desktopId,"theme":$(this).attr("id")},function(result,status){
            if(result[0].success=="true"){
              o.notify("Theme Saved!!","success",2);
              loadthmc();
            } else {
              o.notify("Theme saving failed!!","imp",2);
            }
          });
        });
        o.single_select();
        o.simple_tab();

        $('.color-picker').miniColors({
          change:function(hex){
            var changewhat = $(this).attr("for");
            var previewarea = $("#theme_preview_area");
            switch(changewhat){
              case "thmtxt":
              case "thmtxth":
                previewarea.find("."+changewhat).css({"color":hex});
                break;
              case "g_sep":
                previewarea.find("."+changewhat).css({"border-color":hex});
                break;
              case "background":
                previewarea.css({"background-color":hex});
                break;
              default:
                previewarea.find("."+changewhat).css({"background-color":hex});
                break;
            }
          }
        });

        $("#theme_submit").click(function(){
          o.confirm({
            message : "Are you sure that you want to save custom theme?",
            highlighted : 1,
            buttons : ["Yes","No"]
          },function(reply){
            if(reply){
              var colors = new Array;
              $("#color_input input").each(function(){
                colors[$(this).attr("for")] = $(this).val();
              })
              var dhtml ="<style> .thmc1 { background: "+colors['thmc1']+"; }.thmc2 { background: "+colors['thmc2']+"; }.thmc3 { background: #FFFFFF; }.thmc4 { background: "+colors['thmc4']+"; }.thmtxt { color: "+colors['thmtxt']+"; }.thmtxth { color: "+colors['thmtxth']+"; }.g_sep { border-color: "+colors['g_sep']+";} body{background-color: "+colors['background']+"} </style>";
              $("head").find("#dyn_css").remove();
              $("head").append(dhtml);
              $.post("/desktop/save_desktop_settings",{"save":"customtheme","desktopid":o.desktopId,"theme":dhtml},function(result,status){
                if(result[0].success=="true")
                o.notify("Custom theme saved!!","success",2);
                else
                o.notify("Custom theme saving failed!!","imp",2);
              })
            }
          })
        });

        $(".stock_wallpaper .ssl_item").click(function(){
          var wallpaper = $(this).find("img").data("link");
          o.changeWallpaper(wallpaper);
        })
      }
      var loadthmc = function(){ // a general function to load the themecolor in color selector
        $('.color-picker').each(function(){
          var cc = $(this).attr('for'), hex, color;
          switch(cc){
            case 'thmtxt':
            case 'thmtxth':
              hex = 'color';
              break;
            case 'g_sep':
              hex = 'border-left-color';
              break;
            default:
              hex = 'background-color';
              break;
          }
          if(cc=="background")
          color = $("#theme_preview_area").css("background-color");
          else
          color = $('#theme_preview_area .'+cc).css(hex);
        $(this).miniColors("value", o.rgb2hex(color));
        });
      }


      $.getJSON("/desktop/get_desktop_settings",{"get":"theme","desktopid":o.desktopId},function(theme){
        $('#st1 .theme_list [id='+theme+']')
        .addClass("thmc1 active", 300)
        .find("span")
        .addClass("thmtxt");

      bindHandlers();
      loadthmc();
      })

    }

    this.initializeSettings.connection = function(){

      var bindHandlers = function(){
        $("#connection_setting ul a").click(function(){
          var what = $(this).attr("for"),
        type = $(this).attr("href"),
        $ul = $("#"+type+"_connection"),
        usernm = $ul.find("input[type=text]").val(),
        pwd = $ul.find("input[type=password]").val();
        switch(what){
          case "save":
          case "new":
            if(usernm!="" && pwd!=""){
              $ul.find("input[type=text]").replaceWith("<div class='c_info usrnm'>"+usernm+"</div>")
          $ul.find("input[type=password]").replaceWith("<div class='c_info pwd'>&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;</div>");
        $(this).text("Edit").attr("for","edit");
        $(this).parent().find("a[for=delete]").show();
        $ul.find("span.c_status").text("Connected").addClass("c_status_on");
        if(what=="save")
          what="edit";
        saveaccount(usernm,pwd,type,what);
            }
            break;
          case "edit":
            var un = $ul.find("div.usrnm").text();
            $ul.find("div.usrnm").replaceWith('<input type="text" value="'+un+'">');
            $ul.find("div.pwd").replaceWith('<input type="password">');
            $(this).text("Save").attr("for","save");
            break;
          case "delete":
            var $this = $(this);
            o.confirm({
              message : "Are you sure that you want to remove this account?",
              buttons : ["Yes","No"],
              highlighted : 2
            },function(reply){
              if(reply){
                $this.hide();
                $ul.find("div.usrnm").replaceWith('<input type="text">');
                $ul.find("div.pwd").replaceWith('<input type="password">');
                $ul.find("span.c_status").text("No Connection").removeClass("c_status_on");
                $this.parent().find("a[for=edit]").text("Connect").attr("for","new");
                saveaccount("","",type,what);
              }
            })
            break;
        }
        })

        var $conlist = $('.s_form'),
            conlist_w = $conlist.length * $conlist.outerWidth(true) + ($conlist.length - 1) * 25;

        $('#connection_setting').width(conlist_w);


      }
      var saveaccount = function(usernm,pwd,type,what){
        $.post("/desktop/save_account_info",{email:usernm,password:pwd,account:type,dowhat:what},function(result){
          if(what!="delete"){
            if(result[0].success=="true")
          o.notify(type+" account connected!!","success",2);
            else
          o.notify(type+" account connection failed!!","imp",2);
          }else{
            if(result[0].success=="true")
          o.notify(type+" account removed!!","success",2);
            else
          o.notify(type+" account removal failed!!","imp",2);
          }
        })
      }

      // $.getJSON("/otheraccounts/getaccounts",function(accounts){
      //   $.each(accounts,function(i,account){
      //     $ul = $("#"+account.type+"_connection");
      //     $ul.find("input[type=text]").replaceWith("<div class='c_info usrnm'>"+account.email+"</div>")
      //     $ul.find("input[type=password]").replaceWith("<div class='c_info pwd'>&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;</div>");
      //   $ul.find("a[for=new]").text("Edit").attr("for","edit");
      //   $ul.find("a[for=delete]").show();
      //   $ul.find(".c_status").text("Connected").addClass("c_status_on");
      //   })
      //   bindHandlers();
      // })


    }
  };
  this.initializeOrbitTimeline = function(target,url,cache){

    var timeline = new orbitTimeline("#timeline");
    timeline.initialize();

  };
  
  this.initializeAppstore = function(target,url,cache){


    this.initializeAppstore.widgets = function(){
      var bindHandlers = function(){
        $("#widget_list a").click(function(){
          var sectionid = $(this).attr("for");
          var widgetid = $(this).parent().parent().attr("for");
          switch($(this).attr("href")){
            case "addthis":
              $this = $(this);
              o.confirm({
                message: "Are you sure you want to add this widget?",
                buttons: ['Yes','No'],
                highlighted: 1
              },function(reply){
                if(reply){
                  $.post("desktop_appstore/widgets_settings",{section:sectionid, widget:widgetid, what:"add"},function(result){
                    if(result[0].success){
                      $this.attr("href","removethis");
                      $targetDom = $this.parent().parent().find("div.status");
                      $parentDom = $this.parent();
                      if($targetDom.find("a").length == 0)
                    $targetDom.html("Status : Installed on");
                  $targetDom.append(" ").append($this);
                  if($parentDom.find("a").length == 0)
                    $parentDom.empty();
                  o.desktopData["home"]="";
                  o.notify("Widget added.","success",2);
                    }else{
                      o.notify(result[0].error,"imp",2);
                    }
                  })
                }
              })
              break;
            case "removethis":
              $this = $(this);
              o.confirm({
                message: "Are you sure you want to remove this widget?",
                buttons: ['Yes','No'],
                highlighted: 2
              },function(reply){
                if(reply){
                  $.post("desktop_appstore/widgets_settings",{section:sectionid, widget:widgetid, what:"remove"},function(result){
                    if(result[0].success){
                      $this.attr("href","addthis");
                      $targetDom = $this.parent().parent().find("div.not_status");
                      $parentDom = $this.parent();
                      if($targetDom.html()=="")
                    $targetDom.html("Install on");
                  $targetDom.append(" ").append($this);
                  if($parentDom.find("a").length == 0)
                    $parentDom.html("Status : Downloaded");
                  o.desktopData["home"]="";
                  o.notify("Widget removed.","success",2);
                    }
                  })
                }
              })
              break;
          }
          return false;
        });

        o.tinyscrollbar_ext({
          main: '.tinycanvas',
          fill: '.list_t'
        })
      }


      $.getJSON("/desktop_appstore/getuserwidgets",function(userwidgets){
        var column = $('<div class="g_col list_t"><ul></ul></div>'),
      counter = 1,
      li;
      $.each(userwidgets,function(i,widge){
        if(!widge.status)widge.status = "Downloaded";
        var brick = widge.shape.split(' '),
        bw = parseInt(brick[0].substr(1)),
        bh = parseInt(brick[1].substr(1)),
        shp = bw+" X "+bh;
      li = $('<li class="list_t_item" for="'+widge._id+'"><div class="list_t_title">'+widge.name+'</div><div class="list_t_des">Author : '+widge.author+'</div><div class="list_t_des">Shape : '+shp+'</div><div class="list_t_des status">Status : '+widge.status+'</div><div class="list_t_des not_status"></div></li>');
      var cur_section_names = new Array();
      var section_names = new Array();
      var section_links = new Array();
      if(widge.section){
        var s_name_list = "";
        $.each(widge.section,function(x,sec){
          $.each(o.sectionList,function(j,s){
            if(s._id==sec){
              cur_section_names.push(s.name);
              s_name_list+= "<a href='removethis' for='"+s._id+"' style='text-decoration:underline;'>"+s.name +"</a> ";
            }
          })
        })
        var section_names = o.getArrayfromJson(o.sectionList,"name");
        var section_links = o.getArrayfromJson(o.sectionList,"_id");
        var s_name_list_not = "";
        $.each(section_names,function(j,sec_name){
          if($.inArray(sec_name,cur_section_names)==-1){
            var sec_link = section_links[j];
            s_name_list_not+= "<a href='addthis' for='"+sec_link+"' style='text-decoration:underline;'>"+sec_name+"</a> ";
          }
        })
        li.find(".status").html("Status : Installed on "+s_name_list);
        if(s_name_list_not)
          li.find(".not_status").html("Install on "+s_name_list_not);
      }else{
        li.find(".not_status").html("Install on <a href='addthis' for='"+o.sectionList[0]._id+"' style='text-decoration:underline;'>"+o.sectionList[0].name+"</a> <a href='addthis' for='"+o.sectionList[1]._id+"' style='text-decoration:underline;'>"+o.sectionList[1].name+"</a> <a href='addthis' for='"+o.sectionList[2]._id+"' style='text-decoration:underline;'>"+o.sectionList[2].name+"</a> <a href='addthis' for='"+o.sectionList[3]._id+"' style='text-decoration:underline;'>"+o.sectionList[3].name)+"</a>";
      }
      //console.log(section_names);   
      column.find("ul").append(li);
      if(counter%4==0){
        $("#apps_store #widget_list").append(column);
        column = $('<div class="g_col list_t" style="width:350px;"><ul></ul></div>');
      }
      counter++;
      })
      $("#apps_store #widget_list").append(column);

      })

    }
    this.initializeAppstore.onlinestore = function(){
      var bindHandlers = function(){

      }

      bindHandlers();

    }
    this.initializeAppstore.onlinestore();
    bindHandlers();
  }
 
  this.loadWallpaper = function(wallpaper){  // this is to load new wallpaper 
    var img_path = (!wallpaper) ? o.themesettings.background : o.wallpaperPath+wallpaper;
    $("#thmbackground").attr("style","background-image: url("+img_path+");");
  };

  this.loadIconCache = function(){  // this function load or refresh icon cache for the theme
    var imgs = $(".docklist img");
    $.each(imgs,function(){
      var setting_name = $(this).attr("id").replace("_icon","");
      $(this).attr("src","/assets/desktop/icons/"+o.themesettings.icons[setting_name])
    })
  };
  this.initializeWidgets = function(){ // this function will initialize all the widgets in the desktop
    var elements = $("#group_wrapper .widget"),
        loading = '<div class="thmtxt o-loading"><i class="icon-spin icon-spinner"></i> Loading</div>';
    $.each(elements,function(){
      var widget = $(this),
          widget_holder = $(this).find('.appholder')
          // widget_style = (widget.find('.widget_style').length > 0) ? '' : '<link class="widget_style" rel="stylesheet" href="'+widget.attr("css-link")+'" type="text/css" />';
      if(widget.attr("data-category")=="widget"){
        var widgetname = widget.attr("data-content");
        // widget_holder.before(widget_style).empty();
        $.getScript(widget.attr("js-link")).done(function(){
          // widget.find(".appholder").load(widget.attr("data-content"));
          $.ajax({
            url: widgetname,
            beforeSend: function(){
              widget_holder.html(loading);
            },
            success: function(html){
              widget_holder
                .css('top','100%')
                .html(html);
            },
            complete: function(){
              widget_holder
                .delay(300)
                .animate({top:'0'},500,'easeInOutQuint');
            }
          });
        });
        // $(this).find(".appholder").append( '<link rel="stylesheet" href="'+widget.attr("css-link")+'" type="text/css" />');
      }

    });
  };
  this.saveWallpaper = function(wallpaper){ // this function saves wallpaper in db
    $.post("/desktop/save_desktop_settings",{"save":"wallpaper","wallpapernm":wallpaper,"desktopid":o.desktopId},function(result){
      if(result[0].success=="true")
      o.notify("Wallpaper saved!!","success",2);
      else
      o.notify("Wallpaper saving failed!!","imp",2);
    })
  };
  this.tinyscrollbar_ext = function(target,tinysettings){
    //main : dom on which tinyscrollbar has to be applied
    //fill : number or object for width
    //height : height for the target element
    //tinysettings : tinyscrollbar settings

    if(typeof target.main == "undefined"){
      o.notify('Tinyscrollbar: target undefined','imp',2);
      return;
    }else{
      target.main = $(target.main);
    }
    
    var settings = {"axis":"x"};
    if(typeof tinysettings != "undefined")
      $.map(tinysettings,function(val,i){ settings[i] = val })
    var count,baseWidth,fillArray,pxs;
   
    if( typeof target.fill == 'string' ){
      // fillArray = target.main.find(target.fill);
      // count = fillArray.length;
      // baseWidth = $(target.fill).eq(1).outerWidth(true);
      // target.main.find('.overview').width( baseWidth * count);
    } else if( typeof target.fill == 'number' ){
      target.main.find('.overview').width( target.fill );
    } else if( typeof target.fill == 'undefined' ){

    } else {
      o.notify('Tinyscrollbar: setting width failed','imp',2);
    }
    if(target.height){
      target.main.height(target.height);
    }

    o.tinyscrollbar = target.main.tinyscrollbar( settings );
  };
  this.check_simple_layout = function(){
    // use for various width of columns inside canvas(.overview)
    // only count width for visible element which has "s_column" class
    // then set width to canvas
    // ** not sure to update canvas here ( $.tinyscrollbar_update() )
    var sw = 0,
        $simple_layout = $('#content .overview[content-layout=simple]');
    if($simple_layout.find(".s_column").length > 0){
      $simple_layout.each(function(){
        $(this).find(".s_column").filter(":visible").each(function(){
          sw += $(this).outerWidth();
        });
        $simple_layout.css('width',sw);
      });
    }
    // if($simple_layout.find(".s_column").length > 0){
    //   $simple_layout.css('width',sw);
    // }
  };
  this.simple_drop_down = function(){
    // simple dropdown menu
    var $sdm = $('.sdm');
    if( $sdm.find('.sdm_o') ){
      $sdm.find('a').andSelf().on({
        mouseenter: function(){
          $(this).addClass('thmc2 thmtxt');
        },
        mouseleave: function(){
          $(this).removeClass('thmc2 thmtxt');
        }
      });
    }

  };
  this.simple_tab = function(){
    // tab
    var $anchor = $('.s_tab a[href*=#]'),
        $tabcontent = $('.st_c');

    $anchor.each(function(){
      $(this).click(function(){
        var target = $(this).attr('href');
        $anchor.removeClass('thmc2 thmtxt admtxt admbg').addClass('admtxt admbg');
        $(this).toggleClass('thmc2 thmtxt admtxt admbg');
        $tabcontent.hide();
        $(target).show();
        if( $('.tinycanvas').length > 0 ){
          $('.tinycanvas').tinyscrollbar_update();
        }
        return false;
      });
    });
  };

  this.simple_switch = function(func){
    $('.s_switch').each(function(){
      var $switcher = $(this).find('.s_switch_switcher'),
          $checkbox = $(this).find('input[type=checkbox]'),
          $status = $(this).find('.s_switch_status'),
          toggle = '<span class="s_switch_toggle"></span>',
          status_on = $status.attr('status-on'),
          status_off = $status.attr('status-off'),
          ini, set;
      ini = ($switcher.hasClass('admbg2')) ? null : $switcher.addClass('admbg2');
      ini = ($switcher.find('.s_switch_toggle').length < 1) ? $checkbox.after(toggle) : null;
      set = ($checkbox.is(':checked')) ? $status.text(status_on) : $status.text(status_off);
      $checkbox.unbind().change(function(){
        var v = $(this).attr('checked');
        switch (v) {
          case 'checked':
            $switcher.switchClass('admbg2','thmc2');
            $status.text(status_on);
          break;
          case undefined:
            $switcher.switchClass('thmc2','admbg2');
            $status.text(status_off);
          break;
        }
        if(typeof func == "function"){
          func.call(this,$(this));
        }
      });
    });
  };

  this.single_select = function(){
    // single select
    $('.ssl .ssl_item').each(function(){
      var $des = $(this).find('.ssl_des');

      $(this).on({
        click: function(){
          $(this).switchClass('','thmc1 active',0);
          $(this).siblings('.thmc1').switchClass('thmc1 active','',0);

          if( $des.length > 0 ){
            $(this).parents('.ssl').find('.ssl_des').removeClass('thmtxt');
            $des.addClass('thmtxt');
          }
        },
        mouseenter: function(){
          if( !$(this).hasClass('active') ){
            $(this).addClass('thmc1');

            if( $des.length > 0 ){
              $des.addClass('thmtxt');
            }
          }
        },
        mouseleave: function(){
          if( !$(this).hasClass('active') ){ 
            $(this).removeClass('thmc1');

            if( $des.length > 0 ){
              $des.removeClass('thmtxt');
            }
          }
        }
      });
    });
  }

   this.highlight_sub_menu_item = function(no){
      $('*[content-type=menu] a').removeClass('thmc1 thmtxt active');
      var dom;
      if(typeof no == "number"){
        dom = $('*[content-type=menu] a').eq(no);
        dom.addClass('thmc1 thmtxt active');
      }else if(typeof no == "object"){
        dom = no;
        dom.addClass('thmc1 thmtxt active');
      }
      return dom;
  }

  this.use_select2 = function(){
    $('select:not(.select2-offscreen)').select2({
      minimumResultsForSearch: -1
      // minimumInputLength: -1
    });
  }

  this.autocomplete = function(){
    $("*[autocomplete]").each(function(){
      $e = $(this);
      var options = {
        multiple:true,
        minimumInputLength: -1,
        width: "off",
         ajax: {
          url: $e.attr("autocomplete"),
          dataType: 'json',
          quietMillis: 100,
          tokenSeparators: [","],
          data: function (search, page) {
            return {q: search};
          },
          results: function (data, page) {
            return {results: data.results};
          }
        }
      }
      var format = $e.attr("autocomplete-format");
      if(format){
        format = format.split(":");
        var seperator = format[0];
        var fields = format[1];
        fields = fields.replace("]","");
        fields = fields.replace("[","");  
        fields = fields.split(",");
      
        options.formatResult = function(data){
            var markup = "";
            var x = 0;
            for(i = 0;i < fields.length; i++){

              if(i > 0)markup += " " + seperator + " ";
              if(data[fields[i]])
                markup += data[fields[i]];
              else
                markup += fields[i] + " not available";
            }
         
            return markup;
          }
        }
      $e.select2(options);
    })
  }

  this.appname_substr = function(target,length){
    var $target = $(target),
        length = (length && typeof length == 'number') ? length : 12,
        wrapper = '<span class="text_wrapper"/>',
        w1, w2;
    if(!$target && $target.find('.text_wrapper').length > 0){
      return;
    } else {
      for(i = 0; i < $target.length; i++){
        var $this = $target.eq(i);
        if($this.find('.appname').text().length > length + 1){
          $this.find('.appname').wrapInner(wrapper);
          w1 = $this.find('.appname').width() - 24
          w2 = $this.find('.text_wrapper').width();
          if(w2 > w1){
            var text = $this.find('.text_wrapper').text();
            slice = text.substr(0,length);
            $this.find('.text_wrapper').attr('title',text).text(slice+'...');
          }
        }
      }
    }
  }
  this.enablelanguageSelect = function(){
    $(".language_select a").click(function(event) {
        $("*[data-language]").hide();
        $("*[data-language="+$(this).data("lang")+"]").show();
        return false;
    });
  }

  this.enableSharing = function( dom ){
    var el = $( dom ),
        variable = ( el.data( 'var' ) ? el.data( "var" ) : "mode"),
        _url = el.data( 'link' ) + "?" + variable + "=",
        classes = [];

    el.find( "a" ).each( function(){
      classes.push( $( this ).attr( "item-class" ) ? $( this ).attr( "item-class" ) : $( this ).data( 'mode' ) );
    })

    el.find( "a" ).click( function(){
      var ids = [],
          mode = $( this ).data( 'mode' ),
          inject_class = $( this ).attr( 'item-class' ) ?  $( this ).attr( 'item-class' ) : mode;

      $( ".overview li[item=true] a.icon-check" ).each( function(){
        ids.push( $( this ).data( 'id' ) );
        $( "li[data-id="+ $( this ).data( 'id' ) +"]").removeClass( classes.join( " " ) ).addClass( inject_class );
      })
      $.ajax({
        url : _url + mode,
        data : {"ids" : ids},
        datatype : "json",
      })
      return false;
    })
  }

  this.minimizeBarManager = function(){
    var minimizedApps = [],
        minimizeBar = $("#minimizebar");
    this.minimizeBarManager.minimize = function(win){
      minimizedApps.push(win.attr("id"));
      var $e = generateMiniBar(win.attr("id"));
      $e.find("span[for=title]").text(win.data('title'));
      $e.one("click",function(){
        o.minimizeBarManager.maximize(win);
      });
      $e.find("span.icon-remove").one("click",function(e){
        o.appWindow.close(win);
        e.stopPropagation();
      });
      minimizeBar.append($e);
      win.hide();
      miniBarEffect();
      // var minimizeOffset = minimizeBar.offset();
      // win.animate({"left":minimizeOffset.left + "px","top":minimizeOffset.top + "px","height":"25px","width":"200px"},function(){
        
      // });
      $('body').attr('style','');
    }
    this.minimizeBarManager.maximize = function(win){
      var position = minimizedApps.indexOf(win.attr("id"));
      minimizedApps.splice(position,1);
      getMiniBar(position).remove();
      win.show();
      updatePositions();
    }
    var getMiniBar = function(position){
      return minimizeBar.find("div[data-position="+position+"]");
    }
    var generateMiniBar = function(id){
      var position = minimizedApps.indexOf(id),
           template = '<div id="mini_'+id+'" data-app-id="'+id+'" data-position="'+position+'" class="minimize w2 hh1 hp admbg admtxt"><span for="title"></span><span class="icon-remove hh1"></span></div>',
          $e = $(template);
      return $e;
    }
  var miniBarEffect = function(){
    var minimize = $('.minimize'),
        normalState = 'admbg admtxt',
        hoverState = 'thmc1 thmtxt';
        minimize.hover(
          function(){
            $(this).switchClass(normalState,hoverState, 200);
          },
          function(){
            $(this).switchClass(hoverState,normalState, 200);
          }
        );
      }
    var updatePositions = function(){
      minimizeBar.find("div.minimize").each(function(){
        $(this).attr("data-position",minimizedApps.indexOf($(this).data("app-id")));
      })
    }
  }
  o.initialize();
}

orbitDesktop.prototype.themefolder = "themes";
orbitDesktop.prototype.widgetfolder = "desktop_widgets";
orbitDesktop.prototype.desktopId = "1";
orbitDesktop.prototype.notifyImgPath = "temp";
orbitDesktop.prototype.wallpaperPath = "/assets/stockBackground/";
orbitDesktop.prototype.iconPath = "/assets/icons/";
orbitDesktop.prototype.currentLanguage = "en";
orbitDesktop.prototype.currentUsername = "Harry";
var uselessfunction = function(){
  $.post("/desktop/temp_func",{sectionid:"4f83e7bbbd98eb041600001d"});
}