var crsRender = 0 // Rendering flag
var scr = 0, csrsellContainer = 0, csccount = 0, cofst = 0, crsHandler = 0;
var crsElemCount = 0;
var csellAjxBind = 0;
var csellStopRender = 0;
var csellDrawer = 0, ads = 0, removedWidgetHeight = 0;
var calledMrec = 0;
var calledButtonAds = 0;
var calledGAds = 0;
var loadedWidgetCount = 0;
var isMobileDevice = function() {
    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}
var CROSS_SELL = {
    docPosition: 0,
    drawerInitialToggle: 0,
    isComplete: 0,
    // Cross sell per widget configs
    csell_elements: {
        'mrect1': {
          height: 0,
          func: "callMrect",
          param: {mrectCtr: "1"}
        },
        'glance': {
          height: 0,
          func: "callGlance",
          param: {}
        },
        'mrect2': {
          height: 0,
          func: "callMrect",
          param: {mrectCtr: "2"}
        },
        'crowdy': {
          height: 0,
          func: "callCrowdy",
          param: {}
        },
        'just_in_csell': {
          height: 0,
          func: "callJustIn",
          param: {}
        },
        'mostRead': {
          height: 0,
          func: "callTrending",
          param: {trendContainer : "trending_most_read"}
        },
        // 'mostShred': {
        //   height: 0,
        //   func: "",
        //   param:{trendContainer:  "trending_most_shared"}
        // },
        'mrect3': {
          height: 0,
          func: "callMrect",
          param: {mrectCtr: "3"}
        },
        'topVids': {
          height: 0,
          func: "callCarousel",
          param: {carouselType: "top"}
        },
        'latestVids': {
          height: 0,
          func: "callCarousel",
          param: {carouselType: "latest"}
        },
        'mrect4': {
          height: 0,
          func: "callMrect",
          param: {mrectCtr: "4"}
        },
        'tracking': {
          height: 0,
          func: "callTracking",
          param: {}
        },
        'twitterhldr': {
          height: 0,
          func: "callTwitter",
          param: {}
        },
        'radio': {
          height: 0,
          func: "",
          param: {}
        },
        'buttonAds': {
          height: 0,
          func: "callButtonAds",
          param: {}
        }
    },
    init: function() {
      if($(window).width() > 1200){
          var items = 0;
          CROSS_SELL.inline();
          while(items <= 1){
            this.loadWidget(true);
            items++;
          }
      }

      $(window).resize(function() {
          if ($(window).width() > 1200 && csellAjxBind == 0) {
              $(window).bind('scroll', CROSS_SELL.crsEvent);
              $(".cross_sell_drawer_content").css({"height": "initial"});
              $(document).ajaxStop(function() {
                  CROSS_SELL.getCsellElem();
                  $(this).unbind('ajaxStop');
              });
              csellAjxBind = 1;
              csellDrawer = 0;
          } else if ($(window).width() < 1200 && csellAjxBind == 1) {
              $(window).unbind('scroll', CROSS_SELL.crsEvent);
              csellAjxBind = 0;
          }

          if( $(window).width() < 1200 && csellDrawer == 0){
              CROSS_SELL.drawer();
              csellDrawer = 1;
              $(".cross_sell_drawer_content").height($(window).height() + "px");
          }

      }).resize();

      if(window_width >= 1200 && $("#story1_link").data('ismultimedia') == "1"){
          $('#cross_sell_drawer').fadeOut("fast");
      }

    },
    initData: function(){
        $.ajax({
            url: data_url + 'pages/cross_sell_json' + data_ext,
            dataType: 'json',
            type: 'get',
            success: function(data){
                generateJustIn(data.story_lists_just_in);

                var trending_params = {type: "article", limit: "5", title: "", container: "trending_most_read"};
                TRENDING.generate_content(data.trending_lists_trending, trending_params);

                /*var trending_params = {type: "article", limit: "5", title: "", container: "trending_most_shared"};
                TRENDING.generate_content(data.trending_lists_most_shared, trending_params);*/

                var carousel_params_top = {carouselType: "top_videos",type: "video_top_compact", section: "0", subsection: "0", show: "0", isCarousel: "0", title: "TOP VIDEOS", container: "carousel_compact_top_container"};
                carouselGenerate(data.carousel_lists_top_videos,carousel_params_top);

                var carousel_params_latest = {carouselType: "latest_videos", type: "video_latest_compact", section: "0", subsection: "0", show: "0", isCarousel: "0", title: "LATEST VIDEOS", t: "d1f23", container: "carousel_compact_latest_container"};
                carouselGenerate(data.carousel_lists_latest_videos,carousel_params_latest);


                var tracking_param = {trackingType: "tracking", type: "list"};
                trackingWidgetGenerate(data.tracker_lists_list, tracking_param);

            }
        });
    },
    getCsellElem: function() {
        for (var key in CROSS_SELL.csell_elements) {
            CROSS_SELL.csell_elements[key].height = $('.cross_sell_container .' + key).outerHeight();
        }
    },
    crsEvent: function() {
        var scrReal = $(document).scrollTop();
        if($("#cross_sell_drawer").css('display') !== 'none'){
            scr = $(document).scrollTop() + $(window).height();
            csrsellContainer = $('.cross_sell_container').height();
            csccount = $('.cross_sell_container').children().length;
            cofst = $('.cross_sell_container .glance:last').offset().top;
            //console.log(cofst);
            if (scr > csrsellContainer && crsRender == 0 && scr < ($('#holdr').height() || $('div#story_container').height())) {
                crsRender = 1;
                CROSS_SELL.loadWidget(true);
            }
        }

        CROSS_SELL.docPosition = scrReal;
    },
    loadWidget: function(loadData) {
        loadedWidgetCount++;
        var currentObject = Object.keys(CROSS_SELL.csell_elements)[crsElemCount];
        var mainContainer = ($('#story_container').length > 0) ? $('#story_container').outerHeight() : $('#holdr').outerHeight();
        //var totalHeight = mainContainer - ($('.cross_sell_container').outerHeight() + CROSS_SELL.csell_elements[currentObject].height);

        var containerOverride = "crosswdg_" + loadedWidgetCount;

        if(!this.isComplete){
          var currObjHtml = this.cSellWidgView(currentObject);
          $(".cross_sell_container").append(currObjHtml);
          $("."+currentObject+":last")
          .attr("id", "")
          .attr("id", containerOverride);
          this.isComplete = (crsElemCount == 13) ? 1 : 0;
        } else {
          var currObjHtml = $('.cross_sell_container .' + currentObject + ":last");
          currObjHtml
          .clone(true, true)
          .appendTo('.cross_sell_container')
          .attr("id", "")
          .attr("id", containerOverride);
        }

        CROSS_SELL.csell_elements[currentObject].param.containerOverride = "#"+containerOverride;

        if (CROSS_SELL.csell_elements[currentObject].func !== "" && loadData == true) {
            CROSS_SELL.callFunction(CROSS_SELL.csell_elements[currentObject].func, CROSS_SELL.csell_elements[currentObject].param);
        }

        crsElemCount = (crsElemCount == 13) ? 0 : crsElemCount + 1; // Where the magic happens
        if (csellStopRender == 0) {
            $(document).ajaxStop(function() {
                CROSS_SELL.setCrs();
            });
            csellStopRender = 1;
        }

        crsRender = 0;
    },
    callFunction: function(fn, param) {
        switch (fn) {
            case "callGlance":
                CROSS_SELL.callGlance(param);
            break;
            case "callJustIn":
                CROSS_SELL.callJustIn(param);
            break;
            case "callTrending":
                param = (Object.keys(param).length > 0) ? param : {};
                CROSS_SELL.callTrending(param);
            break;
            case "callCarousel":
                param = (Object.keys(param).length > 0) ? param : {};
                CROSS_SELL.callCarousel(param);
            break;
            case "callTwitter":
                CROSS_SELL.callTwitter();
            break;
            case "callMrect":
                CROSS_SELL.callMrect(param.mrectCtr);
            break;
            case "callButtonAds":
                CROSS_SELL.callButtonAds();
            break;
            case "callGAds":
                CROSS_SELL.callGAds();
            break;
            case "callCrowdy":
                CROSS_SELL.callCrowdy();
            break;
            case "callTracking":
                CROSS_SELL.callTracking(param);
            break;
        }
    },
    setCrs: function() {
        if (crsRender == 1) {
            crsRender = 0;
        }
    },
    callMrectDFP: function($mrecHoldr, ctr){
        var sec_caps = dfp_details[zone_id].cap;
        loadAd($mrecHoldr, 'GNO_'+sec_caps+'_Mrec_'+ctr, [300, 250]);
    },
    callMrect: function(ctr){
        var $mrecHoldr = $('#cross_sell_drawer .mrect'+ctr+' .mrectHoldr:last');
        $mrecHoldr.find('.dfp_ad').remove();
        if(dfp_zones.indexOf(zone_id)>-1){
            CROSS_SELL.callMrectDFP($mrecHoldr, ctr);
            return;
        }
        calledMrec++;
        var $mrecHoldr = $('#cross_sell_drawer .mrect'+ctr+' .mrectHoldr');
        var length = $mrecHoldr.length;
        $mrecHoldr.eq(length-1).html('<iframe id="mrec_frame_'+calledMrec+'" scrolling="no" style="width:300px; height: 250px; border: 0px;"></iframe>');
        var mrec_frame_node = document.getElementById("mrec_frame_"+calledMrec);
        mrec_frame_node.contentWindow.contents = $ads_json.mrec.replace($initial_zone_id+1+"", zone_id+1).replace($initial_synad, csell_article_tags);
        mrec_frame_node.src = 'javascript:window["contents"]';
    },
    callButtonAdsDFP: function(){
        var $skyscraper = $('#cross_sell_drawer .ad_120x600:last');
        $skyscraper.find('.dfp_ad').remove();
        var sec_caps = dfp_details[zone_id].cap;
        loadAd($skyscraper, 'GNO_'+sec_caps+'_Skyscraper_1', [160, 600]);

        var $tower = $('#cross_sell_drawer .adtower:last');
        $tower.find('.dfp_ad').remove();
        for(var i=1; i<7; i++){
            $tower.append('<div class="button'+i+'" style="margin: 10px 15px;"></div>');
            loadAd($tower.find('.button'+i), 'GNO_'+sec_caps+'_Button_'+i, [120, 90]);
        }
    },
    callButtonAds: function(){
        if(dfp_zones.indexOf(zone_id)>-1){
            CROSS_SELL.callButtonAdsDFP();
            return;
        }
        calledButtonAds++;
        var $bAdsHolder = $('#cross_sell_drawer .bAdsHolder');
        var length = $bAdsHolder.length;

       var $current_bAds = $bAdsHolder.eq(length-1);
       $current_bAds.html('<iframe id="button_ads_frame_'+calledButtonAds+'" scrolling="no" style="width:300px; height: 620px; border: 0px;"></iframe>');
       var button_ads_frame_node = document.getElementById("button_ads_frame_"+calledButtonAds);
       if(button_ads_frame_node !== null){
         //console.log("button ads working.");
         button_ads_frame_node.contentWindow.contents = $ads_json.b_ads
          .replace($initial_zone_id+5+"", zone_id+5)
          .replace($initial_zone_id+9+"", zone_id+9)
          .replace($initial_zone_id+10+"", zone_id+10)
          .replace($initial_zone_id+11+"", zone_id+11)
          .replace($initial_zone_id+12+"", zone_id+12)
          .replace($initial_zone_id+13+"", zone_id+13)
          .replace($initial_synad, csell_article_tags);
         button_ads_frame_node.src = 'javascript:window["contents"]';
       }
    },
    callGAds: function(){
        calledGAds++;
        var $gAdsHolder = $('#cross_sell_drawer .mrect2 .mrect');
        var length = $gAdsHolder.length;

       var $current_gAds = $gAdsHolder.eq(length-1);
       $current_gAds.html('<iframe id="gAds_frame_'+calledGAds+'" scrolling="no" style="width:300px; height: 250px; border: 0px;"></iframe>');
       var gAds_frame_node = document.getElementById("gAds_frame_"+calledGAds);
        if(gAds_frame_node !== null){
         gAds_frame_node.contentWindow.contents = $ads_json.gAds;
         gAds_frame_node.src = 'javascript:window["contents"]';
       }
    },
    callGlance: function(param) {
        param.section = "home";
        atAGlanceCall(param);
    },
    callCarousel: function(params) {
        var cType = (params.carouselType == 'top') ? "top_videos" : "latest_videos";
        var carousel_params = {
          carouselType: cType,
          type: "video_" + params.carouselType + "_compact",
          section: "0", subsection: "0", show: "0",
          isCarousel: "0",
          title: "TOP VIDEOS",
          container: "carousel_compact_" +params.carouselType + "_container",
          containerOverride: params.containerOverride
        };

        carouselCall(carousel_params);
    },
    callTwitter: function() {
        $('.cross_sell_container .twitterhldr:last a').remove();
        $('.cross_sell_container .twitterhldr:last iframe').remove();
        // Append new instance
        $('<a class="twitter-timeline" href="https://twitter.com/search?q=from%3A%40iamjuan7" data-chrome="noscrollbar nofooter noheader" data-dnt="true" data-widget-id="512555033141846017">Tweets from:@iamjuan7"</a>').insertAfter($('.cross_sell_container .twitterhldr:last .tweet_title'));
        var options = {
            "url": base_url + "res/css/widgets/tweets.css?a=sd1sdf1asd123123123dsf2"
        };
        // CustomizeTwitterWidget(options);
        $(".cross_sell_container .twitterhldr:last #twitter_container").height($(window).height());
        // twttr.widgets.load();
    },
    callTracking: function() {
        var tracking_param = {trackingType: "list", type: "list"};
        trackingWidgetCall(tracking_param);
    },
    callTrending: function(param) {
        if(param.trendContainer == "trending_most_read"){
          var trendType = (param.trendContainer === "trending_most_read") ? "trending" : "most_shared";;
          var trending_params = {trendingType: trendType,type: "article", limit: "5", title: "", container: param.trendContainer};
          TRENDING.init(trending_params);
        }
    },
    callJustIn: function() {
        getJustIn();
    },
    callCrowdy: function(){
      // crowdyPage variable is in cross_sell.php
      $(".crowdyHldr").eq(-2).find("#crowdynews-iframe").attr("id", "");
      var crowdyHldr = '<div style="width: 300px; height: 400px;" data-crowdynews-widget="GMAnetwork/'+ crowdyPage +'-vertical'+((crowdyPage == 'lifestyle') ? '-1' : '')+'"><script src="//widget.crowdynews.com/js/widget.js"></script></div>';
      $(".crowdyHldr:last").empty().html(crowdyHldr);
    },
    loadAds: function(){
        CROSS_SELL.callMrect(1);
        CROSS_SELL.callMrect(2);
        CROSS_SELL.callMrect(3);
        CROSS_SELL.callMrect(4);
        CROSS_SELL.callButtonAds();
    },
    drawer: function() {
        //var widget = 1;
        csellDrawer = 1;
        $(".cross_sell_drawer_button").css("top", (($(window).height() / 2) - 100) + "px");

        $(".cross_sell_drawer_content").css({
            "height": $(window).height() - 44 + "px",
            "overflow": "auto",
            "position": "absolute",
            "background": "#fff",
            "left": "30px"
        });
        $(".cross_sell_container").css({
            "width": "344px",
            "height": $(window).width() >= 1200 ? "100%" : "80%",
            "-ms-overflow-style": "none",
            "overflow": "auto"
        });
        $("#cross_sell_drawer").css({
            "top": $(".navbar-fixed-top").height()  + "px"
        });

        $(window).bind("scroll", function() {

            if( $(window).scrollTop() > 44){
                $("#cross_sell_drawer").css({
                    "top": "70px",
                    "height" : 40 + "px"
                });

            }else{
                $("#cross_sell_drawer").css({
                    "top": "109px"
                });

            }
        });

        // while(widget < 14){
        //   this.loadWidget();
        //   widget++;
        // }

        CROSS_SELL.clicked();

    },
    inline: function(){
        csellDrawer = 0;
        $(".cross_sell_container").css({
            "width": "325px",
            "overflow": "hidden",
            "height": "auto"
        });


        $(".cross_sell_drawer_content").css({
            "height": "auto",
            "overflow": "hidden",
            "position": "relative",
            "background": "#fff",
            "left": "0px",
            "width": "auto"
        });

    },

    clicked: function(){

        $(".cross_sell_drawer_button").click(function() {
            var drawer = $("#cross_sell_drawer");
            if (drawer.hasClass("toggled")) {
                drawer.removeClass("toggled");
                $(".cross_sell_drawer_button_text").html("&#9664;");
                if($(window).width() <= 320){
                    $(".cross_sell_drawer_button").css("right", "-5px");
                }
            } else {
              if(CROSS_SELL.drawerInitialToggle == 0){
                var items = crsElemCount;
                $(".cross_sell_container").css({"max-width": "334px"});
                while(items < 14){
                  CROSS_SELL.loadWidget(false);
                  items++;
                }
                var param = {section: "home"};
                atAGlanceCall(param);
                CROSS_SELL.initData();
                CROSS_SELL.callMrect(1);
                CROSS_SELL.callMrect(2);
                CROSS_SELL.callMrect(3);
                CROSS_SELL.callMrect(4);
                CROSS_SELL.callButtonAds();
                CROSS_SELL.drawerInitialToggle = 1;
              } else {
                CROSS_SELL.loadAds();
              }
              drawer.addClass("toggled");
              $(".cross_sell_drawer_button_text").html("&#9654;");
              if($(window).width() <= 320){
                  $(".cross_sell_drawer_button").css("right", "-34px");
              }
      				/*Google Analytics*/
      				var params = {event_category:"cross sell", event_label:"Cross Sell Drawer", event_value:1};
      				CUSTOM_ANALYTICS.ga_click_event(params);
      				/*end*/
            }

        });
    },

    cSellWidgView: function(type, params){
      var html = "";
      switch (type) {
        case "mrect1":
          html = '<section style="margin-bottom:10px" class="mrect1">'+
                    '<div class="ad 300x250">'+
                        '<div class="label">advertisement</div>'+
                      '  <div class="adel mrect mrectHoldr" style="border: 1px solid #a8a8a8; width: 300px; height: 250px;">'+
                      '  </div>'+
                     '</div>'+
                  '</section>';
        break;
        case "mrect2":
          html = '<section style="margin-bottom:10px" class="mrect2">'+
                    '<div class="ad 300x250">'+
                        '<div class="label">advertisement</div>'+
                      '  <div class="adel mrect mrectHoldr" style="border: 1px solid #a8a8a8; width: 300px; height: 250px;">'+
                      '  </div>'+
                     '</div>'+
                  '</section>';
        break;
        case "mrect3":
          html = '<section style="margin-bottom:10px" class="mrect3">'+
                    '<div class="ad 300x250">'+
                        '<div class="label">advertisement</div>'+
                      '  <div class="adel mrect mrectHoldr" style="border: 1px solid #a8a8a8; width: 300px; height: 250px;">'+
                      '  </div>'+
                     '</div>'+
                  '</section>';
        break;
        case "mrect4":
          html = '<section style="margin-bottom:10px" class="mrect4">'+
                    '<div class="ad 300x250">'+
                        '<div class="label">advertisement</div>'+
                      '  <div class="adel mrect mrectHoldr" style="border: 1px solid #a8a8a8; width: 300px; height: 250px;">'+
                      '  </div>'+
                     '</div>'+
                  '</section>';
        break;
        case "glance":
          html = '<section style="margin: 30px;" class="glance">'+
                    csellViewsJson.glance +
                  '</section>';
        break;
        case "crowdy":
          html = '<section class="crowdy">'+
                   '<div  class="crowdyHldr">'+
                     '<div style="width: 300px; height: 400px;" data-crowdynews-widget="GMAnetwork/'+crowdyPage+'-vertical'+(crowdyPage == 'lifestyle' ? '-1' : '')+'"><script src="//widget.crowdynews.com/js/widget.js" async="true"></script></div>'+
                   '</div>'+
                 '</section>';
        break;
        case "just_in_csell":
          html = '<section style="margin: 20px" class="just_in_csell">' +
                    csellViewsJson.just_in +
                  '</section>'
        break;
        case "mostRead":
          html = '<section style="margin: 20px" class="mostRead">'+
                    csellViewsJson.mostRead +
                 '</section>'
        break;
        case "mostShared":
          html = '<section style="margin: 20px" class="mostShared">'+
                    csellViewsJson.mostShared +
                 '</section>'
        break;
        case "topVids":
          html = '<section style="margin: 20px" class="topVids">' +
                   csellViewsJson.topVids +
                 '</section>'
        break;
        case "latestVids":
          html = '<section style="margin: 20px" class="latestVids">' +
                   csellViewsJson.latestVids +
                 '</section>';
        break;
        case "tracking":
          html = '<section style="margin: 20px" class="tracking">' +
                    csellViewsJson.tracking +
                 '</section>'
        break;
        case "twitterhldr":
          html = '<section style="margin: 0 auto; width: 300px;height: 505px;" class="twitterhldr">' +
                    csellViewsJson.twitterHldr +
                 '</section>';
        break;
        case "radio":
          html = '<section style="margin: auto; width: 300px; padding: 1.5% 0; text-align:center;" class="radio">'+
                    '<a href="javascript:void(0);" onclick="window.open("http://www.gmanetwork.com/radio/streaming", "_blank", "toolbar=yes, scrollbars=yes, resizable=yes, top=500, left=500, width=580, height=300");"><img alt="DZBB" title="DZBB" src="'+assets_url+'img/radio_crossell.png"></a>' +
                 '</section>';
        break;
        case "buttonAds":
          html += csellViewsJson.skyscraper_buttons;
        break;
        default:
      }

      return html;
    }
}