function handleTabSelect(event, tab) {
   if (tab.index == 0) {
      // tab 1 selected
      $(tab.tab).parent("li").parent("ul").find('img.img_spon').attr({ src: "/res/img/flipper/spon_vert_on.png" });
      $(tab.tab).parent("li").parent("ul").find('img.img_schol').attr({ src: "/res/img/flipper/schol_vert_off.png" });
      $(tab.tab).parent("li").parent("ul").find('img.img_church').attr({ src: "/res/img/flipper/church_vert_off.png" });
   }
   else if (tab.index == 1) {
      // tab 2 selected
      $(tab.tab).parent("li").parent("ul").find('img.img_spon').attr({ src: "/res/img/flipper/spon_vert_off.png" });
      $(tab.tab).parent("li").parent("ul").find('img.img_schol').attr({ src: "/res/img/flipper/schol_vert_on.png" });
      $(tab.tab).parent("li").parent("ul").find('img.img_church').attr({ src: "/res/img/flipper/church_vert_off.png" });
   }
   else if (tab.index == 2) {
      $(tab.tab).parent("li").parent("ul").find('img.img_spon').attr({ src: "/res/img/flipper/spon_vert_off_2.png" });
      $(tab.tab).parent("li").parent("ul").find('img.img_schol').attr({ src: "/res/img/flipper/schol_vert_off.png" });
      $(tab.tab).parent("li").parent("ul").find('img.img_church').attr({ src: "/res/img/flipper/church_vert_on.png" });
   }
}

function handleTabSelect_Horiz(event, tab) {
   if (tab.index == 0) {
      // tab 1 selected
      $(tab.tab).parent("li").parent("ul").find('img.img_spon').attr({ src: "/res/img/flipper/spon_on.png" });
      $(tab.tab).parent("li").parent("ul").find('img.img_schol').attr({ src: "/res/img/flipper/schol_off.png" });
      $(tab.tab).parent("li").parent("ul").find('img.img_church').attr({ src: "/res/img/flipper/church_off.png" });
   }
   else if (tab.index == 1) {
      // tab 2 selected
      $(tab.tab).parent("li").parent("ul").find('img.img_spon').attr({ src: "/res/img/flipper/spon_off.png" });
      $(tab.tab).parent("li").parent("ul").find('img.img_schol').attr({ src: "/res/img/flipper/schol_on.png" });
      $(tab.tab).parent("li").parent("ul").find('img.img_church').attr({ src: "/res/img/flipper/church_off.png" });
   }
   else if (tab.index == 2) {
      $(tab.tab).parent("li").parent("ul").find('img.img_spon').attr({ src: "/res/img/flipper/spon_off.png" });
      $(tab.tab).parent("li").parent("ul").find('img.img_schol').attr({ src: "/res/img/flipper/schol_off_2.png" });
      $(tab.tab).parent("li").parent("ul").find('img.img_church').attr({ src: "/res/img/flipper/church_on.png" });
   }
}

flipper = function( obj, config ){
   this.init( obj, config );
}

$.extend(flipper.prototype, {
   type: 'horizontal',
   spon_array: new Array(),
   cur_spon: 0,
   schol_array: new Array(),
   cur_schol: 0,
   church_array: new Array(),
   cur_church: 0,
   re_ids: null,
   spon_type: null,
   id: '',

   init: function( obj, config ) {
      if( config.type != '' ){
         this.type = config.type;
      }
      if( config.id != '' ){
         this.id = config.id;
      }

      this.spon_array = new Array();
      this.cur_spon = 0;
      this.schol_array = new Array();
      this.cur_schol = 0;
      this.church_array = new Array();
      this.cur_church = 0;
      this.church_image_array = new Array();
      this.re_ids = {sp:[],sc:[],ch:[]};
      this.spon_type = {};

      if( this.type == 'horizontal' ){
         $(".flip_" + this.id).tabs({ select: handleTabSelect_Horiz });
      } else {
         $(".flip_" + this.id).tabs({ select: handleTabSelect });

      }

      var self = this;

      this._init_spon();
      this._init_schol();
      this._init_church();

   },
   
   _init_spon: function() {
      var self = this;
      var count = 0;

      $("#sponsorship_" + self.id + " div.t_contain table").each(function(){
         var id = $(this).attr("id");   
         id = id.replace("child_", "");
         self.spon_array[count] = id * 1;
         count += 1;
      });

      self.re_ids.sp[0] = $('#sponsorship_'+ self.id +' .details_spon').attr('href');
      self.spon_type[0] = $('#sponsorship_'+ self.id +' .sponsorship_type').attr('src');
   },

   next_spon: function(){
      var self = this;
      var count = 0;
      self.cur_spon += 1;
      // ajax get next - pass in array so we don't get one we already have
      if( self.spon_array[self.cur_spon] == null ){
		$.ajax({
         url: '/ajax/flipper',
         data: 'type=child&avoid=' + JSON.stringify(self.spon_array),
         success: function( json ){
            json = eval('(' + json + ')');
            if( json.eof ){
               self.cur_spon = self.cur_spon - 1;
               self._button_state( 'spon', true, self.cur_spon );
            } else {
               $("#sponsorship_" + self.id + " table").removeClass("on");
               $('.details_spon').attr('href', '/sponsorship/'+ json.re_id );

               if( self.type == 'horizontal' ){
                  var html = '<table cellpadding="0" cellspacing="0" class="on" id="child_' + json.id + '">\
                  <tr>\
                     <td><span class="child-image"><img src="/res/child/' + json.id + '/thumbnail.jpg" alt="" style="width:134px;height:148px;"/><img class="sponsorship-type" src="/res/img/status/'+ json.sponsorship_type +'.png" alt="" /></span></td>\
                     <td class="text">\
                        <div style="overflow: hidden;height: 150px;">\
                        <span class="flipper_name_text">Hi, I\'m ' + json.first_name + '</span>\
                        <p>' + json.desc + '</p>\
                        <p class="flipper_name_text">Age: ' + json.age + '<br/>Country: ' + json.country + '</p>\
                        </div>\
                     </td>\
                  </tr>\
                  </table>';
               } else {
                  var html = '<table cellpadding="0" cellspacing="0" style="margin-top: 0;" class="on" id="child_' + json.id + '">\
                  <tr>\
                     <td colspan="3">\
                        <div style="overflow: auto;height: 150px;margin-top: 15px;">\
                        <span class="flipper_name_text">Hi, I\'m ' + json.first_name + '</span>\
                        <p>' + json.desc + '</p>\
                        <p class="flipper_name_text">Age: ' + json.age + '<br/>Country: ' + json.country + '</p>\
                        </div>\
                     </td>\
                  </tr>\
                  </table>';
                  
                  // add picture change and button change here
                  $("#spon_image").attr("src", "/res/child/" + json.id + "/thumbnail.jpg");
                  $("#spon_type").attr("src", "/res/img/status/" + json.sponsorship_type + ".png");
               }
               $("#sponsorship_" + self.id + " div.t_contain").append( html );
               self.spon_array[self.cur_spon] = json.id;
               self.re_ids.sp[self.cur_spon] = '/sponsorship/'+ json.re_id;
               self.spon_type[self.cur_spon] = $("#spon_type").attr("src");
               self._button_state( 'spon', false, self.cur_spon );
               $("#spon_action_" + self.id).attr("href", "/sponsorship/add/id/" + json.id);
            }
         }
      });

      } else {
            $("#sponsorship_" + self.id + " table").removeClass("on");
            $("#sponsorship_" + self.id + " .details_spon").attr('href', self.re_ids.sp[self.cur_spon]);
            $("#sponsorship_" + self.id + " table#child_" + self.spon_array[self.cur_spon]).addClass("on");
            this._button_state( 'spon', false, self.cur_spon );
            
            if( self.type == 'vertical' ){
               $("#spon_image").attr("src", "/res/child/" + self.spon_array[self.cur_spon] + "/thumbnail.jpg");
               $("#spon_type").attr("src", self.spon_type[self.cur_spon] );
            }
            $("#spon_action_" + self.id).attr("href", "/sponsorship/add/id/" + self.spon_array[self.cur_spon]);

         }

   },


   prev_spon: function(){
      var self = this;

      if( self.cur_spon > 0 ){
         $("#sponsorship_" + self.id + " table").removeClass("on");

         self.cur_spon = self.cur_spon - 1;
         var id = self.spon_array[self.cur_spon];

         $("#sponsorship_" + self.id + " table#child_" + id).addClass("on");
         $("#sponsorship_" + self.id + " .details_spon").attr('href', self.re_ids.sp[self.cur_spon] );

         if( self.type == 'vertical' ){
            $("#spon_image").attr("src", "/res/child/" + self.spon_array[self.cur_spon] + "/thumbnail.jpg");
            $("#spon_type").attr("src", self.spon_type[self.cur_spon] );
         }
         $("#spon_action_" + self.id).attr("href", "/sponsorship/add/id/" + self.spon_array[self.cur_spon]);

      }

      this._button_state( 'spon', false, self.cur_spon );
   },


   _button_state: function( type, isEnd, cur ) {
      if( this.type == 'vertical' ){
        if( isEnd ) {
          $(".flip_" + this.id + " .next_" + type + "_" + this.id).attr("src", "/res/img/next_arrow_off.png")
        } else {
          $(".flip_" + this.id + " .next_" + type + "_" + this.id).attr("src", "/res/img/next_arrow_on.png")
        }

        if( cur > 0 ) {
          $(".flip_" + this.id + " .prev_" + type + "_" + this.id).attr("src", "/res/img/prev_arrow_on.png")
        } else {
          $(".flip_" + this.id + " .prev_" + type + "_" + this.id).attr("src", "/res/img/prev_arrow_off.png")
        }
      } else {
         if( isEnd ){
            $(".flip_" + this.id + " .next_" + type).addClass("disabled");
         } else {
            $(".flip_" + this.id + " .next_" + type).removeClass("disabled");
         }
         if( cur > 0 ){
            $(".flip_" + this.id + " .prev_" + type).removeClass("disabled");
         } else {
            $(".flip_" + this.id + " .prev_" + type).addClass("disabled");
         }
      }
   },

   _init_schol: function() {
      var self = this;
      var count = 0;

      $("#scholarship_" + self.id + " div.t_contain table").each(function(){
         var id = $(this).attr("id");
         id = id.replace("child_", "");
         self.schol_array[count] = id * 1;

         count += 1;
      });

      self.re_ids.sc[0] = $('#scholarship_'+ self.id + ' .details_schol').attr('href');
   },

   next_schol: function(){
      var self = this;
      self.cur_schol += 1;
      // ajax get next - pass in array so we don't get one we already have
      if( self.schol_array[self.cur_schol] == null ){
      $.ajax({
         url: '/ajax/flipper',
         data: 'type=scholarship&avoid=' + JSON.stringify(self.schol_array),
         success: function( json ){
            json = eval('(' + json + ')');
            if( json.eof ){
               self.cur_schol = self.cur_schol - 1
               self._button_state( 'schol', true, self.cur_schol );
               ;
            } else {
               $("#scholarship_" + self.id + " table").removeClass("on");
               $('.details_schol').attr('href', '/scholarship/'+ json.re_id );

               if( self.type == 'horizontal' ){
                  var html = '<table cellpadding="0" cellspacing="0" class="on" id="child_' + json.id + '">\
                  <tr>\
                     <td><img src="/res/child/' + json.id + '/thumbnail.jpg" alt="" style="width:134px;height:148px;"/></td>\
                     <td class="text">\
                        <div style="overflow: hidden;height: 150px;">\
                        <span class="flipper_name_text">Hi, I\'m ' + json.first_name + '</span>\
                        <p>' + json.desc + '</p>\
                        <p class="flipper_name_text">Age: ' + json.age + '<br/>Country: ' + json.country + '</p>\
                        </div>\
                     </td>\
                  </tr>\
                  </table>';
               } else {
                  var html = '<table cellpadding="0" cellspacing="0" style="margin-top: 0;" class="on" id="child_' + json.id + '">\
                  <tr>\
                     <td colspan="3">\
                        <div style="overflow: auto;height: 150px;margin-top: 15px;">\
                        <span class="flipper_name_text">Hi, I\'m ' + json.first_name + '</span>\
                        <p>' + json.desc + '</p>\
                        <p class="flipper_name_text">Age: ' + json.age + '<br/>Country: ' + json.country + '</p>\
                        </div>\
                     </td>\
                  </tr>\
                  </table>';

                  // add picture change and button change here
                  $("#schol_image").attr("src", "/res/child/" + json.id + "/thumbnail.jpg");
               }
               $("#scholarship_" + self.id + " div.t_contain").append( html );
               self.schol_array[self.cur_schol] = json.id;
               self.re_ids.sc[self.cur_schol] = '/scholarship/'+ json.re_id;
               self._button_state( 'schol', false, self.cur_schol );
               $("#schol_action_" + self.id).attr("href", "/scholarship/add/id/" + json.id);

            }
         }
      });
      
      } else {
            $("#scholarship_" + self.id + " table").removeClass("on");
            $("#scholarship_" + self.id + " .details_schol").attr('href', self.re_ids.sc[self.cur_schol] );
            $("#scholarship_" + self.id + " table#child_" + self.schol_array[self.cur_schol]).addClass("on");
            self._button_state( 'schol', false, self.cur_schol );

            if( self.type == 'vertical' ){
               $("#schol_image").attr("src", "/res/child/" + self.schol_array[self.cur_schol] + "/thumbnail.jpg");
            }
            $("#schol_action_" + self.id).attr("href", "/scholarship/add/id/" + self.schol_array[self.cur_schol]);

         }
   },
   prev_schol: function(){
      var self = this;
      if( self.cur_schol > 0 ){
         $("#scholarship_" + self.id + " table").removeClass("on");

         self.cur_schol = self.cur_schol - 1;
         var id = self.schol_array[self.cur_schol];

         $("#scholarship_" + self.id + " table#child_" + id).addClass("on");
         $("#scholarship_" + self.id + " .details_schol").attr('href', self.re_ids.sc[self.cur_schol] );
         
         if( self.type == 'vertical' ){
            $("#schol_image").attr("src", "/res/child/" + self.schol_array[self.cur_schol] + "/thumbnail.jpg");
         }
         $("#schol_action_" + self.id).attr("href", "/scholarship/add/id/" + self.schol_array[self.cur_schol]);

      }
      this._button_state( 'schol', false, self.cur_schol );
   },
   

   _init_church: function() {
      var self = this;
      var count = 0;

      $("#church_" + self.id + " div.t_contain table").each(function(){
         var id = $(this).attr("id");
         id = id.replace("child_", "");
         self.church_array[count] = id * 1;

         count += 1;
      });

      self.re_ids.ch[0] = $('#church_'+ self.id +' .details_church').attr('href');
      self.church_image_array[0] = $("#church_image").attr("src");
   },

   next_church: function(){
      var self = this;
      self.cur_church += 1;
      // ajax get next - pass in array so we don't get one we already have
      if( self.church_array[self.cur_church] == null ){
      $.ajax({
         url: '/ajax/flipper',
         data: 'type=church&avoid=' + JSON.stringify(self.church_array),
         success: function( json ){
            json = eval('(' + json + ')');
            if( json.eof ){
               self.cur_church = self.cur_church - 1;
               self._button_state('church', true, self.cur_church);
            } else {
               $("#church_" + self.id + " table").removeClass("on");
               $('.details_church').attr('href', '/christian-worker-stipend/'+ json.re_id );

               if( self.type == 'horizontal' ){
                  var html = '<table cellpadding="0" cellspacing="0" class="on" id="child_' + json.id + '">\
                  <tr>\
                     <td><img src="' + json.thumbnail + '" alt="" style="width:134px;height:148px;"/></td>\
                     <td class="text">\
                        <div style="overflow: hidden;height: 150px;">\
                        <span class="flipper_name_text">Hi, I\'m ' + json.first_name + '</span>\
                        <p>' + json.desc + '</p>\
                        <p class="flipper_name_text">Country: ' + json.country + '</p>\
                        </div>\
                     </td>\
                  </tr>\
                  </table>';
               } else {
                  var html = '<table cellpadding="0" cellspacing="0" style="margin-top: 0;" class="on" id="child_' + json.id + '">\
                  <tr>\
                     <td colspan="3">\
                        <div style="overflow: auto;height: 150px;margin-top: 15px;">\
                        <span class="flipper_name_text">Hi, I\'m ' + json.first_name + '</span>\
                        <p>' + json.desc + '</p>\
                        <p class="flipper_name_text">Country: ' + json.country + '</p>\
                        </div>\
                     </td>\
                  </tr>\
                  </table>';

                  // add picture change and button change here
                  $("#church_image").attr("src", json.thumbnail);
                  self.church_image_array[self.cur_church] = json.thumbnail;
               }
               $("#church_" + self.id + " div.t_contain").append( html );
               self.church_array[self.cur_church] = json.id;
               self.re_ids.ch[self.cur_church] = '/christian-worker-stipend/'+ json.re_id;
               self._button_state('church', false, self.cur_church);
               $("#church_action_" + self.id).attr("href", "/christian-worker-stipend/add/id/" + json.id);

            }
         }
      });

      } else {
               $("#church_" + self.id + " table").removeClass("on");
               $("#church_" + self.id + " .details_church").attr('href', self.re_ids.ch[self.cur_church] );
               $("#church_" + self.id + " table#child_" + self.church_array[self.cur_church]).addClass("on");
               self._button_state('church', false, self.cur_church);
               
               if( self.type == 'vertical' ){
                  $("#church_image").attr("src", self.church_image_array[self.cur_church]);
               }
               $("#church_action_" + self.id).attr("href", "/christian-worker-stipend/add/id/" + self.church_array[self.cur_church]);

            }
      },
      prev_church: function(){
         var self = this;
         if( self.cur_church > 0 ){
            $("#church_" + self.id + " table").removeClass("on");

            self.cur_church = self.cur_church - 1;
            var id = self.church_array[self.cur_church];

            $("#church_" + self.id + " table#child_" + id).addClass("on");
            $("#church_" + self.id + " .details_church").attr('href', self.re_ids.ch[self.cur_church] );
            
            if( self.type == 'vertical' ){
               $("#church_image").attr("src", self.church_image_array[self.cur_church]);
            }
               $("#church_action_" + self.id).attr("href", "/christian-worker-stipend/add/id/" + self.church_array[self.cur_church]);

         }
         this._button_state('church', false, self.cur_church);
      }
 
});