// global varaibles
        var oJSON=null;
        var divAgentImages =null; var divOfficeImages=null; var divPropertyImages = null;
        var AgentArray=null;var OfficeArray=null; var PropertyArray=null;
        var CurrentAgentIndex =  0;var CurrentOfficeIndex = 0; var CurrentPropertyIndex = 0;
        var cc="107";var ID=null;var Name=null;
        var LinkPath=null;var ImagePath=null; var table="";var result="";var NoImageAgent="";
        var subFranchiseID=null;var FlagPageMode=""; var index =0; var count=null;
        
        $(document).ready(function() {     
            // if user change the category call the main fucntion agin
            $(".ddlSelectFranchiseID").change(function(){
            CallVideos(FlagPageMode);
        });         

            //calls main function and pass 1 
            CallVideos(FlagPageMode);
        });   


        // this function caals handlers and bring records
        function CallVideos(FlagPage)
        {
            //FlagPageMode=FlagPage; // get vale for flag
            subFranchiseID=$(".ddlSelectFranchiseID").val();  // get value from ddl

            // ajax call to Handler             
            $.ajax({
            type: "POST",
            url: "VideoHandler.aspx",                       
            data: {subFranchiseID:subFranchiseID,FlagPageMode:FlagPage},       
            dataType: "json",
            success: ShowAllVideos,
            error : function(msg)                
            {
            // alert(e);
            }        
            });
            
        }

        // if ajax call is successfull this function will be called
        function ShowAllVideos(msg)
        {
        oJSON=eval("("+msg.Results+")");// Get Results;
        if (( oJSON == "0") || (oJSON == null))
        {return;}               


        /// this portion should be executed once
        AgentArray=new Array();         
        OfficeArray=new Array(); 
        PropertyArray = new Array();            
        var cc=0;
        var newindex=0;
        var pp = 0;
        // now pouplate both arrays for agent and office 
        for(var i=0;i<oJSON.TABLE[0].ROW.length;i++)
        {
           
        switch(oJSON.TABLE[0].ROW[i].COL[2].DATA)
        {
        case "1":// fil agent records
        AgentArray [i] = new Array ();
        AgentArray [i][0]=oJSON.TABLE[0].ROW[i].COL[0].DATA;//ID        
        AgentArray [i][1]=oJSON.TABLE[0].ROW[i].COL[1].DATA;//Name
        AgentArray [i][2]=oJSON.TABLE[0].ROW[i].COL[2].DATA;//Videotype (1)
        AgentArray [i][3]=oJSON.TABLE[0].ROW[i].COL[3].DATA;//HasImage.  Note: Value actually used to identiy Agent/Team
        break;

        case "2":// Fill Office Records

        OfficeArray [cc]= new Array ();
        OfficeArray [cc][0]=oJSON.TABLE[0].ROW[i].COL[0].DATA;//ID        
        OfficeArray [cc][1]=oJSON.TABLE[0].ROW[i].COL[1].DATA;//Name
        OfficeArray [cc][2]=oJSON.TABLE[0].ROW[i].COL[2].DATA;//VideoType (2)
        OfficeArray [cc][3]=oJSON.TABLE[0].ROW[i].COL[3].DATA;//HasImage
        cc++;
        break;
        
        case "3":// Fill Property Records

        PropertyArray [pp]= new Array ();
        PropertyArray [pp][0]=oJSON.TABLE[0].ROW[i].COL[0].DATA;//ID        
        PropertyArray [pp][1]=oJSON.TABLE[0].ROW[i].COL[1].DATA;//Name
        PropertyArray [pp][2]=oJSON.TABLE[0].ROW[i].COL[2].DATA;//VideoType (3)
        PropertyArray [pp][3]=oJSON.TABLE[0].ROW[i].COL[3].DATA;//HasImage
        PropertyArray [pp][4]=oJSON.TABLE[0].ROW[i].COL[5].DATA;//MlslistingId
        pp++;
        break;
        }
        }

        if (subFranchiseID != FlagPageMode)
        { 
            CurrentAgentIndex =0;CurrentOfficeIndex=0; CurrentPropertyIndex = 0;
        }

        //call to show images              
        // CurrentAgentIndex=0;
        OnTimerExecute();
        
        }

        // Get info amd make tables
        function GetTableVideos(ID,Name,VideoType,HasImage)
        {    debugger;
     
            switch (VideoType)
            {
            
                case "1":// Agent case
                LinkPath=AgentBasePath + ID + "&VM=1";
                ImagePath=GetAgentImageURL(subFranchiseID,ID);
                break;

                case "2":// Office case
                LinkPath=OfficeBasePath + ID + "&VM=2";
                ImagePath=GetOfficeImageURL(subFranchiseID,ID);
                break;           
                
            }             

            result =BuildHTML(Name,ImagePath,LinkPath);              
            return result;
        }      

         // Get info amd make tables
        function GetPropertyVideos(ID,Name,VideoType,HasImage, MlslistingId)
        {
            switch (VideoType)
            {
                case "3": // Property Images
                LinkPath = PropertyBasePath + ID + "&VM=3";
                ImagePath=getPropertyImageUrl(MlslistingId.split(',')[0],MlslistingId.split(',')[1])+'?Width=90&Height=90';
              
                break;                
            }             

            result =BuildPropertyHTML(Name,ImagePath,LinkPath);
            return result;
        }

        // build inner <td> fill with all info
        function BuildHTML(Name, ImagePath, NavigatePath)
        {
            table="";
            table +="<td ><table><tr><td><a href="+ NavigatePath + "><img alt='' width=50px src="+ ImagePath + " /></a><br/>";
            table += "<a href="+ NavigatePath + ">" + Name + "</a></td></tr></table></td>";
            return table;
        }

        // Get Images URL for Agent
        function GetAgentImageURL(SubFranachiseID,ID)
        {
            var imageurl=AgentBaseImageUrl + "THUMBS/A/"+ID+ ".jpg?Width=90&Height=90";
            return imageurl;
        }
        
        // Get Images URL for Agent's Team
        function GetTeamImageURL(SubFranachiseID,ID)
        {
            var imageurl=AgentBaseImageUrl + "THUMBS/T/"+ID+ ".jpg?Width=90&Height=90";
            return imageurl;
        }
        
        // Get Images URL for Office
        function GetOfficeImageURL(SubFranachiseID,ID)
        {
            var pathimage=OfficeBaseImageUrl+"THUMBS/O/" +  ID + ".jpg?Width=90&Height=90";         
            return pathimage;
        }
        
        // Get default Images URL for Agent
        function AgentNoImage()
        {
                return  noimageagent;
        }

        // Get default Images URL for Property
        function PropertyNoImage()
        {
            return noImageProperty; 
        }

        /////////////// New implementation //////////////////////
        //Generate and inject Dynamics table for Agent, Office and Property
        function OnTimerExecute()
        {
            for( k = 1; k < 4; k++)
            {	

                switch(k)
                {
                    case 1:// agent Case		            
                    if (!(FlagPageMode == "2"))// don't execute this portion. Scan office records only
                    {
                        divAgentImages = $("#divAgentImages");                           
                        divAgentImages.html(CreateMyAgentTable())
                    }			            
                    break;

                    case 2: // Office case
                    divOfficeImages= $("#OfficeVideos"); 
                    divOfficeImages.html(CreateMyOfficeTable());
                   
                    break;
                    
                    case 3:
                    divPropertyImages = $("#PropertyVideos");
                    divPropertyImages.html(CreateMyPropertyTable());
                    break;
                }

            }

            setTimeout(OnTimerExecute, 10*1000);//10 seconds
        } 




        /////////////////////////// NEW Desgin For Video.Aspx //////////////////////////////////////////    
        // Build HTML(div) interface for Agent videos and fill all info
        function BuildMyHTML(Name, ImagePath, NavigatePath, VideoType)
        {
            table="";            
            //FOR EASE OF  SHAHID  
            table += "<div class='ContainerImageFrame'>";
                table += "    <div class='ContainerImage'>";
                    switch (VideoType)
                    {
                        case "1":   table += "               <a href="+ NavigatePath + "><img CssClass='' alt='' src="+ ImagePath + "  border='0' /></a>";
                        break;
                        
                        case "2":   table += "               <a href="+ NavigatePath + "><img CssClass='' alt=''  src="+ ImagePath + "  border='0' /></a>";
                        break;
                    }
                table += "</div>";
                table += "<div class='agentOfficeImageFrameFooterText'>";
                    table += "    <a href="+ NavigatePath + ">" + Name + "</a>";
                table += "</div>";
            table += "</div>";

        return table;
        }
        
        //Build HTML(div) interface for Property videos and fill all info
        function BuildPropertyHTML(Name, ImagePath, NavigatePath)
        {
            table="";
            var nameStr = Name.split(',');
            var fullName = nameStr[0]+"<br /> Price: $"+CommaFormatted(nameStr[1])+"<br />Baths: "+nameStr[2]+"<br />Beds: "+nameStr[3];
            //FOR EASE OF  SHAHID  
            table += "<div class='ContainerImageFrame'>";
                table += "    <div class='ContainerImage'>";
                  table += "               <a href="+ NavigatePath + "><img CssClass='agentOfficeImageFrameImage' alt='No Img' src="+ ImagePath + "  border='0'/></a>";
                table += "</div>";
                table += "<div class='agentOfficeImageFrameFooterText' style='width:125px;word-wrap: break-word;text-align:center;'>";
                    table += "    <a href="+ NavigatePath + ">" + fullName + "</a>";
                table += "</div>";
            table += "</div>";

        return table;
        }

        // main function call to build Agent HTML
        function CreateMyAgentTable()
        {
        index = CurrentAgentIndex;//file varaible
        count = 1;
        result = "";
        while(index < AgentArray.length && count <= 4)
        {
            result += GetMyTableVideos(AgentArray[index][0],AgentArray[index][1],AgentArray[index][2],AgentArray[index][3]  );
            count++;
            index++;
            if(index == AgentArray.length)
            {
                index = 0;
                //have break so the items do not repeat
                if (AgentArray.length < 4) {
                    break;
                }
            }
        }
        CurrentAgentIndex = index;
        return   result ;
        }


        // Get info amd make tables
        function GetMyTableVideos(ID,Name,VideoType,HasImage)
        {
            switch (VideoType)
            {
                case "1":// Agent case
                    if((HasImage == "True") || (HasImage == "1"))   //HasImage value is used to identify Agent/Team
                    {
                        LinkPath=TeamBasePath + ID + "&VM=1";
                        ImagePath=GetTeamImageURL(subFranchiseID,ID);
                    }
                    else
                    {
                        LinkPath=AgentBasePath + ID + "&VM=1";
                        ImagePath=GetAgentImageURL(subFranchiseID,ID);
                    }
                    break;

                case "2":// Office case
                    LinkPath=OfficeBasePath + ID + "&VM=2";
                    ImagePath=GetOfficeImageURL(subFranchiseID,ID);
                    break;
            }             

            result =BuildMyHTML(Name,ImagePath,LinkPath, VideoType);              
            return result;
        }  
        
        //main function to build HTML
        function CreateMyOfficeTable()
        {
            if ((OfficeArray.length < 4))
            {
                CurrentOfficeIndex=0;
            }
            index = CurrentOfficeIndex;//file varaible
            count = 1;
            result = "";
            while(index < OfficeArray.length && count <= 4)
            {
                result += GetMyTableVideos(OfficeArray[index][0],OfficeArray[index][1],OfficeArray[index][2],OfficeArray[index][3].toLowerCase());
                count++;
                index++;
                if(index == OfficeArray.length)
                {
                    index = 0;
                    //have break so the items do not repeat
                    if (OfficeArray.length < 4) {
                        break;
                    }
                }
            }
            CurrentOfficeIndex = index;
            return  result ;
        }
        
        //main function to build HTML
        function CreateMyPropertyTable()
        {
            if ((PropertyArray.length < 4))
            {
                CurrentPropertyIndex=0;
            }
            index = CurrentPropertyIndex;//file varaible
            count = 1;
            result = "";
            while(index < PropertyArray.length && count <= 4)
            {
                result += GetPropertyVideos(PropertyArray[index][0],PropertyArray[index][1],PropertyArray[index][2],PropertyArray[index][3].toLowerCase(),PropertyArray[index][4]);
                count++;
                index++;
                if(index == PropertyArray.length)
                {
                    index = 0;
                    //have break so the items do not repeat
                    if (PropertyArray.length < 4) {
                        break;
                    }
                }
            }
            CurrentPropertyIndex = index;
            return  result ;
        }
        
        //Formats a string with commas, currency style
        function CommaFormatted(amount)
        {
	        var delimiter = ","; // replace comma if desired
            var i = amount;
	        if(isNaN(i)) { return ''; }
	        var minus = '';
	        if(i < 0) { minus = '-'; }
	        i = Math.abs(i);
	        var n = new String(i);
	        var a = [];
	        while(n.length > 3)
	        {
		        var nn = n.substr(n.length-3);
		        a.unshift(nn);
		        n = n.substr(0,n.length-3);
	        }
	        if(n.length > 0) { a.unshift(n); }
	        n = a.join(delimiter);
            amount = n;
	        return amount;
        }